Vue.js自定义指令

最新推荐文章于 2024-07-19 14:16:29 发布

Tseng777

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量68

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/Tseng777/article/details/118529505

版权

tips:有三类钩子函数:自定义指令的钩子函数;生命周期的;路由的.在这里聊一聊自定义指令的钩子函数.

vue#钩子函数连接vuejs.org,API,5个钩子函数,和4个钩子函数公用参数.

1.先介绍各个钩子函数的用法,对其中inserted进行设置,这里Hollow World变红

el：指令所绑定的元素，可以用来直接操作 DOM。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创将一个v-red自定义指令 -->
    <div id="app">
        <p v-red>Hellow World</p>

        <!-- 页面重新渲染 DOM改变 update  componentUpdated两个方法都不会生效 -->
        <p>{{i}}</p>
        <button @click="i++">i++</button>
    </div>
    <script src="../practice/vue.js"></script>
    <script>
    const app = new Vue({
        el:'#app',
        data() {
            return {
                i:1,
            };
        },
        directives:{//它的值是一个对象
            //一个指令定义对象  提供了5个钩子函数(可选)
            //v-是前缀  这里写red
            red:{//需要在red中声明钩子函数
                
                bind(){//bind 第一次绑定  只执行一次
                    console.log('触发bind...')
                },
                inserted(el){//inserted 这个被绑定元素 虚拟DOM被Vue插入到父元素中
                    console.log('触发inserted...')
                    el.style.color = 'red'
                },
                update(){//虚拟DOM将要更新时
                    console.log('触发update...')
                },
                //后两种在组件开发中使用
                componentUpdated(){//指令所在组件的 VNode 及其子 VNode 全部更新后调用。
                    console.log('触发componentUpdated...')
                },
                unbind(){//只调用一次，指令与元素解绑时调用。
                    console.log('触发unbind...')
                }
            }
        }
    })
    </script>
</body>
</html>

2.现在设置一个v-color="blue",可以在里边随意设置颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
        <!-- 注意这里pink多了个单引号  
        指令里面---双引号里面是变量 也可以放一个js表达式 字符串-->  
			<div v-color="'pink'">测试</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {

				},
				directives: {
					color: {
						inserted(el,binding){
							// console.log(binding)
							el.style.color = binding.value
						}
					}
				},	
			})
		</script>
	</body>
</html>

Tseng777

关注

0
点赞
踩
0

收藏

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

tips:有三类钩子函数:自定义指令的钩子函数;生命周期的;路由的.在这里聊一聊自定义指令的钩子函数.vue#钩子函数连接vuejs.org,API,5个钩子函数,和4个钩子函数公用参数.1.先介绍各个钩子函数的用法,对其中inserted进行设置,这里Hollow World变红el：指令所绑定的元素，可以用来直接操作 DOM。 <!DOCTYPE html><html lang="en"><head> <meta charse.
复制链接

扫一扫