Vue-自定义指令

最新推荐文章于 2024-03-17 12:22:11 发布

阳光葡萄

最新推荐文章于 2024-03-17 12:22:11 发布

阅读量103

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33274031/article/details/124718952

版权

<!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>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 v-color>{{msg}}</h2>
        <h3 v-color>天天向上</h3>
    </div>
    <div id="app2">
        <h2 v-color>{{msg}}</h2>
    </div>
    <script>
        // 自定义指令---实质上是自定义属性
        // 全局自定义指令和私有自定义指令
        // 全局自定义指令可以再所有的实例中使用，私有自定义指令只能在定义的实例对象中使用
        // console.dir(Vue)
        // Vue.directive("指令名称",{钩子函数}) 可以定义全局指令
        // 使用自定义指令的时 用v-*
        Vue.directive("color", { //定义的时候直接写名字就行，使用v-color
            // inserted钩子函数 
            // 作用：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
            inserted: function (el) {
                // el 指的是使用该指令的DOM元素。
                console.log(el);
                el.style.color = "red"  //利用js给DOM元素添加样式
            }
        })

        // 定义一个作用范围为app的实例对象
        new Vue({
            el: "#app",
            data: {
                msg: "好好学习"
            }
        })

        // 定义一个作用范围为app2的实例对象
        new Vue({
            el: "#app2",
            data: {
                msg: "好好学习"
            }
        })
    </script>
</body>

</html>