Vue_1-14_Vue插件的编写和使用

最新推荐文章于 2024-03-31 09:49:46 发布

陪你去流浪_

最新推荐文章于 2024-03-31 09:49:46 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/jokerxiuka/article/details/118495200

版权

插件使用

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-my-directive="msg"></p>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-myPlugin.js"></script>
    <script>
        //声明使用插件
        Vue.use(MyPlugin)   
        //内部会执行MyPlugin.install(Vue),相当于安装插件
        Vue.myGlobalMethod() //全局方法
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello Huzi'
            }
        })
        vm.$myMethod()  //实例方法
    </script>
</body>
</html>

vue-myPlugin.js

// vue的插件库
(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实例对象的方法$myMethod()');
        }
      }
    //向外暴露
    window.MyPlugin = MyPlugin    
})()