插件

插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制，一般有以下几种

• 添加全局方法或者 property（属性）
• 添加全局资源：指令/过滤器/过渡等
• 通过全局混入来添加一些组件选项
• 添加Vue实例方法，通过把它们添加到Vue.prototype上实现
• 一个库，提供自己的API，同时提供上面提到的一个或多个功能。如：vue-router

使用插件

可以通过全局方法Vue.use()使用插件。它需要在你调用new Vue()启动应用之前完成

// 引入插件
import plugins from './plugins'

// 使用插件
Vue.use(plugins)

new Vue({  
  // ...组件选项  
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

Vue.use会自动阻止多次注册相同的插件，即使你多次调用也只会注册一次该插件

开发插件

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

export default {
  install(Vue){
    // 全局过滤器
    Vue.filter('mySlice',function(value){
      return value.slice(0,4)
    })

    //定义全局指令
    Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element,binding){
        element.value = binding.value
      },
      //指令所在元素被插入页面时
      inserted(element){
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element,binding){
        element.value = binding.value
      }
    })

    // 定义混入
    Vue.mixin({
      data() {
        return {
          x: 10,
          y: 20
        }
      }
    })

    // 给vue原型上添加一个方法
    Vue.prototype.hello = ()=>{alert('hello...')}
  }
}

然后就可以在组件中使用了

// a组件
<input type="text" v-fbind:value="100" />

// b组件
<h2>地理位置：{{广东xxx | mySlice}}</h2>