vue指令之v-on
v-on的作用是给元素添加事件监听，可以简写为@
JavaScript的元素的事件监听都可以再vue中使用
原生的JavaScript的事件监听:
|
事件名称 |
方法 |
|
点击 |
onclick |
|
双击 |
ondblclick |
|
鼠标移上 |
onmouseenter |
|
鼠标离开 |
onmouseleave |
|
鼠标滑过 |
onmousemove |
|
鼠标移除 |
onmouseout |
|
失去焦点 |
onblur |
|
聚焦 |
onfocus |
|
键盘事件 |
onkeydown |
上表的方法都是原生的JavaScript的事件方法，在vue中的使用是一律去除on，然后 添加v-on：或者@
126 7{{a}}
3 4 5
此时打开浏览器可以看到：
下面的代码是错误的，因为vue没有定义对应的方法名称：
1 var vue = new Vue({ 2 el: "#app", 3 data: { 4 a: 100 5 }, 6 add() { 7 this.a++ 8 }, 9 minus() { 10 this.a -- 11 } 12 })
打开network面板会看到：
原生的JavaScript的事件方法是不能和vue混用的
此时会报错
同名方法会有覆盖情况，后写方法会覆盖先写的方法：
1 var vue = new Vue({ 2 el: "#app", 3 data: { 4 a: 100 5 }, 6 methods:{ 7 add() { 8 this.a++ 9 }, 10 add() { 11 this.a += 3 12 }, 13 add() { 14 this.a += 5 15 } 16 } 17 })
我们可以看到以4的基数进行相加：
方法中是可以传入参数的：
125 6{{a}}
3 4
我们可以看到以5的基数进行相加：
我们可以查看方法中的事件参数
1 methods:{ add(event) { console.log(event) } }
原文：https://www.cnblogs.com/keyeking/p/15260680.html