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

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

為了方便大家寫代碼,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前端小白進階方法筆記,學習資料,面試題和視頻,項目源碼免費領取(持續更新)

 

 


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

-Advertisement-
Play Games
更多相關文章
  • // 閉包的使用場景:一個方法要被多次調用,並且共用一個數據 // 防抖和節流 // 自執行函數省去單獨調用一次 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 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...