绑定事件
指令是v-on ，可以用@ 修饰符简写，这些是最常用的。
定义事件，统一在methods对象中定义，methods和data是平级的。
<div v-on:click="add">{{num}}</div>
// ------
<script>
export default{
data(){
return {
num:1
}
},
methods:{
add(){
this.num++
}
}
}
</script>
事件对象event在vue中的使用
- 如果不传参数，则定义的函数默认第一个参数是事件对象
<div v-on:click="add">{{num}}</div>
// ----
add(e){
console.log(e)
this.num++
}
- 如果传其他参数，则传入$event作为事件对象去在函数中使用。
<div v-on:click="add(1,$event)">{{num}}</div>
// -----
add(num,e){
console.log(num);
console.log(e)
this.num++
}
常用事件修饰符
- 阻止事件冒泡
<div @click.stop="add"></div>
- 只执行一次
<div @click.once="add"></div>
- 阻止默认行为
<div @click.prevent="add"></div>
vue中的键盘事件
keyup表示键盘事件，按下键盘的时候会触发
<input @keyup="key" />
几个常用的特殊按键修饰符
- 按删除键时触发
<input @keyup.backspace="key" />
- ctrl+a+回车 触发
<input @keyup.ctrl.a.enter="key" />
- 其他按键别名：
上下左右：up down left right
回车：enter 空格：spack tab：tab esc：esc delete：delete
