利用Vue這些修飾符幫我節省20%的開發時間

来源:https://www.cnblogs.com/coderhf/archive/2020/05/22/12937113.html

為了方便大家寫代碼,vue.js給大家提供了很多方便的修飾符,比如我們經常用到的取消冒泡,阻止預設事件等等~。 目錄 表單修飾符 事件修飾符 滑鼠按鍵修飾符 鍵值修飾符 v-bind修飾符(實在不知道叫啥名字) 表單修飾符 填寫表單,最常用的是什麼?input!v-model~而我們的修飾符正是為了 ...


為了方便大家寫代碼,vue.js給大家提供了很多方便的修飾符,比如我們經常用到的取消冒泡,阻止預設事件等等~。

目錄

  • 表單修飾符
  • 事件修飾符
  • 滑鼠按鍵修飾符
  • 鍵值修飾符
  • v-bind修飾符(實在不知道叫啥名字)

表單修飾符

填寫表單,最常用的是什麼?input!v-model~而我們的修飾符正是為了簡化這些東西而存在的

1.lazy

 

 

從這裡我們可以看到,我們還在輸入的時候,游標還在的時候,下麵的值就已經出來了,可以說是非常地實時。

但是有時候我們希望,在我們輸入完所有東西,游標離開才更新視圖。

 

這樣即可~這樣只有當我們游標離開輸入框的時候,它才會更新視圖,相當於在onchange事件觸發更新。

2.trim

在我們的輸入框中,我們經常需要過濾一下一些輸入完密碼不小心多敲了一下空格的兄弟輸入的內容。

 

為了讓你更清楚的看到,我改了一下樣式,不過問題不大,相信你已經清楚看到這個大大的hello左右兩邊沒有空格,儘管你在input框里敲爛了空格鍵。

需要註意的是,它只能過濾首尾的空格!首尾,中間的是不會過濾的

3.number

看這個名字就知道,應該是限制輸入數字或者輸入的東西轉換成數字,but不是辣麽乾的。

 

如果你先輸入數字,那它就會限制你輸入的只能是數字。
如果你先輸入字元串,那它就相當於沒有加.number

事件修飾符

1.stop

由於事件冒泡的機制,我們給元素綁定點擊事件的時候,也會觸發父級的點擊事件。

 

一鍵阻止事件冒泡,簡直方便得不行。相當於調用了event.stopPropagation()方法。

 

2.prevent

用於阻止事件的預設行為,例如,當點擊提交按鈕時阻止對錶單的提交。相當於調用了event.preventDefault()方法。

 

 

註意:修飾符可以同時使用多個,但是可能會因為順序而有所不同。

用 v-on:click.prevent.self 會阻止所有的點擊,而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

也就是從左往右判斷~

3.self

只當事件是從事件綁定的元素本身觸發時才觸發回調。像下麵所示,剛剛我們從.stop時候知道子元素會冒泡到父元素導致觸發父元素的點擊事件,當我們加了這個.self以後,我們點擊button不會觸發父元素的點擊事件shout,只有當點擊到父元素的時候(藍色背景)才會shout~從這個self的英文翻譯過來就是‘自己,本身’可以看出這個修飾符的用法

 

4.once

這個修飾符的用法也是和名字一樣簡單粗暴,只能用一次,綁定了事件以後只能觸發一次,第二次就不會觸發。

 

5.capture


從上面我們知道了事件的冒泡,其實完整的事件機制是:捕獲階段--目標階段--冒泡階段。

 

預設的呢,是事件觸發是從目標開始往上冒泡。

 

當我們加了這個.capture以後呢,我們就反過來了,事件觸發從包含這個元素的頂層開始往下觸發。

 

從上面這個例子我們點擊obj4的時候,就可以清楚地看出區別,obj1,obj2在捕獲階段就觸發了事件,因此是先1後2,後面的obj3,obj4是預設的冒泡階段觸發,因此是先4然後冒泡到3~

6.passive

當我們在監聽元素滾動事件的時候,會一直觸發onscroll事件,在pc端是沒啥問題的,但是在移動端,會讓我們的網頁變卡,因此我們使用這個修飾符的時候,相當於給onscroll事件整了一個.lazy修飾符

 

7.native

我們經常會寫很多的小組件,有些小組件可能會綁定一些事件,但是,像下麵這樣綁定事件是不會觸發的

 

必須使用.native來修飾這個click事件(即),可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽,
註意:使用.native修飾符來操作普通HTML標簽是會令事件失效的

滑鼠按鈕修飾符

剛剛我們講到這個click事件,我們一般是會用左鍵觸發,有時候我們需要更改右鍵菜單啥的,就需要用到右鍵點擊或者中間鍵點擊,這個時候就要用到滑鼠按鈕修飾符

  • .left 左鍵點擊
  • .right 右鍵點擊
  • .middle 中鍵點擊

 

鍵值修飾符

其實這個也算是事件修飾符的一種,因為它都是用來修飾鍵盤事件的。
比如onkeyup,onkeydown啊

1.keyCode

