Vue学习第13天——vue中使用自定义插件

插件定义

插件通常用来为 Vue 添加全局功能。

功能

增强Vue

本质

插件本质是一个对象。
准确的说是暴露一个install 方法的对象。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象（插件的使用者传递的数据）

定义插件

① 在项目中的src目录下，新建一个plugins.js的文件

export default {
    install(Vue,options){
    }
}

② 在插件内写配置项
插件中添加了过滤器、自定义指令、混入、实例方法

//定义一个插件
export default {
    install(Vue){
        //定义过滤器(显示四个字)
        Vue.filter("fourWord",function(val){
          return  val.slice(0,4)
        }),

        //添加全局自定义指令（类似于v-bind，可以获取焦点）
        Vue.directive("fbind",{
            fbind:{
                bind(element,binding){
                    element.vaiue=binding.value;
                },
                inserted(element){
                    element.focus()
                },
                update(element,binding) {
                    element.vaiue=binding.value;
                },
            }
        }),
        
        //配置全局混入（mixin）
        Vue.mixin({
            data(){
                return {
                    name:"憨瓜"
                }
            }
        })

        //添加实例方法
        Vue.prototype.$myMethod=function(){
        	console.log(this);
		}
    }
}

使用插件

①在main.js文件中使用插件引入插件

import plugins from "./plugins";

②使用插件

Vue.use(plugins)

main.js文件中代码

//引入vue
import Vue from "vue";

import App from "./App";

//引入插件
import plugins from "./plugins";
//使用插件
Vue.use(plugins)

new Vue({
    render:h=>h(App),
}).$mount("#app")