版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1、主要作用
主要作用： 给DOM元素绑定事件。（v-on:事件名称 = “事件执行和函数引用”）
2、简写方法
简写方法： 事件绑定简写：@事件名称 = “事件执行和函数引用”。
3、常用事件修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
4、使用实例
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
对象语法 (2.4.0+)
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
5、演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_v-on事件绑定</title>
</head>
<body>
<div class="app">
<input type="button" value="按钮" v-on:click="func" /><br />
<span>{{text}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
// 1、使用实例：
// <!-- 方法处理器 -->
// <button v-on:click="doThis"></button>
// <!-- 动态事件 (2.6.0+) -->
// <button v-on:[event]="doThis"></button>
// <!-- 内联语句 -->
// <button v-on:click="doThat('hello', $event)"></button>
// <!-- 缩写 -->
// <button @click="doThis"></button>
// <!-- 动态事件缩写 (2.6.0+) -->
// <button @[event]="doThis"></button>
// <!-- 停止冒泡 -->
// <button @click.stop="doThis"></button>
// <!-- 阻止默认行为 -->
// <button @click.prevent="doThis"></button>
// <!-- 阻止默认行为，没有表达式 -->
// <form @submit.prevent></form>
// <!-- 串联修饰符 -->
// <button @click.stop.prevent="doThis"></button>
// <!-- 键修饰符，键别名 -->
// <input @keyup.enter="onEnter">
// <!-- 键修饰符，键代码 -->
// <input @keyup.13="onEnter">
// <!-- 点击回调只会触发一次 -->
// <button v-on:click.once="doThis"></button>
// 对象语法 (2.4.0+)
// <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
var app = new Vue({
el: '.app',
data: {
text: '123456',
},
methods: {
func(){
this.text = 'hahahahahahaha';
},
}
});
</script>
</html>