1、新建一个vue插件
/*定义一个插件*/
(function() {
//向外暴露的插件对象
const MyPlugin = {};
//插件对象必须有一个install()
MyPlugin.install = function(Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function() {
// 逻辑...
console.log("全局方法myGlobalMethod()");
}
// 2. 添加全局资源
Vue.directive('my-directive', function(el, binding){
el.innerText = binding.value.toLowerCase();
});
// 3. 注入组件
Vue.mixin({
created: function() {
// 逻辑...
}
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function(methodOptions) {
// 逻辑...
console.log('vue实例对象$myMethod()');
}
}
//向外暴露插件
window.MyPlugin = MyPlugin;
})()2、页面上引用及使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="static/vue-plugin.js"></script> <!--引用插件-->
</head>
<body>
<div id="app">
<p v-my-directive="mess"></p>
</div>
<script>
//声明使用插件
Vue.use(MyPlugin)
Vue.myGlobalMethod();
const vm = new Vue({
el: '#app',
data: {
mess: 'Hello World!'
}
});
//调用实例方法
vm.$myMethod();
</script>
</body>
</html>
扫一扫
2096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
