Vue学习笔记 —— Vue.directive自定义指令

最新推荐文章于 2022-11-18 10:02:34 发布

莫非C

最新推荐文章于 2022-11-18 10:02:34 发布

阅读量193

点赞数

分类专栏： Vue.js学习笔记 JS 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43340295/article/details/108628388

版权

Vue.js学习笔记同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

Vue.directive —— 自定义指令

Vue中除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令，可以对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。

创建全局自定义指令

使用Vue.directive()创建全局自定义指令。其中my-color为指令名称。
定义指令名称的时候，不需要加v-前缀，调用的时候，必须在名称前加上v-。

Vue.directive('my-color', function(el, binding, vnode){
    // el: 指令所绑定的元素，可以用来操作dom
    // binding: 一个对象，包含指令的信息（属性）
    // vnode: Vue生成的虚拟节点
})

使用自定义指令设置背景颜色和文本。

   <div id="app">
       // 指令函数可以接受合法的javaScript表达式
       <h4 v-run="{text: 'blue', color: 'pink'}"></h4>
   </div>
   
   <script>
	    Vue.directive("v-run", function(el, binding{
	    	// 设置背景颜色和文本
			el.innerHTML = binding.value.text;
			el.style.backgroundColor = binding.value.color;
		}))
	</script>

创建局部自定义指令

组件或Vue构造函数中接受一个 directives 的选项。

   <div id="app">
	   <span v-tc="{myColor: 'green'}">局部自定义指令</span>
   </div>
   
   <script>
		var app = new Vue({
	        el:"#app",
	        data:{
	        	isShow: true
	        },
	        // 局部自定义指令
	        directives: {
				'tc': {		//指令名称
					bind: function(el, binding){
						el.style.color = binding.value.myColor
					}
				}
			}
    	})
	</script>

然后可以在模板中任何元素上使用自定义指令。

//调用:
<h1 v-my-color>自定义指令</h1>

自定义指令的生命周期

自定义指令有5个生命周期(也叫作钩子函数)分别是：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode
更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。(解绑元素需要移除dom，否则unbind不会被调用。绑定一个类似开关一样的值，通过改变这个值来达到的效果，比如：v-if和v-show)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
   
       <span v-hello="color3" v-if="isShow">{{message}}</span>
       <button @click="add"> 点击开始加1</button>
       <button onclick="jiebang()">解绑</button>
       
       // 指令函数可以接受合法的javaScript表达式
       <h4 v-run="{text: 'blue', color: 'pink'}"></h4>

	   // 使用局部自定义指令
	   <span v-tc="{myColor: 'green'}">局部自定义指令</span>
   </div>
</body>
<script>
    function jiebang(){
        this.isShow = !this.isShow；
    }
    
    // 全局自定义指令
    Vue.directive("v-run", function(el, binding{
    	// 设置背景颜色和文本
		el.innerHTML = binding.value.text;
		el.style.backgroundColor = binding.value.color;
	}))
	
    Vue.directive("hello",{
        bind:function(el,bingind,vnode){
        	// bingind.value 指令绑定的值
            el.style["color"] = bingind.value;
            console.log("1-bind");
        },
        inserted:function(){
            console.log("2-insert");
        },
        update:function(){
            console.log("3-update");
        },
        componentUpdated:function(){
            console.log('4 - componentUpdated');
        },
        unbind:function(){
            console.log('5 - unbind');
        }
    })
    
    var app = new Vue({
        el:"#app",
        data:{
        	isShow: true,
            message:10,
            color3:"red"，
            myColor: "blue"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }，
        //定义局部自定义指令
        directives: {
			'tc': {		//指令名称
				bind: function(el, binding){
					el.style.color = binding.value.myColor
				}
			}
		}
    })
</script>
</html>

莫非C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记 —— Vue.directive自定义指令

Vue.directive —— 自定义指令Vue中除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令，可以对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。创建全局自定义指令使用Vue.directive()创建全局自定义指令。其中my-color为指令名称。定义指令名称的时候，不需要加v-前缀，调用的时候，必须在名称前加上v-。Vue.directive('my-color', function(el, binding, vnode){
复制链接

扫一扫