<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="16插件.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-my-directive='msg'></p>
</div>
<script type="text/javascript">
// 声明使用插件
Vue.use(MyPlugin) //内部会执行MyPlugin。install（Vue）
Vue.myGlobalMethod()
const vm=new Vue({
el:"#app",
data:{
msg:"I LIKE YOU"
}
})
vm.$myMethod()
</script>
</body>
</html>
16插件.js
(function(){
// 需要向外暴露插件对象
const MyPlugin={}
// 插件对象必须有一个install
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
console.log("Vue函数对象的方法myGlobalMethod ")
}
// 2. 添加全局资源
Vue.directive('my-directive', function(el,binding){
el.textContent=binding.value.toUpperCase()
})
// 3. 注入组件选项
// Vue.mixin({
// created: function () {
// // 逻辑...
// }
// ...
// })
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {
console.log("Vue添加实例方法")
}
}
window.MyPlugin=MyPlugin
})()