vue使用插件和自定义插件
自定义一个插件.js
(function(){
//需要向外暴露的插件对象
const MyPlugin={};
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
console.log("------");
console.log(Vue)
console.log("myGlobalMethod");
}
// 2. 添加全局资源
//自定义指令
Vue.directive('my-up', {
bind (el, binding, vnode, oldVnode) {
el.textContent=binding.value.toLowerCase();
}
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
console.log("$myMethod")
}
}
window.MyPlugin=MyPlugin
})()
使用自定义的插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
<script src="js/vue-plugin.js"></script>
</head>
<body>
<div id="app">
<span v-my-up="msg"></span>
</div>
<script>
//声明使用插件
Vue.use(MyPlugin);//内部会调用 install方法 传入Vue
Vue.myGlobalMethod();//调用全局方法
var v=new Vue({
el:'#app',
data:{
msg:'This is China'
}
})
v.$myMethod();//调用对象方法
</script>
</body>
</html>
fixed
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。