老杜Vue2+3 (51) 自定义指令

最新推荐文章于 2024-05-21 19:09:41 发布

破车博特

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量55

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/MsXintu/article/details/132791425

版权

1.两种自定义指令的语法格式

1.1函数式（局部指令）

注意事项：(函数式)
1.// 指令名字不需要写v-,(建议全部小写)，如果有多个单词建议使用-连接
2.// 关于这个回调函数的调用，当指令和标签进行第一次绑定的时候调用，当模板再次解析的时候调用
3.// 这个函数有两个参数，第一个参数是一个真实的dom元素，第二个参数为指令和标签的一种绑定对象

局部指令定义语法格式：
	1.需要使用新的配置项directives ：{
		 	指令名:function(element,binding){
		 }
	}

具体案例：模仿v-text从变量中取值插入到标签中，仿写一个v-text-danger (使插入的字体为red)
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="mydiv">
        <h1>自定义指令</h1>
        <h2 v-text-danger="msg"></h2>
    </div>
    
    <script>
        const vm =new Vue({
            el: '#mydiv',
            data:{
               msg:"nnbbb"
            },
            directives:{
                'text-danger':function(element,binding){
                        // element（标签<h2>）的innerText的值为binding的value，也就是data中的msg
                        element.innerText=binding.value
                        element.style.color='red'

                }
            }
        })
    </script>
</body>
</html>

1.2对象式（局部指令）

注意事项：(对象式)
1.有三个固定的函数（在不同阶段调用）
2.函数中的参数都有两个，一个element，和一个binding
如下图
在这里插入图片描述
具体案例：写一个从变量中拿取数据插入对应位置，并使父类元素背景颜色变绿的指令 v-text-bkgreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="mydiv">
        <h1>自定义指令</h1>
        <h2 v-text-danger="msg"></h2>
        <input type="text" v-text-bkgreen="msg">
    </div>
    
    <script>
        const vm =new Vue({
            el: '#mydiv',
            data:{
               msg:"nnbbb"
            },
            directives:{
                'text-danger':function(element,binding){
                        // element（标签<h2>）的innerText的值为binding的value，也就是data中的msg
                        element.innerText=binding.value
                        element.style.color='red'

                },
                'text-bkgreen':{
                    bind(element,binding){
                        element.value=binding.value
                    },

                    inserted(element,binding){
                        element.parentNode.style.backgroundColor ='green'
                    },

                    update(element,binding){
                        element.value=binding.value
                    }

                }
            }
        })
    </script>
</body>
</html>

2.定义全局指令

语法：
函数式：


Vue.directive(‘指令名’,function(element,binding){

})

对象式：

Vue.directive('指令名',{
	bind(element,binding){
	},
	inserted(element,binding){
	}
	update(element,binding){
	}
})