事件 事件参数的获取 事件冒泡和捕获
事件修饰符
.stop
.prevent
.capture
.self
.once
.position
Vue绑定事件，获取事件源对象
- 绑定事件：v-on
- 获取事件源对象: 设置参数$event(这是个约定的写法，参数名不可改)
- 如果不写参数，则事件源对象默认通过回调函数event参数获取
<div id="app">
<button v-on:click="decrement(1)">-</button>
<h1>{{count}}</h1>
<button @click="increment(1,$event)">+</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
count:0
},
methods:{
increment(num,e){
this.count += num;
console.log(e.target);
},
decrement(num){
this.count -= num;
},
}
});
</script>
阻止事件冒泡
设置：@event.stop(handleFn)
<div id="app">
<div class="A" @click="clickA">
A
<div class="B" @click="clickB">
B
<div class="C" @click.stop="clickC">
C
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
clickA() {
console.log("A");
},
clickB() {
console.log("B");
},
clickC() {
console.log("C");
}
}
});
</script>
阻止事件默认行为
@click.prevent
<a @click.prevent href="https://www.baidu.com">百度</a>
事件的捕获
@click.capture 设置事件在捕获期触发
<div class="A" @click.capture="clickA">
A
<div class="B" @click.capture="clickB">
B
<div class="C" @click.capture="clickC">
C
</div>
</div>
</div>
只在当前元素触发事件
@click.self
<div class="A" @click.self="clickA">
A
<div class="B" @click.self="clickB">
B
<div class="C" @click.self="clickC">
C
</div>
</div>
</div>
按键修饰符 系统修饰键
@keyup.13 监听回车键
@keyup.left 监听左键
<body>
<div id="app">
<input type="text" @keyup.13="handleKeyUp">
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
handleKeyUp(event){
console.log("keyup....",event);
}
}
});
</script>
</body>