v-on
1. 获取点击事件元素本身
< button type=“button” @click=“click1($event)”>按钮< /button>
methods : { click1() { …} }
console.log(e);//返回一个鼠标事件对象MouseEvent。
console.log(e.target);//通过对象的target来获取触发事件的对象。
console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X。
<div id="app">
<button type="button" @click="click1($event)">按钮</button>
<p @click="click1($event)">哈哈哈哈</p>
<p>{
{
count }}</p>
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
count : 1
},
methods: {
click1(e){
this.count++;
console.log(e);//返回一个鼠标事件对象MouseEvent
console.log(e.target);//通过对象的target来获取触发事件的对象
console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X
}
}
})
</script>
（1）点击 ‘按钮’：
（2）点击 ‘哈哈哈哈’
2. v-on 修饰符
1 .self
只当触发事件的元素是当前元素本身时，才触发处理函数；即只当e.target是当前元素资深是才触发处理函数
<style type="text/css">
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
}
.box2{
width: 150px;
height: 150px;
border: 1px solid red;
}
</style>
<div id="app">
<div class="box1" v-on:click.self="click1">
<div class="box2">
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
},
methods:{
click1(){
alert('click1');
}
}
})
</script>
加了.self，只有点击box1的时候，才会触发事件；
不加.self，点击box2，也会触发事件。
2 .once
事件只触发一次
<div id="app">
<div class="box1" @click.once="click1">
{
{
count }}
</div>
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
count : 1
},
methods:{
click1(){
this.count++
}
}
})
count的初值为1，点击之后增为2，当再次点击的时候，count的值不会再增加。
3 .capture
改变触发事件的先后顺序，优先捕获事件，优先执行被捕获事件。
<div id="app">
<div class="box1" @click.capture="click1">
<div class="box2" @click="click2">
<div class="box3" @click="click3">
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
},
methods:{
click1(){
alert('click1')
},
click2(){
alert('click2')
},
click3(){
alert('click3')
}
}
})
</script>
正常情况下，点击box3的时候，会先触发box3的点击事件，然后依次触发box2，box1的点击事件。但是，在给box1添加了.capture之后，点击box3的时候，会先触发box1的点击事件，然后再触发box3的点击事件，接着触发box2的点击事件。
4 .prevent
取消默认行为，例如取消a连接的跳转行为，取消选框的选中行为等。
<div id="app">
<input type="checkbox" @click.prevent="handleSel"/>
<input type="radio" name="" id="" value="" @click.prevent="handleSel"/>
<p>{
{
msg }}</p>
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
msg : 4
},
methods:{
handleSel(){
console.log('prevent')
}
}
})
</script>
当点击复选框的时候，复选框不会被选中，但是事件还是触发了。
4 .stop
阻止事件冒泡。冒泡是从子元素到父元素，捕获是从父元素到子元素。
<div id="app">
<div class="box1" @click="click1">
<div class="box2">
<div class="box3" @click="click3">
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
count : 1
},
methods:{
click1(){
alert('click1');
},
click3(){
alert('click3');
}
}
})
</script>
正常情况下，当点击box2的时候，会先触发box2的点击事件，然后冒泡到父级，触发父级的点击事件。但是给box2添加了.stop之后，点击box2的时候，只会触发box2 的点击事件，不会冒泡到父级，不触发父级的点击事件。
5.按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<div id="app">
<input class="box1" v-model="value" @keypress.enter="keypress">
{
{
value }}
</div>
<script type="text/javascript">
new Vue({
el : '#app',
data : {
value : 'd'
},
methods:{
keypress(){
console.log('mmm')
}
}
})
</script>
当在键盘按下回车键的时候触发事件。
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right