vue自定义指令

2021-12-01 17:03:53 阅读：131 来源： 互联网

标签：vue 自定义绑定 binding 调用 element 指令元素


<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)

标签：vue,自定义,绑定,binding,调用,element,指令,元素
来源： https://blog.csdn.net/m0_59993469/article/details/121659458

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue自定义指令

自定义指令_对象式

自定义指令的钩子