Vue之插件 



(function (){
    //需要对外暴露的插件对象
    const MyPlugin={}

    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();
        })


// 4. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
            console.log('添加实例方法')
        }
    }

    //向外暴露
    window.MyPlugin=MyPlugin
})()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test">
<p my-directive="msg"></p>
</div>

<script src="../js/vue.js"></script>
<script src="./vue-muPlugin.js"></script>
<script>
  Vue.use(MyPlugin)

  Vue.myGlobalMethod()

 const vm= new Vue({
    el:'#test',
    data:{
      msg:'I Like You'
    }
  })
  vm.$myMethod()
</script>
</body>
</html>
posted @ 2021-07-13 01:19  King-DA  阅读(16)  评论(0)    收藏  举报