Vue.JS的自訂指令應該如何使用-js教程-PHP中文網

首頁

web前端

js教程

Vue.JS的自訂指令應該如何使用

php中世界最好的语言

Mar 07, 2018 am 11:50 AM

javascript vue.js 自訂

這次帶給大家Vue.JS的自訂指令應該如何使用，使用Vue.JS的自訂指令的注意事項有哪些，下面就是實戰案例，一起來看一下。

Vue.js 允許你註冊自訂指令，實質上是讓你教 Vue 一些新技巧：怎麼將資料的變化對應到 DOM 的行為。你可以使用Vue.directive(id, definition)的方法傳入指令id和定義物件來註冊一個全域自訂指令。定義物件需要提供一些鉤子函數（全部可選）：

bind: 只呼叫一次，當指令第一次綁定元素的時候。

update: 第一次是緊跟在bind 之後調用，獲得的參數是綁定的初始值；以後每當綁定的值發生變化就會被調用，獲得新值與舊值兩個參數。

unbind：只呼叫一次，當指令解綁元素的時候。

範例：

Vue.directive(&#39;my-directive&#39;, {  bind: function () {    // 做绑定的准备工作
    // 比如添加事件监听器，或是其他只需要执行一次的复杂操作
  },  update: function (newValue, oldValue) {    // 根据获得的新值执行对应的更新
    // 对于初始值也会被调用一次
  },  unbind: function () {    // 做清理工作
    // 比如移除在 bind() 中添加的事件监听器
  }
})

登入後複製

一旦註冊好自訂指令，你就可以在Vue.js 範本中像這樣來使用它（需要加入Vue.js 的指令前綴，預設為v- )：

<div v-my-directive="someValue"></div>

登入後複製

如果你只需要update 函數，你可以只傳入一個函數，而不用傳定義物件：

Vue.directive(&#39;my-directive&#39;, function (value) {  // 这个函数会被作为 update() 函数使用})

登入後複製

所有的鉤子函數會被複製到實際的指令物件中，而這個指令物件將會是所有鉤子函數的this
上下文環境。指令物件上揭露了一些有用的公開屬性：

el: 指令綁定的元素
vm: 擁有該指令的上下文ViewModel
expression: 指令的表達式，不包含參數和過濾器
arg: 指令的參數
raw: 未被解析的原始表達式
name: 不含前綴的指令名

這些屬性是唯讀的，不要修改它們。你也可以給指令物件附加自訂的屬性，但是注意不要覆寫已有的內部屬性。

使用指令物件屬性的範例：

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>
    Vue.directive(&#39;demoDirective&#39;, {
        bind: function () {            this.el.style.color = &#39;#fff&#39;
            this.el.style.backgroundColor = this.arg
        },
        update: function (value) {            this.el.innerHTML =                    &#39;name - &#39;       + this.name + &#39;<br>&#39; +                    &#39;raw - &#39;        + this.raw + &#39;<br>&#39; +                    &#39;expression - &#39; + this.expression + &#39;<br>&#39; +                    &#39;argument - &#39;   + this.arg + &#39;<br>&#39; +                    &#39;value - &#39;      + value
        }
    });    var demo = new Vue({
        el: &#39;#demo&#39;,
        data: {
            msg: &#39;hello!&#39;
        }
    })</script></body></html>

登入後複製

多重子句

同一個特性內部，逗號分隔的多個子句將被綁定為多個指令實例。在下面的範例中，指令會被建立和呼叫兩次：

<div v-demo="color: &#39;white&#39;, text: &#39;hello!&#39;"></div>

登入後複製

如果想要用單一指令實例處理多個參數，可以利用字面量物件作為表達式：

<div v-demo="{color: &#39;white&#39;, text: &#39;hello!&#39;}"></div>
Vue.directive(&#39;demo&#39;, function (value) {  console.log(value) // Object {color: &#39;white&#39;, text: &#39;hello!&#39;}})

登入後複製

字面指令

如果在建立自訂指令的時候傳入isLiteral: true ，那麼特性值就會被看成直接字串，並被賦值給該指令的expression。字面指令不會試圖建立資料監視。
範例：

<div v-literal-dir="foo"></div>
Vue.directive(&#39;literal-dir&#39;, {  isLiteral: true,  bind: function () {    console.log(this.expression) // &#39;foo&#39;
  }
})

登入後複製

動態字面指令

然而，在字面指令含有Mustache 標籤的情況下，指令的行為如下：

指令實例會有一個屬性，this._isDynamicLiteral被設為true;

如果沒有提供update函數，Mustache 表達式只會被求值一次，並將該值賦給this.expression。不會對表達式進行資料監視。

如果提供了update函數，指令將會為表達式建立資料監視，並且在計算結果變化的時候呼叫update。

雙向指令

如果你的指令想向 Vue 實例寫回數據，你需要傳入 twoWay: true 。此選項允許在指令中使用 this.set(value)。

Vue.directive(&#39;example&#39;, {  twoWay: true,  bind: function () {    this.handler = function () {      // 把数据写回 vm
      // 如果指令这样绑定 v-example="a.b.c",
      // 这里将会给 `vm.a.b.c` 赋值
      this.set(this.el.value)
    }.bind(this)    this.el.addEventListener(&#39;input&#39;, this.handler)
  },  unbind: function () {    this.el.removeEventListener(&#39;input&#39;, this.handler)
  }
})

