vue修飾符

1腔呜、表單修飾符(重點(diǎn)):

.lazy?- 取代?input?監(jiān)聽(tīng)?change?事件

.number?- 輸入字符串轉(zhuǎn)為有效的數(shù)字

.trim?- 輸入首尾空格過(guò)濾

2猜旬、事件修飾符(重點(diǎn)):

.stop

.prevent

.capture

.self

.once

.passive

使用修飾符時(shí)嗅剖,順序很重要;相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生时肿。因此夭谤,用?

v-on:click.prevent.self?會(huì)阻止所有的點(diǎn)擊,而

?v-on:click.self.prevent?只會(huì)阻止對(duì)元素自身的點(diǎn)擊隔盛。

<!-- 阻止單擊事件繼續(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>

3、.sync?修飾符

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

4吮炕、按鍵修飾符:

.enter

.tab

.delete?(捕獲“刪除”和“退格”鍵)

.esc

.space

.up

.down

.left

.right

<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` -->

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

5腊脱、系統(tǒng)修飾符(win 和 mac系統(tǒng)有區(qū)別)

.ctrl

.alt

.shift

.meta

.exact

注意:在 Mac 系統(tǒng)鍵盤上,meta 對(duì)應(yīng) command 鍵 (?)龙亲。在 Windows 系統(tǒng)鍵盤 meta 對(duì)應(yīng) Windows 徽標(biāo)鍵 (?)陕凹。在 Sun 操作系統(tǒng)鍵盤上悍抑,meta 對(duì)應(yīng)實(shí)心寶石鍵 (◆)。在其他特定鍵盤上杜耙,尤其在 MIT 和 Lisp 機(jī)器的鍵盤搜骡、以及其后繼產(chǎn)品,比如 Knight 鍵盤佑女、space-cadet 鍵盤记靡,meta 被標(biāo)記為“META”。在 Symbolics 鍵盤上团驱,meta 被標(biāo)記為“META”或者“Meta”摸吠。

<!-- Alt + C -->? ? ?

<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->

<div @click.ctrl="doSomething">Do something</div>

.exact修飾符(修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件):

<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->

<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->

<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->

<button @click.exact="onClick">A</button>

6、鼠標(biāo)按鍵修飾符

.left

.right

.middle

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嚎花,一起剝皮案震驚了整個(gè)濱河市寸痢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌紊选,老刑警劉巖轿腺,帶你破解...
    沈念sama閱讀 218,386評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異丛楚,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)憔辫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門趣些,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人贰您,你說(shuō)我怎么就攤上這事坏平。” “怎么了锦亦?”我有些...
    開(kāi)封第一講書人閱讀 164,704評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵舶替,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我杠园,道長(zhǎng)顾瞪,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,702評(píng)論 1 294
  • 正文 為了忘掉前任抛蚁,我火速辦了婚禮陈醒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瞧甩。我一直安慰自己钉跷,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布肚逸。 她就那樣靜靜地躺著爷辙,像睡著了一般彬坏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上膝晾,一...
    開(kāi)封第一講書人閱讀 51,573評(píng)論 1 305
  • 那天栓始,我揣著相機(jī)與錄音,去河邊找鬼玷犹。 笑死混滔,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的歹颓。 我是一名探鬼主播坯屿,決...
    沈念sama閱讀 40,314評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼巍扛!你這毒婦竟也來(lái)了领跛?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,230評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤撤奸,失蹤者是張志新(化名)和其女友劉穎吠昭,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體胧瓜,經(jīng)...
    沈念sama閱讀 45,680評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡矢棚,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了府喳。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蒲肋。...
    茶點(diǎn)故事閱讀 39,991評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖钝满,靈堂內(nèi)的尸體忽然破棺而出兜粘,到底是詐尸還是另有隱情,我是刑警寧澤弯蚜,帶...
    沈念sama閱讀 35,706評(píng)論 5 346
  • 正文 年R本政府宣布孔轴,位于F島的核電站,受9級(jí)特大地震影響碎捺,放射性物質(zhì)發(fā)生泄漏路鹰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評(píng)論 3 330
  • 文/蒙蒙 一收厨、第九天 我趴在偏房一處隱蔽的房頂上張望悍引。 院中可真熱鬧,春花似錦帽氓、人聲如沸趣斤。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,910評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)浓领。三九已至玉凯,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間联贩,已是汗流浹背漫仆。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,038評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留泪幌,地道東北人盲厌。 一個(gè)月前我還...
    沈念sama閱讀 48,158評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像祸泪,于是被迫代替她去往敵國(guó)和親吗浩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評(píng)論 2 355

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

  • 為了方便大家寫代碼没隘,vue.js給大家提供了很多方便的修飾符懂扼,比如我們經(jīng)常用到的取消冒泡,阻止默認(rèn)事件等等~ 目錄...
    強(qiáng)哥科技興閱讀 744評(píng)論 0 1
  • 目錄 表單修飾符 事件修飾符 鼠標(biāo)按鍵修飾符 鍵值修飾符 v-bind修飾符(實(shí)在不知道叫啥名字) 一右蒲、表單修飾符...
    alanwhy閱讀 950評(píng)論 0 2
  • 除了常規(guī)用法阀湿,v-on和v-model指令也支持特殊方式綁定方法,以修飾符的方式實(shí)現(xiàn)瑰妄,通常都是在指令后面用小...
    一只神奇的小綿羊閱讀 736評(píng)論 0 0
  • ??JavaScript 與 HTML 之間的交互是通過(guò)事件實(shí)現(xiàn)的间坐。 ??事件罩旋,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,490評(píng)論 1 11
  • 修飾符(Modifiers)是以半角句號(hào).指明的特殊后綴,用于指出一個(gè)指令應(yīng)該以特殊方式綁定眶诈。 .prevent:...
    池邊紅萼閱讀 796評(píng)論 0 0