04_事件处理
事件监听
v-on指令可以监听DOM事件，并在触发时执行JavaScript代码
<body>
<div id="app">
<h1>count: {{ count }}</h1>
<button v-on:click="count++">count++</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
count: 0,
};
},
});
</script>
</body>
v-on简写
<button @:click="count++">count++</button>
事件处理方法
事件处理方法定义在methods里面，当事件被触发执行相应函数
<body>
<div id="app">
<h1>count: {{ count }}</h1>
<button v-on:click="click1">click1</button>
<button v-on:click="click2(100, $event)">click2</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
count: 0,
};
},
methods: {
click1: function () {
alert('click1');
console.log(event); // PointerEvent {…}
},
// 备注：目前即使传了参数，不使用$event站位也能接受event
click2: function (num, event) {
alert('click2 --- ' + num);
console.log(event); // PointerEvent {…}
},
},
});
</script>
</body>
注意：
-
methods中配置的函数不能是箭头函数，因为箭头函数this指向window
-
methods中配置的函数都被vue所管理，this指向vm或组件实例对象
事件修饰符
v-on提供了六种事件修饰符
-
.prevent阻止默认事件（常用） -
.stop阻止事件冒泡（常用） -
.once事件只触发一次（常用） -
.capture使用事件的捕获 -
.self只有event.target是当前操作的元素时才触发事件 -
.passive事件的默认行为立即执行，无需等待事件回调执行完毕
<body>
<div id="app">
<a href="https://blog.byboy.cn" @click.prevent="click">点击跳转</a>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
count: 0,
};
},
methods: {
click() {
console.log('使用了.prevent修饰符，不会跳转了');
},
},
});
</script>
</body>
阅读剩余
THE END
