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)"。
示例
<!-- 方法处理器 --> <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>
代码示例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
代码示例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 给每个按钮分别添加不同的事件，来向数组追加元素。
预览：https://ityanxi.github.io/Vue-tutorial/chapter04/08v-on2.html
效果演示：
代码示例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>
<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