什么是Vue指令?

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

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

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

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

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

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

v-example="'string'": 這將讓你把'string'作為一個(gè)表達(dá)式.

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

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

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

v-example:arg.modifier="value": 這允許我們使用修飾語(yǔ). 下面的例子中, 允許我們?cè)邳c(diǎn)擊事件時(shí), 調(diào)用preventDefault().

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

理解Vue自定義指令

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

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

Vue.directive('tack');

HTML:

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

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

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

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

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

綁定一個(gè)自定義指令

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

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

在HTML元素中:

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

毫無疑問, 它完全可以按照我們所希望的工作. 但是它還不夠靈活, 如果我們可以傳入一個(gè)值, 然后直接更新或者重用這個(gè)指令就好了. 例如, 我們想為這個(gè)元素指定一個(gè)值, 表示這個(gè)元素離頂部多遠(yuǎn)(多少個(gè)像素), 我們可以這樣寫(在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>

假設(shè)我們想要區(qū)分從頂部或者左側(cè)偏移70px, 我們可以通過傳遞一個(gè)參數(shù)來做到這一點(diǎn)(在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>

當(dāng)然, 你可以同時(shí)傳入不止一個(gè)值. 你可以像使用標(biāo)準(zhǔn)指令一樣簡(jiǎn)單的使用自定義指令(在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)建更為復(fù)雜的自定義指令. 這里, 我們將做一個(gè)waypoints-like例子, 用少量的代碼實(shí)現(xiàn)特定滾動(dòng)事件觸發(fā)的動(dòng)畫效果(在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>

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

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

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

最新評(píng)論