2.5 事件
- 定义&缩写
定义
<button v-on:click='counter +=1'>test</button>
缩写
<button @click='counter +=1'>test</button>
注意：click的添加
2.内联写法
问题：啥事内联，JQ中有内联，是一回事么
如果时间特别复杂，可以设置调用方法的名称
<button @click='msg'>test</button>
对应方法
methods:{
msg:function(){
window.console.log('something')
}
}
2.1 可以传入参数
<button @click='msg("s")'>test</button>
对应方法
methods:{
msg:function(arg1){
window.console.log('something',arg1)
}
}
2.2 可以传入事件本身
<button @click='msg("a",$event)>test</button>
对应方法
methods:{
msg:function(arg1,arg2){
window.console.log('something',arg1,arg2)
}
}
- 事件修饰符
.stop .prevent等
template中做以下写法，展示冒泡
<div class="parent" @click="parents">
<p>parents</p>
<p>parents</p>
<p>parents</p>
<div class="child" @click.stop="child">child</div>
</div>
在methods中设置
methods:{
parents:function(){
window.console.log('parent')
},
child:function(){
window.console.log('child')
}
}
在没有.stop时，点击child，依次出现child，parents，添加.stop 后，点击child只会出现child
