## 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]示例 ~~~ <!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> ~~~ 在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）： ~~~ <my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component> ~~~ >[success]代码示例1 点击下面两个按钮，都能弹出1。 ~~~ <div id="box"> <input type="button" value="按钮1" onclick='alert(1)' /> <input type="button" value="按钮2" v-on:click='show()' /> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(){//方法 alert(1); } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on1.html ----- >[info]代码示例2 ~~~ <div id="box"> <input type="button" value="按钮1click" v-on:click='add()' /> <input type="button" value="按钮2mouseover" v-on:mouseover='add()' /> <input type="button" value="按钮3mouseout" v-on:mouseout='add()' /> <input type="button" value="按钮4mousedown" v-on:mousedown='add()' /> <input type="button" value="按钮5mouseup" v-on:mouseup='add()' /> <input type="button" value="按钮6dblclick" v-on:dblclick='add()' /> <hr /> <ul> <li v-for='value in arr'> {{value}} </li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { arr:['apple','banana','orange','pear'] }, methods:{ add:function(){//方法 this.arr.push('tomato') } } }) </script> ~~~ 用v-on 给每个按钮分别添加不同的事件，来向数组追加元素。 >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on2.html 效果演示：  >[success]代码示例3 缩写 ~~~ <div id="box"> <input type="button" value="按钮" v-on:click="show()"/> <input type="button" value="按钮" @click="show()"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(){ alert(1) } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on3.html --- >[success]代码示例4 事件对象 ~~~ <div id="box"> <input type="button" value="按钮" v-on:click="show()"/> <input type="button" value="按钮" @click="show($event)"/> <input type="button" value="按钮" @click="show($event,12)"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev,b){ alert(ev.clientX); alert(b) } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on4.html --- >[success]代码示例5 事件冒泡 ~~~ <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click="show($event)"/> <input type="button" value="按钮" @click.stop="show2()"/> </div> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(1); ev.cancelBubble=true;//阻止事件冒泡 }, show2:function(){ alert(2) } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on5.html >[success]代码示例6 默认行为 ~~~ <div id="box"> <input type="button" value="按钮" @contextmenu="show($event)"/> <input type="button" value="按钮" @contextmenu.prevent="show()"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(1); ev.preventDefault();//阻止默认行为 } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on6.html --- >[success]代码示例7 键盘事件1 ~~~ <div id="box"> <input type="text" value="按钮" @keydown="show($event)"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(ev.keyCode) } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on7.html --- >[success]代码示例8 键盘事件2 ~~~ <div id="box"> <input type="text" value="按钮" @keyup="show($event)"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(ev){ alert(ev.keyCode) } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on8.html ---- >[success]代码示例8 键盘事件3 ~~~ <div id="box"> <input type="text" value="按钮" @keyup.13="show()"/> <input type="text" value="按钮" @keyup.enter="show()"/> <input type="text" value="按钮" @keyup.up="show()"/> <input type="text" value="按钮" @keyup.down="show()"/> <input type="text" value="按钮" @keyup.left="show()"/> <input type="text" value="按钮" @keyup.right="show()"/> </div> <script type="text/javascript"> new Vue({ el: '#box', data: { }, methods:{ show:function(){ alert("你按回车了") } } }) </script> ~~~ >[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on9.html