vue指令的修飾符指什么

這篇文章主要介紹“vue指令的修飾符指什么”，在日常操作中，相信很多人在vue指令的修飾符指什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue指令的修飾符指什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站是一家專(zhuān)業(yè)提供渭源企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為渭源眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

在vue中，指令的修飾符是以英文句號(hào)“.”指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定；其中“.passive”和“.prevent”不能一起使用，因?yàn)橐黄鹗褂脮r(shí)“.prevent”會(huì)被忽略，同時(shí)瀏覽器會(huì)展示一個(gè)警告。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

什么是vue指令的修飾符

修飾符 (modifier) 是以英文句號(hào) . 指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。

1、v-bind指令修飾符

1）camel

由于綁定特性時(shí)，會(huì)將大寫(xiě)字母轉(zhuǎn)換為小寫(xiě)字母，如

所以，Vue提供了v-bind修飾符 camel，該修飾符允許在使用 DOM 模板時(shí)將 v-bind 屬性名稱(chēng)駝峰化，例如 SVG 的 viewBox 屬性。

2）prop

被用于綁定 DOM 屬性 (property)。

v-bind 默認(rèn)綁定到 DOM 節(jié)點(diǎn)的 attribute 上，使用 .prop 修飾符后，會(huì)綁定到 property。

3）sync

2、v-on指令的修飾符

1）事件修飾符

- .stop 阻止事件冒泡

- .prevent 阻止默認(rèn)事件

- .capture 開(kāi)啟事件捕獲模式

- .self

只當(dāng)事件是從偵聽(tīng)器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)（點(diǎn)擊自己才觸發(fā)，不能冒泡）。

為什么要使用這個(gè)修飾符？

即使在觸發(fā)觸摸事件時(shí)，執(zhí)行了一個(gè)空的函數(shù)，也會(huì)讓頁(yè)面卡頓。因?yàn)闉g覽器不知道監(jiān)聽(tīng)器到底會(huì)不會(huì)阻止默認(rèn)事件，所以瀏覽器要等到執(zhí)行完整個(gè)函數(shù)后，才能決定是否要滾動(dòng)頁(yè)面。passive事件監(jiān)聽(tīng)器，允許開(kāi)發(fā)者告訴瀏覽器，監(jiān)聽(tīng)器不會(huì)阻止默認(rèn)行為，從而瀏覽器可以放心大膽的滾動(dòng)頁(yè)面，這樣可以大幅度提升移動(dòng)端頁(yè)面的性能，因?yàn)閾?jù)統(tǒng)計(jì)只有20%的觸摸事件會(huì)阻止默認(rèn)事件。

2）按鍵修飾符

在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵修飾符。

網(wǎng)址：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key/Key_Values。

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

修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下?tīng)顟B(tài)，換句話(huà)說(shuō)，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會(huì)觸發(fā)事件。如果你想要這樣的行為，請(qǐng)為 ctrl 換用 keyCode：keyup.17。

- .ctrl

- .alt

- .shift

- .meta

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

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

僅當(dāng)點(diǎn)擊特定的鼠標(biāo)按鈕時(shí)會(huì)處理執(zhí)行函數(shù)。（2.2.0 +）

- .left

- .right

- .middle

3、v-model的修飾符

1）lazy

沒(méi)有觸發(fā)change事件的時(shí)候，就不更新數(shù)據(jù)。

在默認(rèn)情況下，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步。如果要變?yōu)槭褂胏hange事件同步可以添加lazy修飾符。

2）number

自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為數(shù)值類(lèi)型。

3）trim

自動(dòng)過(guò)濾用戶(hù)輸入的 首尾 空白字符。

-----注意：

1. 使用修飾符時(shí)，順序很重要。相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，

v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊的默認(rèn)事件

v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身點(diǎn)擊的默認(rèn)事件

2. 不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。

到此，關(guān)于“vue指令的修飾符指什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)頁(yè)名稱(chēng)：vue指令的修飾符指什么
標(biāo)題路徑：http://bm7419.com/article22/jcepcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、定制網(wǎng)站、企業(yè)網(wǎng)站制作、服務(wù)器托管、網(wǎng)站改版、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)