1、事件操作
（1） 事件绑定
通过v-on:事件名称 绑定事件操作,语法上可以优化为@事件名称完成事件绑定.
（2） 事件对象
事件操作函数不带参数的时候,事件处理函数的第一个形式参数,默认就是事件对象!这里不需要兼容写法.
const vm = new Vue({
...
methods: {
handlerMsg(e) {
// e = e || window.event
// 直接使用e 事件对象
}
}
})
（3） 带参数的事件对象
事件操作函数如果附带参数的情况下,Vue提供了显示事件对象:$event,用于事件函数传参
<div>
<input type="text" @keyup="handleDelEvnet($event, 10)" />
</div>
...
<script>
const vm = new Vue({
...
methods: {
handleDelEvnet(e, index) {
// 处理事件对象e 和参数数据index
}
}
})
</script>
（4） 事件修饰符
事件操作过程中会包含许多的附加操作,例如阻止浏览器默认行为、阻止事件冒泡、事件的一次性触发等等,Vue中提供了对应的修饰符,可以在事件绑定时直接完成关联
-
.stop：阻止事件冒泡 -
.prevent：阻止默认行为 -
.capture：捕获触发 -
.once：一次性触发 -
.self：独立触发 -
.passive：滚动行为
2、表单操作
网页中有一个非常重要的组件: 表单,完成了用户对数据的输入!
Vue中提供了非常重要的指令:v-model,用于自动接收用户输入的数据!
3、数据双向绑定
（1） 什么是数据双向绑定
数据双向绑定,是出现在前端应用的一个专业术语,描述了数据在界面和数据处理部分之间的关联关系,数据在视图界面和脚本数据处理部分实现双联关系,所以称这样的操作模式为数据的上香绑定,简称MVVM
<body>
<div id="app">
<input type="text" v-model="name">
<p>用户输入的数据：{{name}}</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "DAMU"
}
})
</script>
</body>
（2） 数据双向绑定的问题
① 正确的添加和渲染
this.names.push(this.name) // 添加数据【成功】，渲染数据【成功】
② 出现问题的添加
this.names[this.names.length] = this.name // 添加数据【成功】，渲染数据【失败】
总结:
Vue中存在一种机制，可以监听变量中的数据是否发生变化，一旦数据发生变化就需要通知页面进行更新；假设这样的机制监听了数组的push函数，所以push()数据时添加和渲染都没有问题；但是没有监听通过下标进行添加数据的操作，所以下标增加数据成功但是无法在页面上完成渲染！
浏览器控制台打开vm实例，查看names属性时，发现原型对象上挂载了数组的部分函数（接收vue实例进行管理和监听的，当数组中的数据经过这些函数完成数据更新，会自动完成数据渲染）；这部分函数以外的其他操作方式可能会改变数组数据但是不会引起页面重新渲染！
（3） 底层实现原理
Vue中底层对变量进行了 数据劫持（变量的一种声明方式），就可以监控变量中数据的变化，也是Vue中数据双向绑定的底层实现原理，如图所示：
代码操作: 数据劫持完成变量声明
1378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
