53.vue 事件 和事件修飾符

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)擊拒秘。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末号显,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子躺酒,更是在濱河造成了極大的恐慌押蚤,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件羹应,死亡現(xiàn)場(chǎng)離奇詭異揽碘,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)园匹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)雳刺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人裸违,你說(shuō)我怎么就攤上這事掖桦。” “怎么了供汛?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵枪汪,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我怔昨,道長(zhǎng)雀久,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任趁舀,我火速辦了婚禮赖捌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘矮烹。我一直安慰自己越庇,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布擂送。 她就那樣靜靜地躺著悦荒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪嘹吨。 梳的紋絲不亂的頭發(fā)上搬味,一...
    開(kāi)封第一講書(shū)人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼碰纬。 笑死萍聊,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的悦析。 我是一名探鬼主播寿桨,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼强戴!你這毒婦竟也來(lái)了亭螟?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤骑歹,失蹤者是張志新(化名)和其女友劉穎预烙,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體道媚,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡扁掸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了最域。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谴分。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖镀脂,靈堂內(nèi)的尸體忽然破棺而出牺蹄,到底是詐尸還是另有隱情,我是刑警寧澤狗热,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布钞馁,位于F島的核電站,受9級(jí)特大地震影響匿刮,放射性物質(zhì)發(fā)生泄漏僧凰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一熟丸、第九天 我趴在偏房一處隱蔽的房頂上張望训措。 院中可真熱鬧,春花似錦光羞、人聲如沸绩鸣。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)呀闻。三九已至,卻和暖如春潜慎,著一層夾襖步出監(jiān)牢的瞬間捡多,已是汗流浹背蓖康。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留垒手,地道東北人蒜焊。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像科贬,于是被迫代替她去往敵國(guó)和親泳梆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 為了方便大家寫(xiě)代碼榜掌,vue.js給大家提供了很多方便的修飾符优妙,比如我們經(jīng)常用到的取消冒泡,阻止默認(rèn)事件等等~ 目錄...
    強(qiáng)哥科技興閱讀 738評(píng)論 0 1
  • 目錄 表單修飾符 事件修飾符 鼠標(biāo)按鍵修飾符 鍵值修飾符 v-bind修飾符(實(shí)在不知道叫啥名字) 一唐责、表單修飾符...
    alanwhy閱讀 940評(píng)論 0 2
  • ??JavaScript 與 HTML 之間的交互是通過(guò)事件實(shí)現(xiàn)的鼠哥。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,477評(píng)論 1 11
  • vue概述 在官方文檔中看政,有一句話(huà)對(duì)Vue的定位說(shuō)的很明確:Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明...
    li4065閱讀 7,193評(píng)論 0 25
  • 主要還是自己看的朴恳,所有內(nèi)容來(lái)自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/允蚣,類(lèi)似于 vie...
    Leonzai閱讀 3,334評(píng)論 0 25