如果不用keyCode修飾符,那我們每次按下鍵盤都會觸發shout,當我們想指定按下某一個鍵才觸發這個shout的時候,這個修飾符就有用了,具體鍵碼查看鍵碼對應表https://zhidao.baidu.com/question/266291349.html

 

為了方便我們使用,vue給一些常用的鍵提供了別名

 

可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名:

 

我們從上面看到,鍵分成了普通常用的鍵和系統修飾鍵,區別是什麼呢?
當我們寫如下代碼的時候,我們會發現如果僅僅使用系統修飾鍵是無法觸發keyup事件的。

那該如何呢?我們需要將系統修飾鍵和其他鍵碼鏈接起來使用,比如

 

這樣當我們同時按下ctrl+c時,就會觸發keyup事件。
另,如果是滑鼠事件,那就可以單獨使用系統修飾符。

 

大概是什麼意思呢,就是你不能單手指使用系統修飾鍵的修飾符(最少兩個手指,可以多個)。你可以一個手指按住系統修飾鍵一個手指按住另外一個鍵來實現鍵盤事件。也可以用一個手指按住系統修飾鍵,另一隻手按住滑鼠來實現滑鼠事件。

2.exact (2.5新增)

我們上面說了這個系統修飾鍵,當我們像這樣綁定了click鍵按下的事件,驚奇的是,我們同時按下幾個系統修飾鍵,比如ctrl shift點擊,也能觸發,可能有些場景我們只需要或者只能按一個系統修飾鍵來觸發(像製作一些快捷鍵的時候),而當我們按下ctrl和其他鍵的時候則無法觸發。那就這樣寫。

註意:這個只是限制系統修飾鍵的,像下麵這樣書寫以後你還是可以按下ctrl + c,ctrl+v或者ctrl+普通鍵 來觸發,但是不能按下ctrl + shift +普通鍵來觸發。

 

 

 

20

然後下麵這個你可以同時按下enter+普通鍵來觸發,但是不能按下系統修飾鍵+enter來觸發。相信你已經能聽懂了8~

 

21

v-bind修飾符

1.sync(2.3.0+ 新增)

在有些情況下,我們可能需要對一個 prop 進行“雙向綁定”。不幸的是,真正的雙向綁定會帶來維護上的問題,因為子組件可以修改父組件,且在父組件和子組件都沒有明顯的改動來源。我們通常的做法是

 

22

現在這個.sync修飾符就是簡化了上面的步驟

 

23

這樣確實會方便很多,但是也有很多需要註意的點

 

1、使用sync的時候,子組件傳遞的事件名必須為update:value,其中value必須與子組件中props中聲明的名稱完全一致(如上例中的myMessage,不能使用my-message)

2、註意帶有 .sync 修飾符的 v-bind 不能和表達式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)。取而代之的是,你只能提供你想要綁定的屬性名,類似 v-model。

3將 v-bind.sync 用在一個字面量的對象上,例如 v-bind.sync=”{ title: doc.title }”,是無法正常工作的,因為在解析一個像這樣的複雜表達式的時候,有很多邊緣情況需要考慮。

2.prop

要學習這個修飾符,我們首先要搞懂兩個東西的區別。

 

24

 

25

 

其實attribute和property兩個單詞,翻譯出來都是屬性,但是《javascript高級程式設計》將它們翻譯為特性和屬性,以示區分

 

26

從上面我們可以看到如果直接使用v-bind綁定,則預設會綁定到dom節點的attribute。
為了

  • 通過自定義屬性存儲變數,避免暴露數據
  • 防止污染 HTML 結構

我們可以使用這個修飾符,如下

 

27

3.camel

由於HTML 特性是不區分大小寫的。

 

實際上會渲染為

 

這將導致渲染失敗,因為 SVG 標簽只認 viewBox,卻不知道 viewbox 是什麼。
如果我們使用.camel修飾符,那它就會被渲染為駝峰名。
另,如果你使用字元串模版,則沒有這些限制。

 

最後

不知道有沒有漏的,如果有漏的麻煩在評論區告知一聲,有建議或者意見也可以提一下,謝謝~

為此,為了學好前端,創建了一個學習交流,能夠與大家一起學習、交流。大家免費領取面試題,電子書籍,特效項目源碼等乾貨。

 

先奉上一些資料圖:

 

 

 

 

 

更多學習資料查看地址:web前端小白進階方法筆記,學習資料,面試題和視頻,項目源碼免費領取(持續更新)

 

 


您的分享是我們最大的動力!

