在 Vue.js 中，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。例如：
<div id="app">
<button type="button" v-on:click="myClick">Click Me</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {},
methods: {
myClick: function(){
alert("Hello Vue.js");
}
}
});
</script>上面代码，按钮通过 v-on:click 将 myClick 方法绑定到点击事件上，当我们点击按钮时，将执行 myClick 方法。运行效果如下图：
然而，许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。例如：
<div id="app">
<!-- myClick 表示一个方法名，见 methods 中的 myClick -->
<button type="button" v-on:click="myClick">Click Me</button>
<p>count = {{ count }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
count: 1
},
methods: {
// 一个方法
myClick: function(event){
// this 指向当前 Vue 实例
this.count = this.count + 1;
// event 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
});
</script>除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，例如：
<div id="app">
<!-- myClick 表示一个方法名，见 methods 中的 myClick -->
<button type="button" v-on:click="myClick('count = ', 2)">Click Me</button>
<p>{{ message }} {{ count }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: '',
count: 0
},
methods: {
// 一个方法
myClick: function(msg, step, event){
// this 指向当前 Vue 实例
this.message = msg;
this.count = this.count + step;
// event 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
});
</script>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法，例如：
<div id="app">
<!-- myClick 表示一个方法名，见 methods 中的 myClick -->
<!-- 通过 $even 将原始事件 event 传递给方法 myClick -->
<button type="button" v-on:click="myClick('count = ', 2, $event)">Click Me</button>
<p>{{ message }} {{ count }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: '',
count: 0
},
methods: {
// 一个方法
myClick: function(msg, step, event){
// this 指向当前 Vue 实例
this.message = msg;
this.count = this.count + step;
// event 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
});
</script>关于事件处理的更多示例，如下：
<!-- 方法处理器 -->
<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>
川公网安备51010802032098