2.vue学习(8-13)

文章目录

  • 8.数据绑定
  • 9.el与data的2种写法
  • 10.理解mvvm
  • 11.object.defineProperty
  • 12. 理解数据代理
  • 13 vue中的数据代理

8.数据绑定

在这里插入图片描述
单向数据绑定就是我们学的v-bind的方式,vue对象变了,页面才变。但是页面变了,vue对象不会变。
双向数据绑定需要用v-model,就能实现双向的改变。
在这里插入图片描述
在这里插入图片描述
注意:不是所有的标签都能使用v-model属性的。如果用在了不支持的元素类型上会报错如下图。使用了

在这里插入图片描述
总结:v-model只能用于输入类元素上。多是表单类元素。

在这里插入图片描述
在这里插入图片描述

9.el与data的2种写法

在这里插入图片描述
这个$mount是Vue对象的一个全局参数,每个实例都可以用。mount这种方式更灵活,比如想让界面等1s钟再显示数据。

在这里插入图片描述

  • date的2种写法
    在这里插入图片描述
    对象式和函数式,用到组件的时候,必须使用函数式

在这里插入图片描述
函数式,是全局Vue实例对象帮你调用的。

总结:
在这里插入图片描述

10.理解mvvm

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
输出一下这个vm对象:
在这里插入图片描述
界面f12:
在这里插入图片描述
说明vm的data阈里面,不管写什么kv映射,最后都出现在vm实例对象里面了。vm实例对象有的属性,都可以在容器里直接访问到。

11.object.defineProperty

需求:给一个对象增加一个属性,并赋值。

在这里插入图片描述
这种方式声明的比较高级,这种方式声明的属性,颜色比较淡,如下图。淡的颜色,代表不可以被枚举。
在这里插入图片描述
调用这种枚举的代码,不会被枚举出来。也可以理解为不能遍历。
在这里插入图片描述
在这里插入图片描述
可以修改这种方式变为可以枚举:
在这里插入图片描述
但是这种方式,还有个特点,就是设置的属性,默认是不会被更改的。
在这里插入图片描述
这个不可被修改的特性,也可以改变,如下图。
在这里插入图片描述
通过属性定义得来的字段不能被删掉。删除会返回false。
在这里插入图片描述
也可以更改这一特性。
在这里插入图片描述
问题引入,如果想用一个变量给属性赋值,如下图:
在这里插入图片描述
这种情况,修改numer的值,person里面的不会改变。想要实现属性绑定效果,如下图:
在这里插入图片描述
界面上调用调试工具,会看到age是一个省略号,真正去获得的时候,会调用getter(就是上图的get函数)来获得。
在这里插入图片描述
有get方法,同样也会有set方法:
在这里插入图片描述
通过getset就实现了类似双向绑定的效果。

12. 理解数据代理

在这里插入图片描述
实际效果:
在这里插入图片描述

13 vue中的数据代理

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

上述这个例子,可以发现data里面的属性,是用了数据代理的,有getter和setter。可以验证一下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
上面2个截图就证明了,vm确实把data拿来做了存储和kv映射。
总结:
在这里插入图片描述

数据代理就是为了让编码更方便。

在这里插入图片描述

在这里插入图片描述
_data 里面做的是数据劫持,不是数据代理。这个数据劫持,主要是为了监控属性对象的变化,然后渲染到界面上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/233923.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

时序预测 | Python实现LSTM-Attention电力需求预测

时序预测 | Python实现LSTM-Attention电力需求预测 目录 时序预测 | Python实现LSTM-Attention电力需求预测预测效果基本描述程序设计参考资料预测效果 基本描述 该数据集因其每小时的用电量数据以及 TSO 对消耗和定价的相应预测而值得注意,从而可以将预期预测与当前最先进的行…

vue 学习笔记

生命周期 1)定义:vue实例从创建到销毁的过程 2)钩子函数 2.1)beforeCreate:vue实例初始化之前调用,这个阶段vue实例刚刚在内存中创建,此时data和methods这些都没初始化好。 2.2)Cre…

【算法】红黑树

一、红黑树介绍 红黑树是一种自平衡二叉查找树,是在计算机科学中用到的一种数据结构,典型的用途是实现关联数组。 红黑树是在1972年由Rudolf Bayer发明的,当时被称为平衡二叉B树(symmetric binary B-trees)。后来&am…

Educational Codeforces Round 160 (Rated for Div. 2)

Educational Codeforces Round 160 (Rated for Div. 2) Educational Codeforces Round 160 (Rated for Div. 2) A. Rating Increase 题意:给定一个由数字字符组成的字符串,且无前导零,将其分割成ab两部分,b不能有前导零&#x…

DETR 【目标检测里程碑的任务】

paper with code - DETR 标题 End-to-End Object Detection with Transformers end-to-end 意味着去掉了NMS的操作(生成很多的预测框,nms 去掉冗余的预测框)。因为有了NMS ,所以调参,训练都会多了一道工序&#xff0c…

Gemini 1.0:Google推出的全新AI模型,改变生成式人工智能领域的游戏规则!

