Vue中数据代理与事件处理

目录

数据代理

Object.defineProperty

常见属性值

get和set函数 

 理解数据代理

Vue中的数据代理

 Vue中的数据代理小结

事件处理

 v-bind

 事件处理小结

---

数据代理

Object.defineProperty

常见属性值

get和set函数 

 访问页面

 理解数据代理

Vue中的数据代理

在Vue中的data数据，在其对象中以_data形式存在

 存在数据代理，所以可以通过vm直接操作data中的值，_data中的值会跟着变化

 Vue中的数据代理小结

1、Vue中的数据代理：

• 通过vm对象来代理data对象中的属性的操作（读/写）

2、Vue中数据代理的好处：

• 更加方便的操作data中的数据(如 {{ _data.name}}----->{{name}} ）

3、基本原理：

• 通过Object.defineProperty()吧data对象中所有属性添加到vm上。
• 为每一个添加到vm上的属性，都指定一个getter/setter。
• 在getter/setter内部去操作（读/写）data中对应的属性

事件处理

    
    
    
    




欢迎{{name}}
    点击提示信息
    提示的按钮

 v-bind

v-bind:title=“xxx”，绑定一个属性，让鼠标移动到上面有提示信息

页面效果

 事件处理小结

事件的基本使用：

1、使用v-on:xxx或者@xxx 绑定事件，其中xxx是事件名

2、事件的回调需要配置在methods对象中，配置在data中也可以，但是Vue会给data中的数据做代理，而我们的回调不需要做代理，这就增加了Vue的负担。

3、methods中配置的函数，不要用箭头函数！否则this就不是vm对象了，而是window

4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm，或者组件实例对象；

5、@click="test"和@click="test($event)"效果一致，但是后面的可以传如参数