v-on
最后更新于：2022-04-02 01:16:19
## v-on指令
**缩写：** @
**类型：** Function | Inline Statement
**参数：** event (required)
**修饰符：**
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
**用法：**
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event **属性： **v-on:click="handle('ok', $event)"。
>[info]示例
~~~
~~~
在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）：
~~~
~~~
用v-on 给每个按钮分别添加不同的事件，来向数组追加元素。
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on2.html
效果演示：
>[success]代码示例3 缩写
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on3.html
---
>[success]代码示例4 事件对象
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on4.html
---
>[success]代码示例5 事件冒泡
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on5.html
>[success]代码示例6 默认行为
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on6.html
---
>[success]代码示例7 键盘事件1
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on7.html
---
>[success]代码示例8 键盘事件2
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on8.html
----
>[success]代码示例8 键盘事件3
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on9.html
';
- {{value}}