1.事件
<input v-model="verifyCode"
@focus="verifyMyCode"
@blur="clickAffirm" type='number' placeholder="驗(yàn)證碼" class="reg-input"
v-on:keyup.13="clickAffirm"/>
@click 點(diǎn)擊事件
@focus input獲取焦點(diǎn)
@blur input失去焦點(diǎn)
@input input事件適用于實(shí)時(shí)查詢(xún),每輸入一個(gè)字符都會(huì)觸發(fā)該事件集绰,而@keyup.enter事件則是在pc上需要點(diǎn)擊回車(chē)鍵觸發(fā),而在手機(jī)上則是需要點(diǎn)擊輸入鍵盤(pán)上的確定鍵才可觸發(fā)知押。
@change
該事件和enter事件相似,在手機(jī)上都是要經(jīng)過(guò)觸發(fā)虛擬鍵盤(pán)的搜索鍵才會(huì)觸發(fā)事件鹃骂。使用方式同input事件台盯。
注:在ios手機(jī)上會(huì)出現(xiàn)問(wèn)題:
如果要的效果是輸入值不用虛擬鍵盤(pán)觸發(fā)方法就調(diào)查詢(xún)接口進(jìn)行查詢(xún),這時(shí)在安卓手機(jī)上沒(méi)有問(wèn)題畏线,但是在ios手機(jī)上會(huì)出現(xiàn)多次觸發(fā)的情況静盅。
簡(jiǎn)單的解決辦法:
對(duì)input的值進(jìn)行監(jiān)聽(tīng)(watch),把原本需要綁在input框的事件在監(jiān)聽(tīng)變化時(shí)調(diào)用寝殴。
鍵盤(pán)事件
v-on:keyup.13 點(diǎn)擊確認(rèn)/enter鍵
<input type="text" @keyup.13="show()">
<input type="text" @keyup.enter="show2()">
<input type="text" @keyup.up="show3()">
<input type="text" @keyup.down="show4()">
<input type="text" @keyup.left="show5()">
<input type="text" @keyup.right="show6()">
2.事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求蒿叠。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn),但更好的方式是:方法只有純粹的數(shù)據(jù)邏輯蚣常,而不是去處理 DOM 事件細(xì)節(jié)市咽。
為了解決這個(gè)問(wèn)題,Vue.js 為 v-on 提供了事件修飾符抵蚊。之前提過(guò)施绎,修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的溯革。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理,然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時(shí)谷醉,順序很重要致稀;相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此孤紧,用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊豺裆,而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊拒秘。