Vue 自定义指令

一、定义语法

1、局部

复制代码
// 简单，只需要指令语法绑定元素和指令语法所在模块加载时使用
nev Vue({
   ...,
   directives:{
       // element指令绑定的dom，binding获取value   
       指令名(element, binding){
    },    
    },  
}
// 详细，指令绑定元素、元素加载到页面、指令所在页面加载
new Vue({
   ...,
   directives:{
     指令名:{
     //指令与元素绑定 
     bind(element,binding){},
     //元素加载页面 
     instered(element,binding){},
     //指令所在模块重新解析
     update(element,binding){}   
},     
    }  
})
复制代码

2、全局

//简单
Vue.directive('指令名',function(element, binding){})
//复杂
Vue.directive('指令名',{
    bind(element, binding){},
    instered(element, binding){},
    update(element, binding){}    
})

二、指令名

指令名格式： v-xx-xx

定义指令： xx-xx，注意如果中间有-，用'xx-xx'，本身就是键值对

简单

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令-简单</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 定义v-big指令，与v-text类似，把值放大10倍 -->
    <div id="container">
        v-text值： <span v-text="num"></span> <br><br>
        v-big 值： <span v-big="num"></span> <br><br>
        <button @click="num++">点击</button>
    </div>  

    
    <script type="text/javascript">
        //全局
        Vue.directive('big', function(element, binding){
            element.innerText=binding.value * 10
        })
        new Vue({
            el:'#container',
            data:{
                num:1,
            },
            // directives:{
            //     // 局部 element 当前标签的dom结构, binding提供值等
            //     big(element, binding){
            //         element.innerText=binding.value * 10
            //     }
            // },
        })
    </script>  
</body>
</html>
复制代码

复杂

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令-复杂</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 定义v-fbind指令，与v-bindt类似，所绑定的input元素默认获取焦点 -->
    <div id="container">
        数据的值：<input type="text" v-fbind:value="num"> <br>
        <button @click="num++">点击</button>
    </div>  

    
    <script type="text/javascript">
        //全局
        Vue.directive('fbind',{
            // 指令与元素刚绑定
            bind(element, binding){
                element.value = binding.value
            },
            // 指令绑定的元素加载到页面
            inserted(element, binding){
                //焦点
                element.focus()
            },
            // 指令所在的模版重新解析
            update(element, binding){
                element.value = binding.value
            }
        })

        new Vue({
            el:'#container',
            data:{
                num:1,
            },
            // directives:{
            //     // 局部 三个函数 bind inserted update
            //     fbind:{
            //         //指令与元素绑定时
            //         bind(element, binding){
            //             element.value = binding.value
            //         },
            //         //指令所在的元素被插入页面时
            //         inserted(element, binding){
            //             element.focus()
            //         },
            //         // 指令所在模版重新解析时
            //         update(element, binding){
            //             element.value = binding.value
            //         }
            //     }
            // },
        })
    </script>  
</body>
</html>
复制代码

 

posted @   市丸银  阅读(8)  评论(0)  编辑  收藏  举报
相关博文：
· Vue 内置指令
· Vue 模版语法
· Vue 自定义指令
· Vue.js 自定义指令 函数式&对象式
· 20-Vue核心-自定义指令
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示