Vue.js提供了事件处理机制,事件监听使用v-on指令作为DOM事件来处发JavaScript代码。通常情况下需要编写监听事件,方法事件处理器,内联事件处理器。
1.监听事件
监听事件直接把事件写在v-on指令中.
<div id= "app">
<button v-on:click="count = count + '添加事件'">添加</button>
<p>{{count}}</p>
</div>
<script>
var examplel = new Vue({
el:"#app",
data:{
count:"所添加元素"
}
})
</script>
2.方法事件处理器
在开发过程中,事件的处理方法都很复杂,所以v-on是不能直接写的,需要吧v-on接收一个定义方法来调用。
<div id="app">
<button v-on:click="clickPlay">clickPlay</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
name:"元素"
},
methods:{
clickPlay:function(){
alert(this.name + '方法被调用')
}
}
})
</script>
3.内联事件处理器
上述已经定义了方法事件处理器,但是要想传递参数,就需要内联JavaScript语句,这种方法被称为内联事件处理器。
<div id="app">
<button v-on:click="me('我说对的')">本人</button>
<button v-on:click="you('你说对的')">对方</button>
<br>本人说:{{me}}
<br>对方说:{{you}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
me:"",
you:""
},
methods:{
me:function(message){app.me = message},
you:function(message){app.you = message}
}
})
</script>
点击按钮之后,会显示对方说的话。
然而在内联语句中可以用特殊的变量$event把它传入方法,以此来访问原生的DOM事件。
<button v-on:click="funName('Vue.js',$event)"></button>
methods:{
funName:function(msg,event){event.preventDefault()}
}
4.修饰符
<a v-on:click.stop="doThis">阻止单击事件冒泡</a>
<form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>
<a v-on:click.stop.prevent="doThat">修饰符可以串联</a>
<from v-on:submit.prevent>只有修饰符</from>
<div v-on:click.capture="doThis">添加事件监听时使用事件捕获模式</div>
<div v-on:click.self="doThat">只当事件在该元素本身触发时触发回调</div>
<a v-on:click.once="doThis">单击事件将只会触发一次</a>
5.按键修饰符
- .enter
- .tab
- delete
- .esc
- space
- up
- down
- left
- right
<input v-on:keyup.enter="submit">
或者缩写
<input @keyup.enter="submit">
6.修饰键
- .ctrl
- .alt
- .shift
- .meta
<input @keyup.alt.65="clear">