Gemini 1.0:Google推出的全新AI模型,将改变生成式人工智能领域的游戏规则! 🎥 屿小夏 : 个人主页 🔥个人专栏 : IT杂谈 🌄 莫道桑榆晚,为霞尚满天! 文章目录 …

Ubuntu18.04 上通过 jihu 镜像完成 ESP-IDF 编译环境搭建流程

为了解决国内开发者从 github 克隆 esp 相关仓库慢的问题,已将 esp-idf 和部分重要仓库及其关联的子模块镜像到了 jihu,这些仓库将自动从原始仓库进行同步。此篇博客用来阐述 Ubuntu18.04 上通过 jihu 镜像完成 ESP-IDF 编译环境搭建流程。 注&#xff1…

LeetCode Hot100 51.N皇后

题目: 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回所有不同的 n 皇后问题 的…

亚马逊鲲鹏系统:引领批量自动操作买家号先进技术

亚马逊,作为全球最大的电商平台之一,其独特的自动化批量操作一直是众多我追逐的焦点。深入了解其主要使用方法,通过批量导入无数个买家账户,借助最新的反指纹技术和国外代理IP的绑定,可以成功规遍亚马逊市场&#xff0…

TortoiseGit通过SSH连接配置,生成SSH密钥方法

生成SSH密钥: Win环境下命令(git ssh key是可以自定义命名的): ssh-keygen -t ed25519 -C "git ssh key" && start "" "C:\Windows\notepad.exe" "C:\Users\%username%\.ssh\id_ed25519.pub" 打开cm…

三相异步电机动态数学模型推导及矢量控制仿真

文章目录 **原文链接,点击跳转**三相异步电机动态数学模型及矢量控制仿真1、异步电机三相方程2、坐标变换3、磁链3/2变换推导4、两相静止坐标系下的方程5、两相旋转坐标系下的方程6、以 ω-is-Ψr 为状态变量的状态方程7、矢量控制及 matlab 仿真 原文链接&#xff…

Linux中使用HTTP协议进行API交互的示例

在Linux中,HTTP协议就像一个神奇的传送门,让我们可以通过网络进行各种交互。这不,今天我们就来探讨一下如何使用HTTP协议在Linux中进行API交互。 首先,我们需要一个API。为了方便演示,我们假设有一个天气预报API&…

spark介绍及简单使用

简介 Spark是由加州大学伯克利分校AMPLab(AMP实验室)开发的开源大数据处理框架。起初,Hadoop MapReduce是大数据处理的主流框架,但其存在一些限制,如不适合迭代算法、高延迟等。为了解决这些问题,Spark在20…

Re解析(正则表达式解析)

正则表达式基础 元字符 B站教学视频: 正则表达式元字符基本使用 量词 贪婪匹配和惰性匹配 惰性匹配如下两张图,而 .* 就表示贪婪匹配,即尽可能多的匹配到符合的字符串,如果使用贪婪匹配,那么结果就是图中的情况三 p…

【Unity】运行时创建曲线(贝塞尔的运用)

[Unity]运行时创建线(贝塞尔的运用) 1. 实现的目标 在运行状态下创建一条可以使用贝塞尔方法实时编辑的网格曲线。 2. 原理介绍 2.1 曲线的创建 unity建立网格曲线可以参考Unity程序化网格体的实现方法。主要分为顶点,三角面&#xff0c…

浪潮信息KOS服务器操作系统:经过周密考虑后的智慧之选

文章目录 一、引言二、服务器操作系统概述三、选择服务器操作系统的关键因素四、评估服务器操作系统的标准五、选择服务器操作系统的实践经验六、浪潮信息KOS服务器操作系统一、稳定可靠二、高效协同三、全天候运维四、广泛兼容 七、总结与展望 浪潮信息信息KOS是浪潮信息信息基…

linux: ip route 与 route 用法详解与对比

文章目录 1. 引言2. ip route2.1 描述2.2 语法2.3 参数2.4 例子 3. route3.1 描述3.2 语法3.3 参数3.4 例子 4. 对比5. 参考 1. 引言 本文主要介绍 ip route 以及 route 的用法和区别。 2. ip route 2.1 描述 用于管理静态路由表。linux 系统中,可以自定义从 1&…

【docker】数据管理

Docker容器会随时关闭和开启,Docker 容器的数据放哪里呢? 答案就是:数据卷和数据卷容器 官网文档 Manage data in Docker | Docker Docs 数据卷(Data Volume) 数据卷就是将宿主机的某个目录,映射到容器中,作为数据存储的目录&…

无框架Java转go语言写http与tcp请求

项目地址 https://github.com/cmdch2017/http_tcpServer 项目结构 如何快速上手 http篇 1、controller包就相当于RestController,这里返回了一个Person对象,当你需要新建一个接口时,再新写一个func仿照下面的方法就行了 package control…

CSS设计器的使用

目录 css的概念 css的优势 css的基本语法 html中引入css样式 CSS基本选择器 选择器的使用 初级选择器: 标签选择器 类选择器 id选择器 高级选择器(结构选择器) ①后代选择器(E F) ②子选择器(E>F) ③相邻兄弟选择器(EF) ④通用兄弟选择器(…