v-on的介绍
- 在Vue中,常使用v-on指令用于监听事件的发生,v-on指令就类似于JavaScript中的addEvelistener()方法
v-on的基本使用
<div id="app">
<h2>{{counter}}</h2>
<!-- 监听一个click鼠标点击事件 -->
<button v-on:click="increment">+</button>
<!-- v-on:的语法糖写法@ -->
<button @click="decrement">-</button>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
})
</script>
v-on参数传递问题
- 当通过methods中定义方法,以供@click调用时,需要注意参数问题:
- 如果该方法不需要额外参数,可以省略方法后的()
- 默认会将原生事件event作为额外参数传递进去
<button @click="btn2Click">按钮2</button>
<button @click="btn3Click(123)">按钮3</button>
<script type="text/javascript">
const app = new Vue({
methods: {
btn2Click(event) {
console.log('..........', event); //MouseEvent {...}
},
btn3Click(a,event) {
console.log('..........', a, event); //123,MouseEvent {...}
},
btn3Click(a) {
console.log('..........', a); //123
}
}
})
</script>
v-on修饰符
- Vue为我们提供了修饰符,这些修饰符可以帮助我们更方便的处理一些事件
①.stop
- 阻止冒泡
- 事件默认会由内向外依次触发。绑定.stop修饰符前,点击按钮后控制台会依次输出btnClick、keyUp、divClick,绑定.stop修饰符后,会阻止冒泡,因此控制台只会输出btnClick
<div id="app" @click="divClick" :style="{height:'400px', '400px', border:'1px solid green'}">
<!-- 当点击按钮时,不会触发div的事件 -->
<div @click="keyup" :style="{height:'200px', '200px', border:'1px solid red'}">
<button @click.stop="btnClick">按钮</button>
</div>
</div>
<script type="text/javascript">
const app = new Vue({
methods: {
divClick(){
console.log('divClick');
},
btnClick(){
console.log('btnClick');
},
submitClick(){
console.log('submitClick');
},
keyup(){
console.log('keyUp');
}
}
})
</script>
②.prevent
- 阻止浏览器默认行为
- 当点击提交按钮时,浏览器会默认将数据提交到服务器,绑定修饰符prevent后可以阻止这个默认行为,数据便能正常输出到控制台
<div>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick"/>
</form>
</div>
③.{keyCode | keyAlias}
<!-- 当按下回车键才会触发keyUp事件 -->
<input type="text" @keyup.enter="keyUp"/>
<input type="text" @keyup.13="keyUp"/>
④ .once
<!-- btn2Click事件只会触发一次 -->
<button @click.once="btn2Click">按钮2</button>
⑤.native
-
监听组件根元素的原生事件,可以使组件同样可以监听事件
<!-- 点击组件back-top时也会触发backClick事件 -->
<back-top @click.native="backClick"></back-top>