Method

Posted 2021-02-04 yc-1314

　　Vue.js的事件监听一般都通过v-on指令配置在html中，虽然也可以在javascript代码中使用原生的addEventListener方法添加事件监听，但Vue.js本身并不提倡如此。看上去这种方式不符合传统的“关注点分离”的理念，但其实所有的Vue.js事件处理方法和表达式都严格绑定在当前的视图的ViewModel上。实际上，采用它提供的v-on指令有如下几点好处：

• 通过查看HTML模板便能轻松定位JavaScript代码中对应的方法。
• 无须在JavaScript中手动绑定事件，ViewModel和DOM完全解耦，更易于测试。
• 当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。

一、如何绑定事件

　　在原生DOM事件中，我们可以通过JavaScript给HTML文档元素注册不同的事件处理程序。代码示例如下：

<button onclick="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）