https://www.bootcdn.cn/ 前端资源库
<!--
常用内置指令
v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
-->
<js>
vue-myPlugin.js
/*
vue插件库
*/
(function (window) {
//需要向外部暴露插件对象
const MyPlugin={}
//插件必须有install
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
console.log("vue函数对象的方法myGlobalMethod执行了")
}
// 2. 添加全局资源 自定义指令
Vue.directive('my-directive', function (el,binding) {
el.textContent=binding.value.toUpperCase()
})
// 4. 添加实例方法 实例方法放在原型上
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
console.log("vue实例对象$myMethod执行了")
}
}
//向外暴露插件
window.MyPlugin=MyPlugin
})(window)
测试页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义插件</title>
</head>
<body>
<div id="test">
<p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/vue-myPlugin.js"></script>
<script>
//声明使用插件
Vue.use(MyPlugin)
const vm=new Vue({
el: '#test',
data: {
msg: "I like You"
}
})
vm.$myMethod();
</script>
</body>
</html>