您的位置:首页 > Web前端 > Vue.js

Vue.js基础_自定义插件

2019-08-07 15:53 1131 查看

自定义插件

vue-mycj.js

 

[code](function () {
//需要向外暴露的插件对象
const MyPlugin={}
//插件对象必须有一个Install()
MyPlugin.install=function (Vue,options) {
//1.添加全局方法或属性
Vue.myGlobalMethod=function () {
console.log('Vue函数对象的方法myGlobalMethod()')
}
//添加全局资源
Vue.directive('my-directive',function (el,binding) {
el.textContent=binding.value.toUpperCase()
})
//添加实例方法
Vue.prototype.$myMethod=function () {
console.log('Vue实例对象的方法$myMethod()')
}
//向外暴露

}
window.MyPlugin=MyPlugin

})()

html代码

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-mycj.js"></script>
</head>
<body>
<div id="demo">
<p v-my-directive="msg"></p>
</div>
</body>
<script>
//声明使用插件
Vue.use(MyPlugin)//内部会执行MyPlugin.install(Vue)
//使用全局方法
Vue.myGlobalMethod()
const vm=new Vue({
el:'#demo',
data:{
msg:'i love you!'
}
})
//使用实例方法
vm.$myMethod()
</script>
</html>

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: