事件绑定指令
- v-on事件绑定指令，用于为DOM元素绑定事件监听
- 语法格式 --> v-on: 事件名称="事件处理函数名称"
- 若需要传递参数，则在事件处理函数名称后面加个括号( )，在括号内写入参数
<!-- 点击按钮，count的值+1或者-1 --> <div id="app"> <p>count 的值为：{{ count }}</p> <button v-on:click="addCount"> +1 </button> <button v-on:click="subCount"> -1 </button> <button v-on:click="addN(2)"> +n </button> <!-- 每次加2 --> </div>
// el是表明vue控制区域的；data对象是要渲染到页面的数据；methods对象是定义事件处理函数的位置 const vm = new Vue({ // 创建vue实例对象 el: '#app', data: { count: 0 }, methods: { // 注意是methods，s别丢了 add: function(){}, // 这种是普通的写法，日常开发中通常使用简写，如下： addCount(){ console.log(vm) // 打印vue实例对象vm，可以发现要修改的数据count是vm的一个属性 // vm.count += 1 // 通过vm对象的count属性，来修改count的值。但是通常不这么写，而是直接用this this.count += 1 // this指向的就是vue的对象实例vm }, subCount(){ this.count -= 1 }, addN(n){ this.count += n } } })
- 由于v-on指令使用的非常多，所以通常使用简写，符号为@ (v-bind简写为冒号:)
事件处理函数的简写：当事件处理函数只有一句代码时，可以 直接写在行内，以字符串的形式，在绑定事件的背后用等号连接
<button @click="i+=1">加1</button>
事件对象$event
- 使用事件对象的两种情况
<div id="app"> <p>count 的值为：{{ count }}</p> <button v-on:click="add"> +n </button> </div>
// 需求：当count为偶数的时候，按钮背景颜色变为红色 const vm = new Vue({ // 创建vue实例对象 el: '#app', data: { count: 0 }, methods: { // 注意是methods，s别丢了 add(e){ this.count += 1; // 判断this.count是否为偶数，来决定按钮背景变色 if(this.count %2 == 0){ e.target.style.backgroundColor = 'red' // e.target是触发事件的事件源 }else { e.target.style.backgroundColor = '' } } } })
<div id="app"> <p>count 的值为：{{ count }}</p> <button v-on:click="add(1)"> +n </button> <!-- 当事件处理函数传入参数时，就会覆盖掉原有的事件对象 --> </div>
const vm = new Vue({ // 创建vue实例对象 el: '#app', data: { count: 0 }, methods: { // 注意是methods，s别丢了 add(e){ // 因为上面的使用，add函数是传入了参数的，所以这个e是形参而非事件对象 this.count += 1; // 判断this.count是否为偶数，来决定按钮背景变色 if(this.count %2 == 0){ e.target.style.backgroundColor = 'red' // e是形参也就没有e.target，所以这里会报错 }else { e.target.style.backgroundColor = '' } } } })
- 对于传入的参数覆盖了事件对象e的问题， vue提供了一个内置变量$event，这就是原生DOM的事件对象e。
如果默认的事件对象e被覆盖了，则可以手动传递一个$event
<button v-on:click="add(1, $event)"> +n </button> <!-- 这里传入两个实参，$event的就是事件对象(固定写法) -->
// 处理函数定义也要写入两个形参 add(n, e){ // 这两个参数位置可换 this.count += n; // 判断this.count是否为偶数，来决定按钮背景变色 if(this.count %2 == 0){ e.target.style.backgroundColor = 'red' // e是形参也就没有e.target，所以这里会报错 }else { e.target.style.backgroundColor = '' } }
