master

分支 (1)

管理

管理

master

learn-vue
/
demo_015.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <!-- Vue全局指令 -->
    <!-- 需求： 要求一进入，就让以下的输入框，立刻获取到焦点 -->
    <div id="app">
        <input type="text" >
        <input type="text" >
        <input type="text" v-focus v-mycolor="'blue'" >
    </div>
    <script>

        // 定义一个Vue全局指令, 以下的focus就是本次定义的全局指令的名字
        // 在使用使用指令的时候，必须在指令前加上“v-”
        Vue.directive("focus", {
            // bind函数的执行时机，是元素被绑定上指令之时，就执行。
            // 此时元素并没有加入DOM中。参数el就是使用当前指令的元素，且el代表的元素还是一个原生的DOM对象
            bind: function(el) {
                el.style.backgroundColor = "lightblue";
                console.log("bind...");
            },
            // inserted函数的执行时机，是元素已经被加入到DOM以后，才执行。
            inserted: function(el) {
                 el.focus();
                console.log("inserted");
            }
        });


        // 总之，bind合适操作元素的样式， inserted函数更适合使用js操作DOM元素
        var app = new Vue({
            el: "#app",
            data: {
                msg: "aaaa"
            },
            // 私有指令
            directives: {
                "mycolor":  {
                    bind(el,binding) {
                        el.style.color = binding.value;
                    }
                }
            }
        });
    </script>

</body>
</html>