Vue 插件开发指南

Vue插件的编写方法一般有下面几种：

1. 添加全局方法或者属性，如: vue-custom-element

2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch

3. 通过全局 mixin 方法添加一些组件选项，如: vue-router

4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

注册：

export default {
  install (Vue, options) {
    // 1. 添加全局方法或属性
    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 的插件应当有一个公开方法 install。通过全局方法Vue.use()使用插件，也可以传入一个选项对象：Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件，届时只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用Vue.use()。然而在例如 CommonJS 的模块环境中，你应该始终显式地调用Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了调用此方法
Vue.use(VueRouter)

1 添加全局方法或属性

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

2 添加全局资源（指令/过滤器/过渡等）

2.1 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

在 Vue2.0 中，代码复用和抽象的主要形式是组件。

在需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

通过自定义指令实现聚焦输入框

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，通过directives的选项：

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

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

钩子函数

指令定义对象可以提供如下几个钩子函数 (均为可选)

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

2.2 自定义过滤器

在创建 Vue 实例之前全局定义过滤器：

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

new Vue({
  // ...
})

创建本地（作用于局部）过滤器：

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

使用：

{{ message | filterA | filterB }}
// filterA 被定义为接收单个参数的过滤器函数
// 表达式 message 的值将作为参数传入到函数中。
// 然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
// 将 filterA 的结果传递到 filterB 中。

{{ message | filterA('arg1', arg2) }}
// filterA 被定义为接收三个参数的过滤器函数。
// 其中 message 的值作为第一个参数
// 普通字符串 'arg1' 作为第二个参数
// 表达式 arg2 的值作为第三个参数。

// 在 `v-bind` 中