Vue.js前端框架之事件处理小结

1. v-on 事件监听

监听DOM事件使用 v-on 指令。该指令通常在模板中直接使用，在触发事件时会执行一些 JavaScript 代码。

v-on 指令的基本用法

（1）在 HTML 中使用 v-on 指令，后面可以是所有的原生事件名称。基本用法如下：

<button v-on:click="show">显示</button>

将 click 单击事件绑定到 show 方法中，单击“显示”按钮时，执行 show() 方法，show() 方法在 Vue实例中定义。

（2）在使用 v-on 指令的过程中，Vue.js 提供了 v-on 指令的简写形式 “@” ，上述代码可改写为如下：

<button @click="show">显示</button>

（3）v-on 指令的简单用法如下：

<div id="box">
<button v-on:click="count1++">计数</button>
<p>按钮被点击{{count1}}次</p>
<button @click="count2++">计数</button>
<p>按钮被点击{{count2}}次</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data:{
count1:0,
count2:0
}
});
</script>

v-on 指令的简单用法如下图所示：

Vue.js前端框架之事件处理小结

事件处理方法

在使用 v-on 指令过程中，通过 v-on 指令需要将事件和某个方法进行绑定，而绑定的方法作为事件处理器定义在 methods 选项中。示例代码参考如下：

<div id="box">
<button v-on:click="show">显示</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data:{
name:'晓茗',
age: 29,
occupation:'演员'
},
methods:{
show:function(){
alert('姓名：'+this.name+'年龄：'+this.age+'职业：'+this.occupation);
}
}
});
</script>

v-on 指令将点击事件与显示方法绑定的结果图片如下：

Vue.js前端框架之事件处理小结

使用内联 JavaScript 语句

（1）使用 v-on 指令除了直接绑定到一个方法之外，v-on 指令也支持内联 JavaScript 语句，但前提是只可以使用一个语句。示例代码参考如下：

<div id="box">
<button v-on:click="show('明日之星')">显示</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
methods:{
show:function(message){
alert('消息：'+message);
}
}
});

使用内联 JavaScript 语句的运行结果如下图所示：

Vue.js前端框架之事件处理小结

（2）在内联语句中需要获取原生的 DOM 事件对象时，可以将一个特殊变量 $event 传入方法中。示例代码如下：

<div id="box">
<a href="http://www.baidu.com" rel="external nofollow" v-on:click="show('明日之星',$event)">{{message}}</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data:{
message:'你好'
},
methods:{
show:function(message1,e){
e.preventDefault();
alert(message1);
}
}
});
</script>

除了向 show() 方法传递一个值外，还传递了一个特殊变量 $event，该变量的作用是当点击超链接时，对原生 DOM 事件进行处理，应用 preventDefault() 方法阻止该超链接的跳转行为。当单击 “你好” 超链接时，会弹出对话框，运行结果如下图所示：

Vue.js前端框架之事件处理小结

2. 事件处理修饰符

所谓修饰符，就是以半角句点符号指明的特殊后缀。Vue.js 为 v-on 指令提供了多个修饰符，包括事件修饰符和按键修饰符。
事件修饰符
在事件处理程序中经常会调用 preventDefault() 或 stopPropagation() 方法来实现特定的功能。为处理这些 DOM 事件细节，Vue.js 为 v-on 指令提供了事件修饰符。常用的事件修饰符及其说明如下表所示：

Vue.js前端框架之事件处理小结