利用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 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...