Vue 插件開發(fā)指南

Vue插件的編寫方法一般有下面幾種：

添加全局方法或者屬性恰画，如: vue-custom-element
添加全局資源：指令/過濾器/過渡等展鸡，如 vue-touch
通過全局 mixin 方法添加一些組件選項，如: vue-router
添加 Vue 實例方法悼瓮，通過把它們添加到 Vue.prototype 上實現(xiàn)。
一個庫，提供自己的 API垫卤，同時提供上面提到的一個或多個功能，如 vue-router

Vue.js 的插件應(yīng)當(dāng)有一個公開方法 install 出牧。這個方法的第一個參數(shù)是 Vue 構(gòu)造器穴肘，第二個參數(shù)是一個可選的選項對象

注冊：

export default {
  install (Vue, options) {
    // 1. 添加全局方法或?qū)傩?    Vue.myGlobalMethod = function () {
      // 邏輯...
    }

    // 2. 添加全局資源
    Vue.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        // 邏輯...
      }
      ...
    })

    // 3. 注入組件
    Vue.mixin({
      created: function () {
        // 邏輯...
      }
      ...
    })

    // 4. 添加實例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      // 邏輯...
    }
  }
}

使用：

...
import Vue from 'vue'
import MyPlugin from './plugins/plugins.js'

Vue.use(MyPlugin);
...

Vue.js 的插件應(yīng)當(dāng)有一個公開方法 install。通過全局方法Vue.use()使用插件舔痕，也可以傳入一個選項對象：Vue.use(MyPlugin, { someOption: true })

Vue.use 會自動阻止多次注冊相同插件评抚，屆時只會注冊一次該插件。

Vue.js 官方提供的一些插件 (例如vue-router) 在檢測到 Vue 是可訪問的全局變量時會自動調(diào)用Vue.use()伯复。然而在例如 CommonJS 的模塊環(huán)境中慨代，你應(yīng)該始終顯式地調(diào)用Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模塊環(huán)境時
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了調(diào)用此方法
Vue.use(VueRouter)

1 添加全局方法或?qū)傩?/h2>

export default {
    install(Vue, options) {
        Vue.$myName = '勞卜';
    }
}

2 添加全局資源（指令/過濾器/過渡等）

2.1 自定義指令

除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令啸如。

在 Vue2.0 中侍匙，代碼復(fù)用和抽象的主要形式是組件。

在需要對普通 DOM 元素進(jìn)行底層操作叮雳，這時候就會用到自定義指令想暗。

通過自定義指令實現(xiàn)聚焦輸入框

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注冊局部指令，通過directives的選項：

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 屬性帘不，如下：

<input v-focus>

鉤子函數(shù)

指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)

bind：只調(diào)用一次说莫，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置寞焙。
inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在唬滑，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調(diào)用棺弊，但是可能發(fā)生在其子 VNode 更新之前晶密。指令的值可能發(fā)生了改變，也可能沒有模她。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)稻艰。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次侈净，指令與元素解綁時調(diào)用尊勿。

鉤子函數(shù)參數(shù)

除了 el 之外僧凤，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改元扔。如果需要在鉤子之間共享數(shù)據(jù)躯保，建議通過元素的 dataset 來進(jìn)行。

el：指令所綁定的元素澎语，可以用來直接操作 DOM 途事。
binding：一個對象，包含以下屬性：
- name：指令名擅羞，不包括 v- 前綴尸变。
- value：指令的綁定值，例如：v-my-directive="1 + 1" 中减俏，綁定值為 2召烂。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用娃承。無論值是否改變都可用奏夫。
- expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中历筝，表達(dá)式為 "1 + 1"酗昼。
- arg：傳給指令的參數(shù)，可選漫谷。例如 v-my-directive:foo 中仔雷，參數(shù)為 "foo"蹂析。
- modifiers：一個包含修飾符的對象舔示。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }电抚。
vnode：Vue 編譯生成的虛擬節(jié)點惕稻。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節(jié)點蝙叛，僅在 update 和 componentUpdated 鉤子中可用俺祠。

2.2 自定義過濾器

在創(chuàng)建 Vue 實例之前全局定義過濾器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

創(chuàng)建本地（作用于局部）過濾器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

使用：

{{ message | filterA | filterB }}
// filterA 被定義為接收單個參數(shù)的過濾器函數(shù)
// 表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。
// 然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù) filterB
// 將 filterA 的結(jié)果傳遞到 filterB 中借帘。

{{ message | filterA('arg1', arg2) }}
// filterA 被定義為接收三個參數(shù)的過濾器函數(shù)蜘渣。
// 其中 message 的值作為第一個參數(shù)
// 普通字符串 'arg1' 作為第二個參數(shù)
// 表達(dá)式 arg2 的值作為第三個參數(shù)。

<div v-bind:id="rawId | formatId"></div>
// 在 `v-bind` 中