vue-自定义指令

最新推荐文章于 2023-09-21 09:41:04 发布

@Tiramisu

最新推荐文章于 2023-09-21 09:41:04 发布

阅读量84

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105038952

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

自定义指令介绍 directives
钩子函数

参数 el,binding,vnode(vnode.context)
bind,inserted,update,componentUpdated,unbind

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <div v-hello="'red'">111111</div>
        <!--"red"会被当成变量-->
        <div v-hello="'yellow'">2222222</div>
        <div v-hello="mycolor">3333333</div>
    </div>

    <script type="text/javascript">
        // v-if="isShow" v-for v-model v....
        // v-kerwin v-swipe  操作底层dom   自定义指令
        Vue.directive("hello", {
            inserted(el, bind) {
                // 指令-生命周期-创建
                // inserted()插入 
                // console.log("当前节点插入到父节点了")  //测试
                // console.log(el);//底层
                // console.log(bind);//对象
                // console.log(bind.value);
                el.style.background = bind.value
            },
            update(el, bind) {
                // 指令-生命周期-更新
                el.style.background = bind.value
            }
        })
        var vm = new Vue({
            el: "#box",
            data: {
                mycolor: "red"
            }
        })

    </script>
</body>
</html>

vm.mycolor="yellow"
"yellow"
vm.mycolor="blue"
"blue"
vm.mycolor="grey"
"grey"
vm.mycolor="green"
"green"
vm.mycolor="orange"
"orange"

@Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录