欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js事件處理器是什么

 更新時(shí)間:2017年03月20日 15:56:35   作者:xiaofenguo  
什么是vue.js事件處理器?這篇文章主要介紹了vue.js事件處理器的相關(guān)資料

監(jiān)聽事件

可以用v-on指令監(jiān)聽DOM事件來觸發(fā)一些javascript代碼。

demo:

<div v-on:click="++counter">點(diǎn)擊,增加1</div>
<span>{{counter}}</span>

 data:{

  counter:0

}

方法事件處理器

許多事件處理器的邏輯都很復(fù)雜,所以直接把javaScript代碼寫在v-on指令中是不可行的。因此v-on可以接收一個(gè)定義的方法來調(diào)用

<div v-on:click="counter()">點(diǎn)擊,增加1</div>
<span>{{counter}}</span>

data:{

  counter:0

},

method:{

  counter:function(){

  this.counter++;

  }

}

有時(shí)也需要在內(nèi)聯(lián)語句處理器中訪問原生DOM事件,可以用特殊變量$event把它傳入方法:

$event 原生事件對(duì)象

事件修飾符
在事件處理程序中調(diào)用event.preventDefault()或event.stopPropagagation()是非常常見的需求。盡管我們可以在methods中輕松實(shí)現(xiàn)這點(diǎn),但更好的

方式是:methods只是純粹的數(shù)據(jù)邏輯,而不是去處理DOM事件的細(xì)節(jié)。

為了解決這個(gè)問題,Vue.js為v-on提供了事件修飾符,通過由(.)表示的指令后綴來調(diào)用修飾符。

.stop

.prevent

.capture

.self

.once 

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身(而不是子元素)觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>

新增

<!--點(diǎn)擊事件將只會(huì)觸發(fā)一次-->
<a v-on:click.once="dothis"></a>

不像其他只能對(duì)原生的DOM事件起作用的修飾符,.once修飾符還能被用到自定義的組件事件上

按鍵修飾符
在監(jiān)聽鍵盤事件時(shí),我們經(jīng)常需要監(jiān)聽常見的鍵值?! ue允許為v-on在監(jiān)聽事件時(shí)添加按鍵修飾符:

<!--只有在keyCode是13時(shí)調(diào)用vm.submit()-->
<input v-on:keyup.13="submit">

常見的按鍵還有別名:

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

全部的按鍵別名:

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

可以通過全局config.keyCodes對(duì)象 自定義案件修飾符別名

//可以使用v-on:keyup.f1
Vue.config.keyCodes.f1=112

按鍵修飾符  新增

可以用如下修飾符開啟鼠標(biāo)或鍵盤事件監(jiān)聽,使在按鍵按下時(shí)發(fā)生反應(yīng)。

.ctrl

.alt

.shift

.meta 

注意:在不同系統(tǒng)的鍵盤上,meta對(duì)應(yīng)的鍵不一樣

為什么在HTML中監(jiān)聽事件
你可能注意到這種事件監(jiān)聽的方式違背了關(guān)注點(diǎn)分離的傳統(tǒng)理念。不必?fù)?dān)心,因?yàn)樗械腣ue.js事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的ViewModel上,它不會(huì)導(dǎo)致任何維護(hù)上的困難。實(shí)際上,使用v-on有幾個(gè)好處:

1 掃一眼HTML模板便能輕松定位在JavaScript代碼里對(duì)應(yīng)的方法

2 因?yàn)槟銦o須在JavaScript里手動(dòng)綁定事件,你的viewModel代碼可以是非常純粹的邏輯,和DOM完全解耦,更易于測(cè)試。

3 當(dāng)一個(gè)ViewModel被銷毀時(shí),所有的事件處理器都會(huì)自動(dòng)被刪除,你無須擔(dān)心如何自己清理它們。

 以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論