外贸公司网站开发,制作公司网页官网,网站设计联系,大数据营销分析文章目录 8.数据绑定9.el与data的2种写法10.理解mvvm11.object.defineProperty12. 理解数据代理13 vue中的数据代理 8.数据绑定 单向数据绑定就是我们学的v-bind的方式#xff0c;vue对象变了#xff0c;页面才变。但是页面变了#xff0c;vue对象不会变。 双向数据绑定需要… 文章目录 8.数据绑定9.el与data的2种写法10.理解mvvm11.object.defineProperty12. 理解数据代理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 里面做的是数据劫持不是数据代理。这个数据劫持主要是为了监控属性对象的变化然后渲染到界面上。
