目录
@click
原本事件监听是:v-on:,语法糖简化为@
当通过methods中定义方法,以供@click调用时,需要注意参数问题:
情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
<div id="app">
<h2>{{count}}</h2>
<button @click = "inscrease()">点击增加</button>
<button @click = "descrease()">点击减少</button>
</div>
<div id="app1">
<h2>{{count}}</h2>
<button @click = "canshu_increase(delt_add)">参数传递</button>
<button @click = "canshu(delt_reduce,$event)">事件传递</button>
</div>
<script src="../vue/vue.js"></script>
<script>
const test = new Vue({
el : "#app",
data : {
count : 0
},
methods:{
inscrease(){
this.count ++
},
descrease(){
this.count--
}
}
})
const test1 = new Vue({
el:"#app1",
data:{
count:0,
delt_add : 10,
delt_reduce : 10
},
methods:{
canshu_increase(delt_add){
this.count += delt_add,
console.log("canshu");
},
canshu(delt_reduce,event){
this.count -= delt_reduce,
console.log(event);
}
}
})
</script>
stop:阻止冒泡
如下,div里调用divClick方法,button调用BuClick方法,
<div id="test" @click = "divClick">
<h2>这是div</h2>
<button @click = "BuClick">按钮</button>
</div>
const test = new Vue({
el:"#test",
methods:{
BuClick(){
console.log("按钮被点击");
},
divClick(){
console.log("div被点击");
},
效果如下,点击button后,两个方法都会调用,这就是冒泡。而我们只希望按钮的方法会调用,所以加上stop
加上stop:
<div id="test" @click = "divClick">
<h2>这是div</h2>
<button @click.stop = "BuClick">按钮</button>
</div>
效果显示只有button的方法会被调用。
prevent 阻止默认事件
一个提交事件,不加prevent,会之间进行提交,而往往我们想在sumbit方法里进行一下相关操作再提交,所以加上prevent。
<form action="baidu">
<input type="submit" value="提交" @click="submit">
</form>
submit(){
console.log("sumbit被执行");
},
加上prevent (下面.stop同样阻止了div的冒泡)
<form action="baidu">
<input type="submit" value="提交" @click.prevent.stop="submit">
</form>
键盘监听:keyup
加上.enter是对回车键的监听,不加则是对任何键的监听
<input type="text" @keyup.enter = "keyup">
在输入框输入按下回车后,效果如下
如果这个输入框也在div里面,那么点击后依然会冒泡,可以创建一个空的点击事件.stop
<input type="text" @keyup.enter = "keyup" @click.stop="">