Vue自定义指令和插件

最新推荐文章于 2024-09-14 02:26:09 发布

键盘歌唱家

最新推荐文章于 2024-09-14 02:26:09 发布

阅读量538

点赞数

分类专栏： html5 文章标签： vue javascript js

本文链接：https://blog.csdn.net/MoastAll/article/details/111581692

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue中创建自定义指令，包括全局指令和局部指令的实现，例如将文本转换为大写或小写。此外，还展示了如何编写和使用自定义插件，提供了一个模板并解释了其工作原理。通过实例代码，读者可以了解到Vue扩展功能的灵活性。

摘要由CSDN通过智能技术生成

Vue有很多默认的指令比如 v-text、v-model 、v-if 但可能这些指令依旧无法满足开发者的需求。于是我们可以自定义一下指令！

首先我们需要引入环境：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

自定义指令

指令分为全局指令和局部指令，用下面的例子，带你们开发自定义指令：

全局指令

----所有vue实例都可以使用的指令
比如我想将字符串的所有字母转为大写,书写的步骤如下：

1.注册名字为v-text-upper的指令，并实现转大写的功能

        //注册全局指令
        Vue.directive('text-upper',function(el,binding){
            el.innerHTML= binding.value.toUpperCase();
        })

2.在vue中声明一个变量，用于调用：

     new Vue({
            el: '#lzl',
            data:{
                testVariable : "Hello World",
            }
        })

在vue指定的空间中调用该指令：

    <div id="lzl">
        <p v-text-upper="testVariable"></p>
    </div>

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myself</title>
</head>
<body>
    <div id="lzl">
        <p v-text-upper="testVariable"></p>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script>  
        //注册全局指令
        Vue.directive('text-upper',function(el,binding){
            el.innerHTML= binding.value.toUpperCase();
        })

        new Vue({
            el: '#lzl',
            data:{
                testVariable : "Hello World",
            }
        })
    </script>
</body>
</html>

运行的效果如下图所示：

在这里插入图片描述

局部指定

----顾明思意，该指令只能在某个vue实例中定义并生效
比如我想将字符串的所有字母转为小写,书写的步骤如下：

1.注册局部指令，并定义测试字符串

new Vue({
            el: '#lzl',
            data:{
                testVariable : "Hello World",
            },
            //注册局部指令
            directives:{
                'text-lower' :{
                        bind(el,binding){
                            el.innerHTML= binding.value.toLowerCase();
                        }
                }
            }
        })

2.在vue指定的空间中调用该指令：

<p v-text-lower="testVariable"></p>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myself</title>
</head>
<body>
    <div id="lzl">
        <p v-text-lower="testVariable"></p>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script>  
        new Vue({
            el: '#lzl',
            data:{
                testVariable : "Hello World",
            },
            //注册局部指令
            directives:{
                'text-lower' :{
                        bind(el,binding){
                            el.innerHTML= binding.value.toLowerCase();
                        }
                }
            }
        })

    </script>
</body>
</html>

运行效果：

在这里插入图片描述

自定义插件

插件是需要自己手写的，但也不需要记。下面是本人写的模板，用的时候自己拷贝下来修改一下即可食用：
首先建议一个myPlugin.js的文件：

(function(){
  	const MyPlugin = {} ;
	MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
       alert('全局方法或属性');
    }
  
    // 2. 添加全局资源
    Vue.directive('my-directive', {//v-text-upper
      bind (el, binding, vnode, oldVnode) {
        // 逻辑...
      }
    })
  
    // 3. 注入组件选项  .每次实例vue对象中调用一次
    Vue.mixin({
      created: function () {
        // 逻辑...
        alert('mixin');
      }
    })
  
    // 4. 添加实例方法（局部）
    Vue.prototype.$myMethod = function (methodOptions) {
      // 逻辑...
      alert('局部') ;
    }
  }
  //将插件 暴露给外部使用
  window.MyPlugin = MyPlugin ;

})()

插件写好后，怎么使用？请看下方！

1.首先需要自己引入该js文件

    <script type="text/javascript" src="js/myPlugin.js"></script>

然后使用请看下面的小demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myself</title>
</head>
<body>
    <div id="lzl">
    </div>

    <script type="text/javascript" src="js/myPlugin.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        //使用插件
        Vue.use(MyPlugin);
        
        var vm = new Vue({
            el: '#lzl',
            data:{
            }
        })
        //全局：static   
        Vue.myGlobalMethod();
        //对象.方法()
        vm.$myMethod();

    </script>
</body>
</html>