vue 自定义插件简单使用

最新推荐文章于 2023-10-10 11:18:44 发布

ace_TiAmo

最新推荐文章于 2023-10-10 11:18:44 发布

阅读量110

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/ace15824843202/article/details/100034768

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义插件</title>
</head>
<body>

 <div id="demo">
     <p v-my-directive="msg"></p>
 </div>
<script src="../js/vue.js"></script>
<script src="./vue-myplugin.js"></script>
<script>
//    声明使用插件
    Vue.use(MyPlugin);
    Vue.myGlobalMethod();

    const vm = new Vue({
        el:"#demo",
        data:{
            msg:'I am winner'
        }
    })
    vm.$myMethod()
</script>
</body>
</html>

/**
 * Created by lean on 2019/8/23.
 */
(function() {
    //声明插件对象
    const MyPlugin={};
    //插件对象必须有一个install方法
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
            // 逻辑...
            console.log('Vue函数对象的myGlobaMethod全局方法')
        }

        // 2. 添加全局资源
        Vue.directive('my-directive',
            function(el, binding, vnode, oldVnode) {
                // 逻辑...
                el.textContent = binding.value.toUpperCase();
            }
        )

        // 3. 注入组件选项
        // Vue.mixin({
        //     created: function () {
        //         // 逻辑...
        //     }
        //     ...
        // })

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
            // 逻辑...
            console.log('Vue实例的myMethod方法')
        }
    }
    //向外暴露插件
    window.MyPlugin = MyPlugin;
})()