vuex 插件
1、Vue.use(xx);
(1)实质是:调用xx.install(Vue)
(2)在new Vue()之前使用
2、语法
let xx={
install:function(Vue)
{
(1)定义的指令和混合mixin可直接使用
(2)Vue.x定义的方法或变量只能在插件中使用
(3)Vue.prototype.$xx,定义的方法或变量,在全局this.$xx使用
}
}
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id='app'>
//使用插件内的指令、方法、变量
<div v-my-directive >
{{this.$my()}}
</div>
{{this.$color}}
</div>
<script>
let lcPlugin={
install:function(Vue)
{
console.log('安装插件')
//添加全局方法
Vue.myGlobalMethod=function(){
console.log(1);
document.body.style.color='red';
};
//添加全局属性
Vue.prototype.$color='red';
//添加全局指令
Vue.directive('my-directive',{
bind(el,binding,vnode,oldnode){
el.innerHTML='哈哈';
}
});
//注入混合属性
Vue.mixin({
created:function(){
console.log('生命周期');
}
});
//添加示例对象方法
Vue.prototype.$my=function(){
console.log(this);
console.log(2);
Vue.myGlobalMethod()
}
}
}
Vue.use(lcPlugin);
let app=new Vue({
el:'#app'
})
</script>
</body>
</html>
