Vue.js的事件监听一般都通过v-on指令配置在HTML中,虽然也可以在JavaScript代码中使用原生的addEventListener方法添加事件监听,但Vue.js本身并不提倡如此。看上去这种方式不符合传统的“关注点分离”的理念,但其实所有的Vue.js事件处理方法和表达式都严格绑定在当前的视图的ViewModel上。实际上,采用它提供的v-on指令有如下几点好处:
- 通过查看HTML模板便能轻松定位JavaScript代码中对应的方法。
- 无须在JavaScript中手动绑定事件,ViewModel和DOM完全解耦,更易于测试。
- 当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。
一、如何绑定事件
在原生DOM事件中,我们可以通过JavaScript给HTML文档元素注册不同的事件处理程序。代码示例如下:
<button οnclick="learnVue()">DDFE</button>
AngularJS也采取了类似的方式,只不过换成了ng-前缀的事件指令:
<button ng-click="learcBue()">DDFE</button>
类似的,Vue.js也采取了这样的方式来绑定事件,下面进行详细介绍。
1.内联方式
Vue.js在Html文档元素中采用v-on指令来监听DOM事件,代码示例如下:
<div id="example"> <button v-on:click="greet">Greet</button> </div>
这里将一个单击事件处理器click绑定到greet方法,该方法在Vue实例中进行定义。
在这种内联方式下一个事件处理器只能绑定一个方法,如需绑定多个方法,仍需在JavaScript代码中使用addEventListener方法来绑定。
同样的,类似于原生JavaScript以及AngularJS,除了直接绑定一个方法外,也可以直接使用内联的JavaScript语句。代码示例如下:
<div id="example-2"> <button v-on:click="say('h1')">Say Hi</button> <button v-on:click="count=count+1">Say What</button> </div>
与内联表达式相仿,事件处理器限制为一个JavaScript语句。
2.methods配置
在上一节中,当用户将click事件与某个方法绑定时,需要在Vue实例当中进行定义,所有定义的方法都放在methods属性下。针对上一节的greet方法定义代码示例如下:
var vm = new Vue({ el:'#example', //在methods对象中定义方法 methods:{ greet:function(event){ //方法内this指向vm alert(‘Welcome to Vue.js’) //event是原生DOM事件 alert(event.target.tagName) } } })
//也可以在JavaScript代码中调用方法
vm.greet()
需要注意的地方如下:
- methods中定义的方法内的this始终指向创建的Vue示例。
- 与事件绑定的方法支持参数event即原生DOM事件的传入
- 方法用在普通元素上时,只能监听原生DOM事件:用在自定义元素组件上时,也可以监听子组件触发的自定义事件
3.$events应用
在上一节中,在Vue实例中创建的方法需要访问原生DOM事件时可以直接传入event来获取。如果在内联语句处理器中需要访问原生DOM事件时,则可以用一个特殊变量$event将其传入方法中。代码示例如下:
<button v-on:click="say('hello',$event)">Submit</button> methods:{ say:function(){ //现在我们可以访问原生事件对象 event.preventDefault() } }
二、如何使用修饰符
修饰符是以半角句号(.)开始的特殊后缀,用于表示指令应当以特殊方式绑定。在事件处理器上,Vue.js为v-on提供了4个事件修饰符,即.prevent、.stop、.capture与.self,以使JavaScript代码负责处理纯粹的数据逻辑,而不用处理这些DOM事件的细节。Vue.js还为v-on添加了按键修饰符,用于监听键盘事件。
在使用方式上,事件修饰符可以串联,代码示例如下:
<a v-on:click.stop.prevent="doThat">
也可以只有修饰符而不绑定事件,代码示例如下:
<form v-on:submit.prevent></form>
1.prevent
在事件处理器中经常需要调用event.preventDefault()来阻止事件的默认行为,Vue.js提供了.prevent事件修饰符以使之在HTML中便能完成操作。代码示例如下:
//提交事件不再重载页面 <form v-on:submit.prevent="onSubmit"></form>
2.stop
除了event.preventDefault(),用于阻止事件冒泡的event.stopPropagation()也经常被调用,Vue.js也提供了相应的.stop事件修饰符。代码示例如下:
//阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>
3.capture
.capture事件修饰符表示添加事件侦听器时采用capture即捕获模式。代码示例如下:
<div v-on:click.capture="doThis">..</div>
4.self
.self事件修饰符同样是Vue.js表示只当事件在该元素本身(而不是子元素)触发时触发回调。代码示例如下:
<div v-on:click.self="doThat">..</div>
5.按键
监听键盘事件经常需要检测keyCode。Vue.js可以为v-on添加键盘修饰符,代码示例如下:
//只有在keyCode是13时调用vm.submit() <input v-on:keyup.13="submit">
鉴于记住所有的keyCode比较困难,Vue.js为常用的按键提供了别名。代码示例如下:
完整的按键别名如下:
- enter(keycode:13)
- tab(keycode:9)
- delete(keycode:8,46)
- esc(keycode:27)
- space(keycode:32)
- up(keycode:38)
- down(keycode:40)
- left(keycode:37)
- right(keycode:39)