冇事来学系--Vue2.0事件绑定

---

theme: scrolls-light

「这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」。

事件绑定指令

• v-on事件绑定指令，用于为DOM元素绑定事件监听
• 语法格式 --> v-on: 事件名称="事件处理函数名称"
• 若需要传递参数，则在事件处理函数名称后面加个括号( )，在括号内写入参数

```js

count 的值为：{{ count }}

+1 -1 +n

```

```js

// 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

• 使用事件对象的两种情况

```

count 的值为：{{ count }}

+n

```

// 需求：当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 = '' } } } })

```js

count 的值为：{{ count }}

+n

```

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

js <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 = '' } }

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