vue常用修飾符

1.事件修飾符

vue為v-on提供了事件修飾符某残,通過點(.)表示的指令后綴來調(diào)用修飾符。

.stop

阻止點擊事件冒泡侣集。等同于JavaScript中的event.stopPropagation()

.prevent

防止執(zhí)行預(yù)設(shè)的行為(如果事件可取消谣殊,則取消該事件澄惊,而不停止事件的進(jìn)一步傳播)箩言,等同于JavaScript中的event.preventDefault()硬贯,prevent等同于JavaScript的event.preventDefault(),用于取消默認(rèn)事件陨收。

.capture

與事件冒泡的方向相反饭豹,事件捕獲由外到內(nèi),捕獲事件:嵌套兩三層父子關(guān)系鸵赖,然后所有都有點擊事件,點擊子節(jié)點拄衰,就會觸發(fā)從外至內(nèi) 父節(jié)點-》子節(jié)點的點擊事件

.self

只會觸發(fā)自己范圍內(nèi)的事件它褪,不包含子元素

.once

只執(zhí)行一次,如果我們在@click事件上添加.once修飾符翘悉,只要點擊按鈕只會執(zhí)行一次茫打。

.passive

Vue 還對應(yīng) addEventListener 中的 passive 選項提供了 .passive 修飾符

?.passive 修飾符尤其能夠提升移動端的性能。不要把 .passive 和 .prevent 一起使用妖混,因為 .prevent 將會被忽略老赤,同時瀏覽器可能會向你展示一個警告。請記住源葫,.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。

事件修飾符還可以串聯(lián)

:使用修飾符時砖瞧,順序很重要息堂;相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此块促,用 v-on:click.prevent.self 會阻止所有的點擊荣堰,而 v-on:click.self.prevent 只會阻止對元素自身的點擊。


2.鍵盤修飾符

在JavaScript事件中除了前面所說的事件竭翠,還有鍵盤事件振坚,也經(jīng)常需要監(jiān)測常見的鍵值。在Vue中允許v-on在監(jiān)聽鍵盤事件時添加關(guān)鍵修飾符斋扰。記住所有的keyCode比較困難渡八,所以Vue為最常用的鍵盤事件提供了別名:

.enter:回車鍵

.tab:制表鍵

.delete:含delete和backspace鍵

.esc:返回鍵

.space: 空格鍵

.up:向上鍵

.down:向下鍵

.left:向左鍵

.right:向右鍵


3.系統(tǒng)修飾鍵

可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

.ctrl

.alt

.shift

.meta

注意:在 Mac 系統(tǒng)鍵盤上传货,meta 對應(yīng) command 鍵 (?)屎鳍。在 Windows 系統(tǒng)鍵盤 meta 對應(yīng) Windows 徽標(biāo)鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上问裕,meta 對應(yīng)實心寶石鍵 (◆)逮壁。在其他特定鍵盤上,尤其在 MIT 和 Lisp 機器的鍵盤粮宛、以及其后繼產(chǎn)品窥淆,比如 Knight 鍵盤、space-cadet 鍵盤巍杈,meta 被標(biāo)記為“META”忧饭。在 Symbolics 鍵盤上,meta 被標(biāo)記為“META”或者“Meta”筷畦。

.exact修飾符

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

鼠標(biāo)按鈕修飾符

鼠標(biāo)修飾符用來限制處理程序監(jiān)聽特定的滑鼠按鍵。常見的有:

.left

.right

.middle

這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。

自定義按鍵修飾符別名

在Vue中可以通過config.keyCodes自定義按鍵修飾符別名亚斋。

4.修飾符

(1).lazy

在改變后才觸發(fā)(也就是說只有光標(biāo)離開input輸入框的時候值才會改變)

(2).number

將輸出字符串轉(zhuǎn)為Number類型·(雖然type類型定義了是number類型作媚,但是如果輸入字符串,輸出的是string)

(3).trim

自動過濾用戶輸入的首尾空格

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末帅刊,一起剝皮案震驚了整個濱河市纸泡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌赖瞒,老刑警劉巖女揭,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異栏饮,居然都是意外死亡吧兔,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門袍嬉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來境蔼,“玉大人,你說我怎么就攤上這事伺通」客粒” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵罐监,是天一觀的道長吴藻。 經(jīng)常有香客問我,道長弓柱,這世上最難降的妖魔是什么沟堡? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮矢空,結(jié)果婚禮上弦叶,老公的妹妹穿的比我還像新娘。我一直安慰自己妇多,他們只是感情好伤哺,可當(dāng)我...
    茶點故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著者祖,像睡著了一般立莉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上七问,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天蜓耻,我揣著相機與錄音,去河邊找鬼械巡。 笑死刹淌,一個胖子當(dāng)著我的面吹牛饶氏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播有勾,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼疹启,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蔼卡?” 一聲冷哼從身側(cè)響起喊崖,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎雇逞,沒想到半個月后荤懂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡塘砸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年节仿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掉蔬。...
    茶點故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡廊宪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出眉踱,到底是詐尸還是另有隱情挤忙,我是刑警寧澤霜威,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布谈喳,位于F島的核電站,受9級特大地震影響戈泼,放射性物質(zhì)發(fā)生泄漏婿禽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一大猛、第九天 我趴在偏房一處隱蔽的房頂上張望扭倾。 院中可真熱鬧,春花似錦挽绩、人聲如沸膛壹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽模聋。三九已至,卻和暖如春唠亚,著一層夾襖步出監(jiān)牢的瞬間链方,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工灶搜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留祟蚀,地道東北人工窍。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像前酿,于是被迫代替她去往敵國和親患雏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,055評論 2 355

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

  • 主要還是自己看的薪者,所有內(nèi)容來自官方文檔纵苛。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,353評論 0 25
  • 一. Vue 實例 以后你可以在 API 參考中查閱到完整的實例屬性和方法的列表言津。 實例生命周期鉤子 比如 cre...
    兔子___閱讀 340評論 0 0
  • 為了方便大家寫代碼攻人,vue.js給大家提供了很多方便的修飾符,比如我們經(jīng)常用到的取消冒泡悬槽,阻止默認(rèn)事件等等~ 目錄...
    強哥科技興閱讀 745評論 0 1
  • 目錄 表單修飾符 事件修飾符 鼠標(biāo)按鍵修飾符 鍵值修飾符 v-bind修飾符(實在不知道叫啥名字) 一怀吻、表單修飾符...
    alanwhy閱讀 950評論 0 2
  • 兩姓聯(lián)姻,一堂締約初婆,良緣永結(jié)蓬坡,匹配同稱“跖眩看此日桃花灼灼屑咳,宜室宜家,卜他年瓜瓞綿綿弊琴,爾昌爾熾兆龙。謹(jǐn)以白頭之約,書向鴻箋...
    Juvenile_Li閱讀 1,006評論 0 1