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

事件绑定指令

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

跋尾

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

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

事件绑定指令

事件对象$event

跋尾