建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“vue指令的修飾符指什么”，在日常操作中，相信很多人在vue指令的修飾符指什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue指令的修飾符指什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
創(chuàng)新互聯(lián)建站是一家專業(yè)提供渭源企業(yè)網站建設,專注與成都網站建設、網站設計、H5技術、小程序制作等業(yè)務。10年已為渭源眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站建設公司優(yōu)惠進行中。
在vue中，指令的修飾符是以英文句號“.”指明的特殊后綴，用于指出一個指令應該以特殊方式綁定；其中“.passive”和“.prevent”不能一起使用，因為一起使用時“.prevent”會被忽略，同時瀏覽器會展示一個警告。
本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。
什么是vue指令的修飾符
修飾符 (modifier) 是以英文句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。
1、v-bind指令修飾符
1）camel
由于綁定特性時，會將大寫字母轉換為小寫字母，如
所以，Vue提供了v-bind修飾符 camel，該修飾符允許在使用 DOM 模板時將 v-bind 屬性名稱駝峰化，例如 SVG 的 viewBox 屬性。
2）prop
被用于綁定 DOM 屬性 (property)。
v-bind 默認綁定到 DOM 節(jié)點的 attribute 上，使用 .prop 修飾符后，會綁定到 property。
3）sync
2、v-on指令的修飾符
1）事件修飾符
- .stop 阻止事件冒泡
- .prevent 阻止默認事件
- .capture 開啟事件捕獲模式
- .self
只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調（點擊自己才觸發(fā)，不能冒泡）。
為什么要使用這個修飾符？
即使在觸發(fā)觸摸事件時，執(zhí)行了一個空的函數(shù)，也會讓頁面卡頓。因為瀏覽器不知道監(jiān)聽器到底會不會阻止默認事件，所以瀏覽器要等到執(zhí)行完整個函數(shù)后，才能決定是否要滾動頁面。passive事件監(jiān)聽器，允許開發(fā)者告訴瀏覽器，監(jiān)聽器不會阻止默認行為，從而瀏覽器可以放心大膽的滾動頁面，這樣可以大幅度提升移動端頁面的性能，因為據(jù)統(tǒng)計只有20%的觸摸事件會阻止默認事件。
2）按鍵修飾符
在監(jiān)聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符。
網址：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key/Key_Values。
3）系統(tǒng)修飾鍵
修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)，換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會觸發(fā)事件。如果你想要這樣的行為，請為 ctrl 換用 keyCode：keyup.17。
- .ctrl
- .alt
- .shift
- .meta
- exact （允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件）
4）鼠標按鈕修飾符
僅當點擊特定的鼠標按鈕時會處理執(zhí)行函數(shù)。（2.2.0 +）
- .left
- .right
- .middle
3、v-model的修飾符
1）lazy
沒有觸發(fā)change事件的時候，就不更新數(shù)據(jù)。
在默認情況下，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步。如果要變?yōu)槭褂胏hange事件同步可以添加lazy修飾符。
2）number
自動將用戶的輸入值轉為數(shù)值類型。
3）trim
自動過濾用戶輸入的 首尾 空白字符。
-----注意：
1. 使用修飾符時，順序很重要。相應的代碼會以同樣的順序產生。因此，
v-on:click.prevent.self 會阻止所有的點擊的默認事件
v-on:click.self.prevent 只會阻止對元素自身點擊的默認事件
2. 不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。
到此，關于“vue指令的修飾符指什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當前文章：vue指令的修飾符指什么
文章路徑：http://fisionsoft.com.cn/article/jcepcc.html
