methods vue过滤器 和_拍一拍vue插件插件的实现方式

什么是插件

1.什么是插件？

官方解释 插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制---一般有下面几种

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

• 添加全局资源：指令|过滤器|过渡等 如vue-touch

• 通过全局混入来添加一些组件选项 如vue-router

• 添加Vue实例方法 通过他们添加到Vue.property上实现

• 一个库 提供自己的API 同时提供上门提到的一个或多个功能 如 vue-router

插件分类

vue插件的编写方法一般分为4类，如上图所示。主要注册与绑定机制如下：

 export default {    install(Vue, options) {        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如:  vue-custom-element            // 逻辑...        }        Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch            bind (el, binding, vnode, oldVnode) {                // 逻辑...            }            ...        })        Vue.mixin({            created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex                // 逻辑...            }            ...        })            Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现            // 逻辑...        }    }}

上方代码使用了es6部分语法列出了4种编写插件的方法，而install是注册插件主要调用的方法，包含了两个参数(Vue实例和自定义配置属性options)，我们可以将以上代码存储到plugins.js中。

插件的使用方法

通过全局方法Vue.use()使用插件。它需要在腻调用new Vue()之前完成

import MyPlugin from './plugins/plugins.js'    //调用Myplugin.install(Vue)    vue.use(Myplugin)    new Vue({        //...组件选项    })

为防止多次注册同一个插件 ：我们可以传递一个可选的对象

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

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

vue插件的编写方法

上面我们提到了插件编写的四种方式，接下来我们对其一一讲解：

1.添加全局方法或者属性

  export default {        install(Vue, options) {            Vue.$myTitle = '标题';        }    }

在install方法中，我们直接在Vue实例上声明了$myTitle属性并进行了赋值，当该插件注册后只要存在Vue实例的地方你都可以获取到Vue.$myTitle的值，因为其直接绑定在了Vue实例上。 

2.添加全局资源

 export default {    install(Vue, options) {        Vue.directive('focus', {            bind: function() {},            // 当绑定元素插入到 DOM 中。            inserted: function(el, binding, vnode, oldVnode) {                // 聚焦元素                el.focus();            },            update: function() {},            componentUpdated: function() {},            unbind: function() {}        });    },}

添加全局资源包含了添加全局的指令／过滤器／过渡等，上方代码我们通过Vue.directive()添加了一个全局指令v-focus，其主要包含了5种方法，其中inserted代表当绑定元素插入到 DOM 中执行，而el.focus()代表聚焦绑定的元素，这样如果我们在一个input输入框上绑定该指令就会自动进行focus聚焦。

3.添加全局mixin方法

  export default {    install(Vue, options) {        Vue.mixin({            methods: {                greetingFn() {                    console.log('greeting');                }            }        });    },}

mixin代表混合的意思，我们可以全局注册一个混合，其会影响注册之后创建的每个 Vue 实例，上方代码注册后会在每个组件实例中添加greetingFn方法，在单文件组件中可以直接通过this.greetingFn()调用。当然如果实例中存在同名方法，则mixin方法中创建的会被覆盖，同时mixin对象中的钩子将在组件自身钩子之前调用。

4.添加实例方法

 export default {    install(Vue, options) {        Vue.prototype.$myTitle = '标题';        Vue.prototype.showMyTitle = value => {            console.log(value);        };    },}

添加实例方法是最常用的一种方法，其直接绑定在vue的原型链上，我们可以回想一下 JS 里的类的概念。实例方法可以在组件内部，通过this.$myMethod来调用。