一、一个简单的示例v-on当xxx的时候。二、事件处理2-1、参数说明div idroot h1你好呀{{name}}/h1 button v-on:clickshowinfo点击我/button /div script new Vue({ el:#root, data:{ name:milk, }, methods:{ showinfo(a, b, c, d){ console.log(a,b,c,d); } } }) /scripta拿到的是事件对象。是默认拿到的【备注】直接把函数名作为事件处理函数时Vue 会自动把事件对象传给函数。因此showInfo的第一个参数就是事件对象。2-2、this事件中的this就是vue的实例对象。当showInfo是箭头函数的时候this是window。所以所有被vue管理的函数都写成普通函数2-3、v-on:click的简写》click2-4、传参不传参showInfo传参showInfo(参数)。有时候你既需要传递自己的业务参数又需要获取点击事件的信息。解决方式使用$占位。这样你就能同时知道用户点击的是哪条业务数据以及这次点击事件的相关信息。2-5、methods对比datamethods中的函数也在vm实例中但是没有做数据代理即没有getter和setter方法。也可以把 methods中的函数放入到data中但是此时函数也做了数据代理没有必要所以只有data中的数据才做数据代理和数据劫持【回顾】数据代理在 Vue 2 中数据代理就是Vue 帮你把data中的数据代理到 Vue 实例上让你可以直接通过this.xxx访问和修改数据而不需要每次都写this._data.xxx。示例div idapp p{{ name }}/p /div script const vm new Vue({ el: #app, data: { name: 张三, age: 20 } }) console.log(vm.name) // 张三 console.log(vm._data.name) // 张三 /scriptname明明定义在data对象里面为什么我们可以直接使用vm.name获取它这是因为 Vue 2 做了数据代理。这就是数据代理的核心通过一个对象的属性访问或修改另一个对象中的对应属性。数据代理是怎么实现的Vue 2 主要使用 JavaScript 的Object.defineProperty()来实现数据代理。const data { name: 张三 } const vm {} Object.defineProperty(vm, name, { get() { return data.name }, set(newValue) { data.name newValue } }) console.log(vm.name) // 张三 vm.name 李四 console.log(data.name) // 李四这段代码可以拆成两部分理解get()当你读取vm.name时返回data.name。set()当你修改vm.name时把新值写入data.name。于是你访问的是vm.name实际读写的却是data.name。记住这三句话就够了data中的数据实际保存在 Vue 实例的_data对象中。Vue 2 通过数据代理让我们可以直接使用vm.name而不是每次都写vm._data.name。数据代理负责访问和修改数据的转发数据响应式负责在数据变化时触发页面更新。三、小结