Loading

详解 Vue 如何自定义指令

Vue的内置指令比较多：例如：v-if 、v-show、v-text、v-html、ref、v-cloak（防止闪现）等等。

Vue如何自定义指令，本节小课详细介绍：

一：注册全局指令（整个Vue实例）

//所有的Vue 实例都能使用
Vue.directive('指令名', function (el, binding){//指令名（v-后面的部分） el 是当前指令所在的标签对象  binding包含指令信息的对象
    //处理数据
})

el 和 binding 分别是：

举例：

<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body style="text-align: center">

    <div id="directive1">
        <p v-upper-first-text="msg1">你好～{{msg1}}</p>
    </div>
    <div id="directive2">
        <p v-upper-first-text="msg2">你好～{{msg2}}</p>
    </div>

</body>
</html>
<script>
    //注册全局指令 （directive1、directive2的Vue实例都能使用）
    Vue.directive('upper-first-text', function (el, binding){//el 是当前指令所在的标签对象  binding包含指令信息的对象
        //处理数据 (单词首字母大写)
        el.textContent = binding.value.toLowerCase().split(' ').map(
            word => word.charAt(0).toUpperCase() + word.slice(1)
        ).join(' ');
    })
    
    new Vue({
        el:'#directive1',
        data:{
            msg1:'i`m carver1 and i`am a programmer'
        }
    })

    new Vue({
        el:'#directive2',
        data:{
            msg2:'i`m carver2 and i`am a programmer',
            msg3:'world'
        }
    })
</script>

二：注册局部指令（指定Vue实例）

//只能对指定的Vue实例起作用
directives:{
   '指令名':{
       bind (el ,binding){//el 是当前指令所在的标签对象  binding包含指令信息的对象
           //处理数据
       }
    }
}

举例：

<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body style="text-align: center">

    <div id="directive1">
        <p v-upper-first-text="msg1">你好～{{msg1}}</p>
    </div>
    <div id="directive2">
        <p v-upper-first-text="msg2">你好～{{msg2}}</p>
        <p v-upper-all-text="msg3">你好！{{msg3}}</p>
    </div>

</body>
</html>
<script>
    //注册全局指令
    Vue.directive('upper-first-text', function (el, binding){//el 是当前指令所在的标签对象  binding包含指令信息的对象
        //处理数据（单词首字母大写）
        el.textContent = binding.value.toLowerCase().split(' ').map(
            word => word.charAt(0).toUpperCase() + word.slice(1)
        ).join(' ');
    })
    new Vue({
        el:'#directive1',
        data:{
            msg1:'i`m carver1 and i`am a programmer'
        }
    })

    new Vue({
        el:'#directive2',
        data:{
            msg2:'i`m carver2 and i`am a programmer',
            msg3:'world'
        },
        directives:{//注册局部指令（只有directive2的Vue实例才能使用，其他directive1的Vue实例不能使用）
            'upper-all-text':{
                bind (el ,binding){//el 是当前指令所在的标签对象  binding包含指令信息的对象
                    //处理数据（文本全部大写）
                    el.textContent = binding.value.toUpperCase();
                }
            }
        }
    })
</script>

基本的使用已经完成✅

posted @ 2023-02-13 12:35  LiJialong  阅读(90)  评论(0)  编辑  收藏  举报