vue 的自定义指令

lh15766518127

已于 2024-07-12 13:21:31 修改

阅读量213

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-07-12 12:38:04 首次发布

本文链接：https://blog.csdn.net/lh15766518127/article/details/140376007

版权

具体解说在代码中了，建议自己运行一遍，看后台输出更容易理解

函数式与对象式都有涉及

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue自定义指令</title>
</head>

<body>
    <div id="app">
        <p>vue自带的的指令</p>
        <h3 v-html="test"></h3>
        <h3 v-text="test" v-bind:type="test"></h3>
        <!-- 这里主要讲vue的自定义指令，vue本身自带的就不多描述了 -->
        <hr>
        <p>自定义指令</p>
        <h3 v-h3="num"></h3>

        <input type="text" v-input="num2">

    </div>


    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    test: "你好",
                    num: 1,
                    num2: "哈哈"
                }
            },
            //自定义指令(函数式 和 对象式 都是在directives)
            //要用directives:{}的形势，用directives(){}无法显示(element 和 binding) 
            directives: {
                //1.v-h在初始化的时候执行，
                //2.v-h在重新渲染时候执行
                //自定义指令-函数式
                h3(element, binding) {
                    console.log("element", element); // element 拿到的是当前标签的的对象（这里是<h3></h3>）
                    console.log("binding", binding); // binding 拿到的是 num 的值，要用.value来使用
                    element.innerText = binding.value
                },



                //对象式
                input: {
                    //三个函数：bind:绑定，inserted:插入文档后，update:数据或页面更新
                    bind(element, binding) {
                        // element 和 binding 拿到的东西和上面一样
                        console.log("element", element);
                        console.log("binding", binding);
                        element.value = binding.value
                    },
                    inserted(element, binding) {
                        // element 和 binding 拿到的东西和上面一样
                        console.log("element", element);
                        console.log("binding", binding);
                        element.focus()
                    },
                    update(element, binding) {
                        // element 和 binding 拿到的东西和上面一样
                        console.log("element", element);
                        console.log("binding", binding);
                        element.value = binding.value
                    }
                }

            },
            // 2秒后修改num的值，使其重新渲染
            mounted() {
                setTimeout(_ => {
                    app.num = 3
                    app.num2 = "嘻嘻"
                }, 2000)
            },
        })
    </script>
</body>

</html>

开始的页面效果