Vue Template 修飾符和簡寫，讓開發效率有所提升

做者：John Au-Yeung
譯者：前端小智
來源：websystemer

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

Vue 是一個易於使用的Web應用程序框架，可用於開發交互式前端應用程序。在本文中，咱們將介紹指令的修飾符和一些有用的模板簡寫指令。

修飾符

修飾符用於以特殊方式綁定指令。

事件修飾符

例如，v-on指令的.prevent修飾符將在設置爲該值的事件處理函數上自動運行event.preventDefault。

.prevent修飾符用法以下：

<form v-on:submit.prevent="onSubmit"> ... </form>

這樣，當運行onSubmit事件以前就會運行event.preventDefault()。

其餘事件修飾符包括：

• .stop
• .capture
• .self
• .once
• .passive

.stop在運行其他事件處理程序代碼以前運行event.stopPropagation()。

.capture讓咱們捕獲事件。 也就是說，當咱們在內部元素中運行事件處理程序時，相同的事件處理程序也將在外部元素中運行。

例如，假設 src/index.js中的內容爲：

var vm=new Vue({
    el:"#app",
    data:{
        
    },
    methods:{
        show:function(){
            console.log("這是app的方法")
        },
        show2:function(){
            console.log("這是app2的方法")
        },
        show3:function(){
            console.log("這是app3的方法")
        }
    }
})

以及index.html中內容爲：

<div id="app" v-on:click="show">
    1
    <div id="app2" v-on:click.capture="show2">
        2
        <div id="app3" v-on:click="show3">
            3
            
        </div>
    </div>
</div>

此處的代碼由於div2有capture關鍵字，因此此時冒泡的順序發生了改變

正常狀況下：

點擊div3一層一層冒泡，先div3=》div2=》div1

使用了關鍵字：

點擊div3時，先div2=》div3=》div1

就是說只要存在一個capture關鍵字，就會影響整個嵌套的執行

.self 修飾符的做用是：只當在 event.target 是當前元素自身時觸發處理函數，即事件不是從內部元素觸發的 。

.once 修飾符的做用是:點擊事件將只會觸發一次

passive 做用

　　詳情請參考MDN（https://developer.mozilla.org...）中關於addEventListener中的第三個參數；表示 listener 永遠不會調用 preventDefault()。若是 listener 仍然調用了這個函數，客戶端將會忽略它並拋出一個控制檯警告。

passive這個修飾符會執行默認方法。大家可能會問，明明默認執行爲何會設置這樣一個修飾符。這就要說一下這個修飾符的本意了。

瀏覽器只有等內核線程執行到事件監聽器對應的 JS 代碼時，才能知道內部是否會調用preventDefault函數來阻止事件的默認行爲，因此瀏覽器自己是沒有辦法對這種場景進行優化的。這種場景下，用戶的手勢事件沒法快速產生，會致使頁面沒法快速執行滑動邏輯，從而讓用戶感受到頁面卡頓。

通俗點說就是每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動做。咱們加上passive就是爲了告訴瀏覽器，不用查詢了，咱們沒用preventDefault阻止默認動做。

這裏通常用在滾動監聽，@scoll，@touchmove 。由於滾動監聽過程當中，移動每一個像素都會產生一次事件，每次都使用內核線程查詢prevent會使滑動卡頓。咱們經過passive將內核線程查詢跳過，能夠大大提高滑動的流暢度。

注：passive和prevent衝突，不能同時綁定在一個監聽器上。

v-model 修飾符

v-model 主要有三個修飾符：

• .lazy
• .number
• .trim

.lazy修飾符

<input v-model.lazy="msg" >

添加了lazy後，輸入框中的數據會在change事件中同步，不會隨着輸入同時同步。

.number修飾符

首先誰明這個number並非限制用戶的輸入,而是將用戶輸入的數據嘗試綁定爲 js 中的 number 類型

舉個例子，若是用戶輸入300，data 中綁定的實際上是'300'(string)，添加 number 指令後能夠獲得 300(number)的綁定結果。而若是用戶輸入的不是數字，這個指令並不會產生任何效果。

.trim修飾符

trim能夠用來過濾先後的空格

指令簡寫

Vue 中的一些指令能夠簡寫。

v-bind

咱們能夠將v-bind簡寫爲:，例如：

<a v-bind:href="url">Link</a>

能夠寫成

<a :href="url">Link</a>

若是使用Vue 2.6.0或更高版本，咱們還可使用動態參數:

<a :[key]="url">Link</a>

v-on

咱們能夠將v-on簡寫爲@，例如：

<a v-on:click="onClick">Click me</a>

能夠寫成

<a @click="onClick">Click me</a>

一樣，從Vue 2.6.0開始，咱們也可使用動態參數：

<a @[event]="onClick">Click me</a>

總結

一些指令具備與它們關聯的修飾符。v-on指令具備多個修飾符，用於控制事件處理程序的調用方式。

另外，v-model指令也具備一些修飾符，可以讓咱們將輸入自動轉換爲數字或修剪輸入中的空格。

v-on和v-bind也有簡寫形式。 v-on：能夠簡寫爲@，而v-bind：能夠縮寫爲：。

指令參數也可使用簡寫。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

https://www.websystemer.no/vu...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。