什么是Vue指令?

指令是一種可以附加到DOM元素的微命令(tiny commands). 它們通常以"v-"作為前綴, 以方便Vue知道你在使用一種特殊的標記, 從而確保語法的一致性. 如果你需要對HTML元素的低級別(low-level)訪問來控制一些行為, 它們通常很有用.

如果你正在使用Vue(或者Angular), 你可能已經(jīng)很熟悉其中的一些指令, 如: v-if, v-else等等. 我們將從了解一些基礎開始, 但是如果你更愿意直接看例子, 請直接往下滾動. 這些例子也能很好的讓你理解這些概念.

以下是一些指令的使用方法, 以及對應的例子片段. 這些例子不是規(guī)定性的, 它們只是一些用例. 這里的"例子"實際上是"指令".

v-example: 這將實例化一個指令, 但不接受任何參數(shù). 雖然不帶參數(shù)的指令, 在使用的過程中并不是很靈活, 但是你仍然可以通過這種類型的指令對DOM元素做一些操作.

v-example="value": 這將傳遞一個值給指令, 并且該指令根據(jù)該值計算出要做的操作.

<div v-if="stateExample">I will show up if stateExample is true</div>

v-example="'string'": 這將讓你把'string'作為一個表達式.

<p v-html="'<strong>this is an example of a string in some text</strong>'"></p>

v-example:arg="value": 這允許我們傳入一個參數(shù)給指令. 下面的例子中, 我們綁定到一個類, 將其樣式化為一個對象, 單獨存儲.

<div v-bind:class="someClassObject"></div>

v-example:arg.modifier="value": 這允許我們使用修飾語. 下面的例子中, 允許我們在點擊事件時, 調用preventDefault().

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

理解Vue自定義指令

既然我們已經(jīng)大致過了一遍所有的我們所用過的指令類型方法, 讓我們想一想我們如何通過自己編寫的自定義指令來實現(xiàn)它們? 使用自定義指令的一個很好的例子是滾動事件, 讓我們看看如何實現(xiàn)它.

首先, 最基本的是如何創(chuàng)建一個全局的指令. (是的, 它什么也不做.) 僅僅是創(chuàng)建了一個指令.

Vue.directive('tack');

HTML:

<p v-tack>This element has a directive on it</p>

我們有幾個可用的鉤子, 每個鉤子可以選擇一些參數(shù). 鉤子如下:

bind: 一旦指令附加到元素時觸發(fā)
inserted: 一旦元素被添加到父元素時觸發(fā)
update: 每當元素本身更新(但是子元素還未更新)時觸發(fā)
componentUpdate: 每單組件和子組件被更新時觸發(fā)
unbind: 一旦指令被移除時觸發(fā)

就個人而言, bind和update也許是這五個里面最有用的兩個鉤子了.
每個鉤子都有el, binding, 和vnode參數(shù)可用. update和componentUpdated鉤子還暴露了oldVnode, 以區(qū)分傳遞的舊值和較新的值.

el, 跟你所期待的一樣, 就是所綁定的元素. binding是一個保護傳入鉤子的參數(shù)的對象. 有很多可用的參數(shù), 包括name, value, oldValue, expression, arguments, arg及修飾語. vnode有一個更不尋常的用例, 它可用于你需要直接引用到虛擬DOM中的節(jié)點. binding和vnode都應該被視為只讀.

綁定一個自定義指令

既然我們已經(jīng)知道了這一點, 就可以開始研究如何在實際中使用一個自定義指令. 讓我們完善剛才所創(chuàng)建的第一個指令, 讓它變得有用:

Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed'
  }
});

在HTML元素中:

<p v-tack>I will now be tacked onto the page</p>

毫無疑問, 它完全可以按照我們所希望的工作. 但是它還不夠靈活, 如果我們可以傳入一個值, 然后直接更新或者重用這個指令就好了. 例如, 我們想為這個元素指定一個值, 表示這個元素離頂部多遠(多少個像素), 我們可以這樣寫(在CODEPEN上查看):

// JS
Vue.directive('tack', {
  bind(el, binding, vnode){
    el.style.position = 'fixed';
    el.style.top = binding.value + 'px';
  }
});

// HTML
<div id="app">
  <p>Scroll down the page</p>
  <p v-tack="70">Stick me 70px from the top of the page</p>
</div>

假設我們想要區(qū)分從頂部或者左側偏移70px, 我們可以通過傳遞一個參數(shù)來做到這一點(在CODEPEN上查看):

// JS
Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    const s = (binding.arg === 'left' ? 'left' : 'top');
    el.style[s] = binding.value + 'px';
  }
});

// HTML
<p v-tack:left="70">I'll now be offset from the left instead of the top</p>

當然, 你可以同時傳入不止一個值. 你可以像使用標準指令一樣簡單的使用自定義指令(在CODEPEN上查看):

// JS
Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    el.style.top = binding.value.top + 'px';
    el.style.left = binding.value.left + 'px';
  }
});

// HTML
<p v-tack="{top: '40', left: '100'}">Stick me 40px from the top of the page and 100px from the left of the page</p>

基于我們的自定義指令, 我們可以創(chuàng)建和修改方法, 從而創(chuàng)建更為復雜的自定義指令. 這里, 我們將做一個waypoints-like例子, 用少量的代碼實現(xiàn)特定滾動事件觸發(fā)的動畫效果(在CODEPEN上查看):

// JS
Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if(binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    };
    window.addEventListener('scroll', f);
  }
});

// main app
new Vue({
  el: "#app",
  methods: {
    handleScroll: function(evt, el) {
      if(window.scrollY > 50) {
        TweenMax.to(el, 1.5, {
          y: -10,
          opacity: 1,
          ease: Sine.easeOut
        });
      }
      
      return window.scrollY > 100;
    }
  }
});

// HTML
<div class="box" v-scroll="handleScroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
</div>

為了讓大家看得更清楚, 在這個代碼片段中, 我們盡可能的保證它的簡單易讀. 在實際的APP中, 你可以構建非常友好的, 并且非常靈活的, 適合整個團隊使用的自定義指令.

在實際的構建中, 我會將指令代碼放在"main.js"文件中, 該文件位于"src"目錄的根目錄下(如果你使用的是Vue-cli構建工具), 那么"App.vue"以及組件目錄中的所有的.vue文件都可以訪問它. 當然, 還要其他方法可以使用它, 但是我發(fā)現(xiàn)對于整個應用程序來說, 這是最靈活的實現(xiàn)方式.

以上就是個人對Vue自定義指令的理解，希望對大家有所幫助

最新評論