更多相關文章
  • // 閉包的使用場景:一個方法要被多次調用,並且共用一個數據 // 防抖和節流 // 自執行函數省去單獨調用一次 let addEvent = (function() { let obj = {}; return function(eventName,fns){ if(obj[eventName] ...
  • 概念理解 防抖:在事件被觸發n秒後再執行回調,如果在這n秒內又被觸發,則重新計時。 節流:規定在一個單位時間內,只能觸發一次函數。如果這個單位時間內觸發多次函數,只有一次生效。 js函數防抖與節流的區別: 函數防抖是某一段時間內只執行一次,而函數節流是間隔時間執行。 個人踩坑 1、通過理解函數防抖與 ...
  • + 背景 1. background 在一個聲明中設置所有的背景屬性。 2. background color 設置目標的背景色 3. background image 設置背景圖片 4. background size 背景圖片的尺寸 ...
  • 一、computed: 模板內表達式非常便利,可用於簡單計算,當模板內放入太多的邏輯時,模板會過重且難以維護;可以使用computed替代 計算屬性是基於它們的響應式依賴進行緩存的,當依賴的響應式數據發生改變時,計算屬性才會改變; 如果時非響應式(未在data中聲明)數據,計算屬性是不會發生改變的; ...
  • 前言 每個框架都不可避免會有自己的一些特點,從而會對使用者有一定的要求,這些要求就是主張,主張有強有弱,它的強勢程度會影響在業務開發中的使用方式。 一、Angular,它兩個版本都是強主張的,如果你用它,必須接受以下東西: 必須使用它的模塊機制 必須使用它的依賴註入 必須使用它的特殊形式定義組件(這 ...
  • 摘要 axios是一個基於promise的HTTP庫,可以用於瀏覽器中進行AJAX請求處理。在項目中,為了實現通用性,封裝了一個axios請求。 axios封裝 1、配置環境變數 // 根據不同環境變數選擇不同的介面伺服器功能變數名稱 export const BASE_URL = process.env. ...
  • 摘要 在開發項目中時常有點擊跳轉滾動到錨點的需求,最簡單的錨點定位就是給一個a標簽,a標簽的href = ‘#錨點’,然後給需要跳轉的錨點一個id = ‘錨點’。參考最簡單的錨點跳轉實現方式,在React中使用useRef來實現跳轉錨點的功能。 功能具體步驟 1、創建空的Ref import Rea ...
  • 目前市場上HTML、CSS 類別書籍,都是大同小異,在噹噹網、卓越網搜索一下很多推薦。今天總結:Javascript 的書籍推薦看老外寫的,國內很多 Javascript 書籍的作者對 Javascript 語言瞭解的都不是很透徹。 想成為一個高薪WEB前端程式員,這些書籍你要看 初級讀物 《Jav ...
一周排行
  • 一:背景 1. 講故事 曾今在項目中發現有同事自定義結構體的時候,居然沒有重寫Equals方法,比如下麵這段代碼: static void Main(string[] args) { var list = Enumerable.Range(0, 1000).Select(m => new Point ...
  • 最近一個朋友有個關於素數的小東西要寫一下,素數是什麼呢?除了1和他本身不能被其他數整除,那麼這個數就是素數,1除外哦。我們知道概念那就很簡單了,直接代碼擼起。 ...
  • 前言 在開發編程中,我們經常會遇到功能非常相似的功能模塊,只是他們的處理的數據不一樣,所以我們會分別採用多個方法來處理不同的數據類型。但是這個時候,我們就會想一個問題,有沒有辦法實現利用同一個方法來傳遞不同種類型的參數呢? 這個時候,泛型也就因運而生,專門來解決這個問題的。 泛型是在C 2.0就推出 ...
  • 本文章主要用於介紹在Asp.Net Mvc(C#)中使用Fleck製作一個Html5的即時聊天室,含有完整代碼和演示Demo。 ...
  • 出庫單的功能。能學習了出庫單管理之後,WMS的 主體功能算是完成了。當然一個成熟的WMS還包括了盤點,報表,策略規則,移庫功能及與其他系統(ERP、TMS等)的介面,實現無縫集成,打破信息孤島,讓數據實時、準確和同步。 ...
  • Data StructureThere're two types of variables in C#, reference type and value type.Enum:enum Color{Red=0,Green=1}//equals to enum Color{Red,//start fr... ...
  • 0. 前言 該項目使用Maven進行管理和構建,所以需要預先配置好Maven。嗯,在這個系列里就不做過多的介紹了。 1. 創建項目 先創建一個pom.xml 文件,添加以下內容: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http: ...
  • API 概述 API(Application Programming Interface),應用程式編程介面。 Java API是一本程式員的 字典 ,是JDK中提供給我們使用的類的說明文檔。 這些類將底層的代碼實現封裝了起來,我們不需要關心這些類是如何實現的,只需要學習這些類如何使用即可。 所以我 ...
  • 女程式員是這麼徵婚的: SELECT * FROM 男人們 WHERE 未婚=true and 同性戀=false and 有房=true and 有車=true and 條件 in (帥氣,紳士,大度,氣質,智慧,溫柔,體貼,會浪漫,活潑,可愛,最好還能帶孩子) and 年齡 between(24 ...
  • 有很多剛學習軟體測試的小伙伴,都會在網路上找尋各種學習資料,去提升自己的專業技能水平。因此,我決定定期分享我整理收集的一些軟體測試的測試工具下載、面試寶典、視頻教學合集。都整理好了,有需要的可以關註我(獲取方式在文末) 軟體測試的學習,不止是基礎理論,還需要學習測試工具的用法,如介面工具Postma ...