Vue插件的编写方法一般有下面几种：
添加全局方法或者属性，如: vue-custom-element
添加全局资源：指令/过滤器/过渡等，如 vue-touch
通过全局 mixin 方法添加一些组件选项，如: vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 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 属性，如下：
<input 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 的值作为第三个参数。
<div v-bind:id="rawId | formatId"></div>
// 在 `v-bind` 中
