作用:
步骤:第一步在入口文件main.js平级位置定义一个插件,文件为xxx.js
export default{
install(Vue,x,y,z){
//传递的参数
console.log(x,y,z);
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
// 定义全局指令
Vue.directive('fbind',{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,){
element.focus()
},
// 指令所在的模板被重新解析是
updated(element,binding) {
element.value = binding.value
}
})
// 定义混入
Vue.mixin({
data(){
return{
x:100,
y:200
}
}
})
// 给Vue原型上添加一个方法(vm和vc就能用了)
Vue.prototype.hello = ()=>{alert('原型上的方法')}
},
}
第二步在入口文件main.js中引入插件
// 该项目的入口文件
import Vue from 'vue'
// 引入App组件 他是说要组件的父组件
import App from './App.vue'
// 引入自定义插件
import plugins from './plugins'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 应用插件
Vue.use(plugins,1,2,3)
// 创建Vue实例对象 --vm
new Vue({
el:'#app',
// 完成了将App组件放入容器中
render: h => h(App),
})
功能:用于增强Vue
本质:包含install方法的一个对象 install第一个参数是Vue 第二个以后的参数是插件使用者传递的数据。
定义插件:
对象.install = function(Vue.options){
//1.添加全局过滤器
Vue.fillter(…)
//2.添加全局指令
Vue.directive(…)
//3.配置全局混入
Vue.mixin(…)
//4.添加实例方法
Vue.prototype.
m
y
M
e
t
h
o
d
=
f
u
n
c
t
i
o
n
(
)
.
.
.
V
u
e
.
p
r
o
t
o
t
y
p
e
.
myMethod = function(){…} Vue.prototype.
myMethod=function()...Vue.prototype.myProperty = xxxx
}
使用插件:Vue.use()
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163347.html
