vue 自定义指令

最新推荐文章于 2022-03-24 22:56:15 发布

天马行空zqzq

最新推荐文章于 2022-03-24 22:56:15 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/107239345

版权

自定义指令：在vue中，除了可以使用它提供的内置指令，还可以自己定义一些指令
自定义指令用于不可避免要操作dom元素时，把它放在自定义指令中
自定义指令后面可以跟一个布尔值，让满足条件的元素执行这个自定义指令

如：v-my-focus="true"

此时binding.value = true

自定义聚焦指令不能放在bind钩子函数里

注册自定义指令：
①包括全局注册和局部注册
全局注册在任何组件中都可以使用
局部注册只能在当前组件中使用
如果在多个组件中同时使用这个指令，就把它注册成全局的
如果只在一个组件总使用，就把它注册成局部的
注册：
1、先注册自定义属性，再绑定要遍历的盒子

2、在注册时，名字可以随便取，但在绑定时，前面必须加 v- 前缀

如果是驼峰命名，在绑定时必须把大写字母改小写，并用 - 连接单词

3、绑定时，el是绑定的元素，binding是一个对象，对象里面有很多属性，其中 value 指的是绑定的值

4、指令对象含四个钩子

①bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置，比如css样式。

②inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)，和js相关的操作放在inserted里。

同点：都只执行一次，以后再也不会被调用了，前两个的区别是：前者不能拿到父元素，后者可以

③update：节点更新前调用，但很可能发生在它的子节点更新前

如果里面的函数简写，自动调用bind和updata，因为它们一般情况下都执行相同的内容

如：

Vue.directive('my-bind', function () {

……

})

④componentUpdated：节点更新后调用

③和④基本一样，都是在该指令的模板更新时调用，区别在于模板内容不一样

⑤unbind：只调用一次，指令和元素解绑时调用。比如前面制定了定时器，则在最后把定时器清除

调用：

<div id="app">
		<!-- 模拟实现v-show -->
		<div v-myshow="seen" class="box" id="app">{{ seen }}</div>
	</div>

Vue.directive('myshow', {
  		bind: function (el, binding) {
  			console.log(el, binding)
  			if (binding.value) {
  				el.style.display = 'block'
  				console.log(binding.value)
  			} else {
  				el.style.display = 'none'
  				console.log(binding.value)
  			}
  		},
  		inserted: function (el, binding) {
  			console.log(el, binding)
  		},
  		update: function (el, binding) {
  			console.log(el, binding)
  			if (binding.value) {
  				el.style.display = 'block'
  				console.log(binding.value)
  			} else {
  				el.style.display = 'none'
  				console.log(binding.value)
  			}
  		},
  		componentUpdated: function (el, binding) {
  			console.log(el, binding)
  		},
  		unbind: function (el, binding) {
  			console.log(el, binding)
  		},
	})
	window.app = new Vue({
		el: '#app',
		data: {
			seen: true
		}
	})

局部自定义指令：
全局的自定义指令可以在所有的实例里面使用，局部的只能在当前实例里面使用

<body>
    <div id="app">
        <span v-my-color>哈哈，是的嘛</span>
    </div>

    <div id="app1">
        <span v-my-color>哈哈，是的嘛</span>  
    </div>

    <script src="lib/vue.js"></script>
    <script>
        //全局自定义指令：在所有实例里面都可以用
        Vue.directive('my-color', {
            bind: function (el, binding) {
                el.style.color = 'pink'
                console.log(binding)
            }
        })
        var app = new Vue({
            el: '#app'
        })
        var app1 = new Vue({
            el: '#app1',
            // 局部自定义指令：只能在这个实例里面使用
            directives: {
                // 缩写的默认执行bind和update
                // 'my-color': function (el, binding) {
                //     el.style.color = 'red'
                // }
                'my-color': {
                    bind: function (el, binding) {
                        el.style.color = 'red'
                    }
                }
            }
        })
    </script>
</body>

天马行空zqzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 自定义指令

自定义指令：在vue中，除了可以使用它提供的内置指令，还可以自己定义一些指令自定义指令用于不可避免要操作dom元素时，把它放在自定义指令中注册自定义指令：①包括全局注册和局部注册全局注册在任何组件中都可以使用局部注册只能在当前组件中使用如果在多个组件中同时使用这个指令，就把它注册成全局的如果只在一个组件总使用，就把它注册成局部的注册：1、先注册自定义属性，再绑定要遍历的盒子2、在注册时，名字可以随便取，但在绑定时，前面必须加 v- 前缀如果是驼峰命名，在绑定时必须把大写字母改小写，
复制链接

扫一扫