登入後複製

內聯語句

傳入acceptStatement: true 可以讓自訂指令像v-on 一樣接受內聯語句：

<div v-my-directive="a++"></div>
Vue.directive(&#39;my-directive&#39;, {  acceptStatement: true,  update: function (fn) {    // the passed in value is a function which when called,
    // will execute the "a++" statement in the owner vm&#39;s
    // scope.
  }
})

登入後複製

但請明智地使用此功能，因為通常我們希望避免在模板中產生副作用。

深度資料觀察值

如果你希望在一個物件上使用自訂指令，並且當物件內部嵌套的屬性發生變化時也能夠觸發指令的update 函數，那麼你就要在指令的定義中傳入deep: true。

<div v-my-directive="obj"></div>
Vue.directive(&#39;my-directive&#39;, {  deep: true,  update: function (obj) {    // 当 obj 内部嵌套的属性变化时也会调用此函数
  }
})

登入後複製

指令優先權

你可以選擇給指令提供一個優先權數（預設是0）。同一個元素上優先權越高的指令會比其他的指令處理得更早。優先權一樣的指令會依照其在元素特性清單中出現的順序依序處理，但是不能保證這個順序在不同的瀏覽器中是一致的。

通常來說身為用戶，你並不需要關心內建指令的優先級，如果你有興趣的話，可以參閱原始碼。邏輯控制指令 v-repeat, v-if 被視為 “終結性指令”，它們在編譯過程中始終擁有最高的優先權。

元素指令

有時候，我們可能想要我們的指令可以以自訂元素的形式被使用，而不是作為一個特性。這與 Angular 的 E 類指令的概念非常相似。元素指令可以看做是一個輕量的自定義元件（後面會講到）。你可以像下面這樣註冊一個自訂的元素指令：

Vue.elementDirective(&#39;my-directive&#39;, {  // 和普通指令的 API 一致
  bind: function () {    // 对 this.el 进行操作...
  }
})

登入後複製

使用時我們不再用這樣的寫法:

<div v-my-directive></div>

登入後複製

而是寫成:

<my-directive></my-directive>

登入後複製

元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7843

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

如何在Netflix中快速設定自訂頭像 Feb 19, 2024 pm 06:33 PM

Netflix上的頭像是你串流媒體身分的視覺化代表。使用者可以超越預設的頭像來展現自己的個性。繼續閱讀這篇文章，了解如何在Netflix應用程式中設定自訂個人資料圖片。如何在Netflix中快速設定自訂頭像在Netflix中，沒有內建功能來設定個人資料圖片。不過，您可以透過在瀏覽器上安裝Netflix擴充功能來實現此目的。首先，在瀏覽器上安裝Netflix擴充功能的自訂個人資料圖片。你可以在Chrome商店買到它。安裝擴充功能後，在瀏覽器上開啟Netflix並登入您的帳戶。導航至右上角的個人資料，然後點擊

Eclipse中自訂快捷鍵設定的方法 Jan 28, 2024 am 10:01 AM

如何在Eclipse中自訂快捷鍵設定？身為開發人員，在使用Eclipse進行編碼時，熟練快捷鍵是提高效率的關鍵之一。 Eclipse作為一個強大的整合開發環境，不僅提供了許多預設的快捷鍵，還允許使用者根據自己的偏好進行個人化的客製化。本文將介紹如何在Eclipse中自訂快捷鍵設置，並給出具體的程式碼範例。打開Eclipse首先，打開Eclipse，並進入

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

edius自訂螢幕佈局的操作流程 Mar 27, 2024 pm 06:50 PM

1.下圖是edius預設的螢幕佈局，預設的EDIUS視窗佈局是橫向版式，因此在單一顯示器環境中，許多視窗是重疊在一起的，且預覽視窗為單一視窗模式。 2、您可以透過【檢視】選單列啟用【雙視窗模式】，使預覽視窗同時顯示播放視窗和錄製視窗。 3.您可以透過【檢視功能表列>視窗佈局>常規】來恢復預設螢幕佈局。另外您也可以自訂適合您的佈局方式，並儲存為常用螢幕佈局：將視窗拖曳成適合自己的佈局，然後點擊【檢視>視窗佈局>儲存目前佈局>新建】，在彈出的【儲存目前佈局】小視窗中輸入佈局名稱，按確定

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

excel怎麼自訂x軸和y軸？ (excel座標軸刻度如何自訂) Mar 14, 2024 pm 02:10 PM

　　在excel表格中，有時候可能需要插入座標軸，能夠更直觀地看到資料的變化趨勢。還有些小夥伴不清楚怎麼在表中插入座標軸，接下來小編就跟大家分享一下excel自訂座標軸刻度的方法吧。　　座標軸插入方法：　　1、在excel介面中，選取資料。　　2、在插入介面中，點選插入長條圖或長條圖。　　3、在展開的介面中，選擇形圖類型。　　4、在表格右鍵介面中，點選選擇資料。　　5、在展開的介面中，進行自訂即可。

如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務

See all articles

Vue.JS的自訂指令應該如何使用

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題