插件定义
插件通常用来为 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")