事件修饰符和按键码
<div id="app">
<h3>1、事件处理方法 v-on 或 @</h3>
<p>{{ msg }}</p>
<button v-on:click="say">点击我</button>
<!--$event 代表的是原生的Dom事件-->
<button @click="warn('小红',$event)">warn</button>
<h3>2、事件修饰符</h3>
<!--2-1、防止单击事件继续传播-->
<div @click="todo">
<button @click="doThis">单击事件会继续传播</button>
</div>
<div @click="todo">
<!--.stop作用 阻止事件传播-->
<button @click.stop="doThis">阻止单击事件会继续传播</button>
</div>
<!--2.2 阻止事件的默认行为-->
<a href="https://www.baidu.com" @click.prevent="doStop">百度一下</a>
<!--2.3 点击事件只会触发一次-->
<button @click.once="doOnly">once 只能触发一次{{num}}</button>
<h3>3、按键修饰符或按键码</h3>
<input type="text" @keyup.enter="keyEnter">
<input type="text" @keyup.space="keySpace">
<input type="text" @keyup.13="keyCode">
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg:"hello vue",
num:0
},
methods:{ // 指定事件处理函数
say:function( event ){
// event 代表的是Dome原生事件，vue会自动的将它传入进来
alert(this.msg)
// target 找到目标元素
alert(event.target.innerHTML)
},
warn:function( name,event){
// 如果说函数有多个参数，而双需要使用原生事件，则需要使用$event作为参数传入
alert( name + ','+event.target.tagName )
},
doThis:function(){
alert('doThis');
},
todo:function(){
alert('todo...')
},
doStop:function(){
alert('doStop')
},
doOnly:function(){
this.num++
},
keyEnter:function(){
alert('当前按的是回车键')
},
keySpace:function(){
alert('当前按的是空格键')
},
keyCode:function(){
alert('当前按的是13')
}
}
});
</script>