vue自定义指令

2024-03-11 11:31:19


<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是: <span v-text="n"></span></h2>
        <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name: '张三',
                n: 1
            },
            directives:{
                big(element,binding){
                    element.innerText = binding.value * 10
                }
            }
        })
    </script>
<body>

分为全局和局部局部就是上面的

自定义指令_对象式

语法：new Vue({ directives:{指令名:配置对象} })

那什么时候会用到对象式自定义指令呢？

例如，你想要在一开始就获取表单的焦点，那只写 fbind(element,binding){element.focus() } 是没有效果的，因为这个指令与元素成功绑定时，会执行一次，此时 input 表单还没在页面上显示，就已经调用了 input.focus 是没用的. 类似于当你动态的创建一个元素时，你还没把元素放到页面上就开始访问它的父元素了，这时候是访问不到的

所以，解决这个的办法就是用对象式创建自定义指令，对象会把每个阶段分的比较细，大致分为三类，如下：

directives:{
                fbind:{
                    //指令与元素成功绑定时（一上来）
                    bind(element,binding){
                        element.value = binding.value
                    },
                    //指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus()
                    },
                    //指令所在的模板被重新解析时
                    update(element,binding){
                        element.value = binding.value
                    }
 
                }
            }

自定义指令的钩子

bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。
钩子函数的参数：(el, binding, vnode, oldVnode)

码农公寓

自定义指令_对象式

自定义指令的钩子

相关文章