1. 事件监听
在前端开发中,我们经常需要监听浏览器的时间,例如点击、拖拽、键盘等操作。那么在vue中是如何监听事件的呢?那就是使用v-on指令
1.1 介绍
- 作用:绑定事件监听器
- 缩写:@
- 预期:Function | Inline Statement | Object
- 参数:event
1.2 简单使用
- 我们可以在事件中写表达式
- 也可以将事件指向一个在methods中定义的函数
<div id="app">
<h2>点击次数:{{count}}</h2>
<button @click="count++">点击+1</button>
<button @click="increment">点击+1</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
increment(){
this.count++;
}
}
})
</script>
1.3 参数问题
当通过methods中定义方法,以供@click调用时,需要注意参数问题:
- 如果该方法不需要额外参数,那么在调用该方法时可以不加()
- 如果方法本身有一个参数,那么会默认将原生事件event参数传递进去
- 如果需要传入某个参数时,同时还需要event,可以通过**$event**传入事件
<div id="app">
<h2>点击次数:{{count}}</h2>
<button @click="incrementone">点击+1</button>
<button @click="incrementcount(10,$event)">点击+10</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
incrementone(event) {
console.log(event);
this.count++;
},
incrementcount(count, event) {
console.log(event);
this.count += count;
}
}
})
1.4 修饰符
在某些情况下,我们拿到事件的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件:
- .stop:阻止事件冒泡
- .self:当事件在该元素本身触发时才触发事件
- .capture:添加事件监听器,使用事件捕获模式
- .prevent:阻止默认事件
- .once:事件只触发一次
1.4.1 事件冒泡定义
要想搞明白上面这些修饰符功能,首先我们先了解一下什么是事件冒泡:
<div id="app">
<h2>点击次数:{{count}}</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click="innerClick">
<button @click="btnClick">点击</button>
</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
outerClick() {
console.log('触发了outer点击事件');
},
innerClick() {
console.log('触发了inner点击事件');
},
btnClick() {
console.log('触发了btn点击事件');
}
}
})
</script>
-
当点击btn按钮时,会从里到外依次触发按钮点击事件、inner点击事件、outer点击事件
-
当点击inner div时,会从里到外依次触发inner点击事件、outer点击事件
-
当点击outer div时,只触发outer点击事件
-
这就是事件冒泡
1.4.2 阻止事件冒泡(.stop)
<div id="app">
<p>.stop可以实现点击按钮的时候,只触发按钮点击事件,阻止了事件冒泡</p>
<div class="outer" @click="outerClick">
<div class="inner" @click="innerClick">
<button @click.stop="btnClick">点击</button>
</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
outerClick() {
console.log('触发了outer点击事件');
},
innerClick() {
console.log('触发了inner点击事件');
},
btnClick() {
console.log('触发了btn点击事件');
}
}
})
</script>
如图所示:
当只点击btn按钮时,只触发了按钮的时间,没有触发div的事件,这就是阻止事件冒泡
1.4.3 当事件在该元素本身触发时才触发事件(.self)
<h2>.self当事件在该元素本身触发时触发回调(比如 不是子元素)</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click.self="innerClick">
<button @click="btnClick">点击</button>
</div>
<p>.self只能阻止自己身上冒泡行为,并不会真正的阻止冒泡行为</p>
<p>只给inner div 加.self,当点击按钮时,会从里到外依次触发按钮点击事件、outer点击事件</p>
<p>而不会触发inner点击事件,跳过了inner div冒泡</p>
<p>当点击inner div时,依然会从里到外依次触发inner点击事件、outer点击事件</p>
</div>
1.4.4 阻止事件默认行为(.prevent)
<div id="app">
<a href="http://www.baidu.com" @click.prevent="preventClick">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
preventClick() {
console.log("阻止了a标签的默认点击跳转事件")
}
}
})
</script>
点击只会触发preventClick事件,不会跳转页面,阻止了a标签的默认跳转 。
1.4.5 只触发一次事件(.once)
<div id="app">
<button @click.once="onceClick">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
onceClick() {
console.log('只触发了一次事件');
}
}
})
</script>
顾名思义,该点击事件就算多次点击,也只会触发一次。
1.4.6 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
按键别名:
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
注意:在Windows系统键盘上meta对应windows徽标键(⊞)。
<div id="app">
// Enter键触发submit事件 下面三种写法都对
<input type="text" v-on:keyup.enter="submit" />
<input type="text" @keyup.enter="submit" />
<input type="text" @keyup.13="submit" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
submit() {
console.log("enter键触发事件");
}
}
});
</script>
1.4.7 串联修饰符
<div id="app">
<div class="outer" @click="outerClick">
<div class="inner" @click="innerClick">
<a href="http://www.baidu.com" @click.stop.prevent="btnClick">百度一下</a>
</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
outerClick() {
console.log('触发了outer点击事件');
},
innerClick() {
console.log('触发了inner点击事件');
},
btnClick() {
console.log('触发了btn点击事件');
}
}
})
</script>
@click.stop.prevent:既阻止了事件的默认行为,又阻止了事件冒泡。