【Vue2.0学习】—自定义指令（四十九）-阿里云开发者社区

【Vue2.0学习】—自定义指令（四十九）

2023-12-04 68

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue2.0学习】—自定义指令（四十九）

需求：

需求1:定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍
需求2:定义一个v-fbind指令，和v-bind功能相似，但可以让其绑定的input元素默认获取焦点

<body>
    <div id="root">
        <h2>当前的n的值是：
            <span v-text="n"></span>
        </h2>
        <h2>放大10倍后的n的值是<span v-big="n"></span></h2>
        <button @click="n++">点我n++</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        // Vue.directive('fbind', {
        //         bind(element, binding) {
        //             element.value = binding.value
        //         },
        //         //指令所在元素被插入页面时
        //         inserted(element, binding) {
        //             element.focus();
        //         },
        //         // 指令所在的模板被重新解析时
        //         update(element, binding) {
        //             element.value = binding.value
        //         }
        //     })
        //big函数什么时候解析?
        // 1、指令与元素成功绑定时（一上来）
        //2、指令所在的模板被重新解析时
        const vm = new Vue({
            el: '#root',
            data: {
                n: 1
            },
            // 函数式
            directives: {
                //big函数什么时候解析?
                // 1、指令与元素成功绑定时（一上来）
                //2、指令所在的模板被重新解析时
                big(element, binding) {
                    console.log('big', this)
                    element.innerHTML = binding.value * 10;
                },
                fbind: {
                    //指令与元素成功绑定时
                    bind(element, binding) {
                        element.value = binding.value
                    },
                    //指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus();
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding) {
                        element.value = binding.value
                    }
                }
            }
        })
    </script>
</body>