vue 自定义指令( 全局自定义指令 | 局部自定义指令 )

文章目录

在 Vue.js 中，自定义指令允许你注册一些带有钩子函数的指令，这些钩子函数会在特定的生命周期阶段被调用。

钩子函数参数：

el：指令绑定的元素。

binding：一个包含指令值、参数、修饰符等的对象。包含以下属性 name:指令名称,不包含v-前缀 .value 指令的绑定值例如在 v-my-directive="1 + 1" 中，值是 2。

vnode：Vue 虚拟 DOM 节点。

oldVnode：之前的渲染中代表指令所绑定元素的 VNode。仅beforeUpdate 和 updated 钩子中可用。

复制代码

 调用时机：指令绑定到元素时调用，只调用一次。
 bind(el, binding, vnode, oldVnode)

 调用时机：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
 inserted(el, binding, vnode, oldVnode)

  调用时机：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较 binding.oldValue 和 binding.value 来确定是否变化。
  update(el, binding, vnode, oldVnode)

  调用时机：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  componentUpdated(el, binding, vnode, oldVnode)

  调用时机：只调用一次，指令与元素解绑时调用。
  unbind(el, binding, vnode, oldVnode)

全局自定义指令

通过Vue.directive(id, [definition])方式注册全局指令，然后在入口文件中进行Vue.use()调用。也可以批量注册指令，新建一个directives/index.js文件，并在其中导入和注册多个指令。

html 复制代码

    <div id="app">
        <input type="text" v-focus/>
        <input type="text" v-color="msg" />

    </div>
		//注册一个全局的自定义指令 v_focus
        //focus是自定义的指令
        Vue.directive('focus', {
            //inserted 是钩子函数 表示当被绑定的元素插入到DOM中时
            inserted: function(el) {
                //el是指令绑定的元素
                el.focus()
            }
        })


        //自定义指令带参数
        Vue.directive('color', {
            bind: function(el, binding) {
                el.style.backgroundColor = binding.value
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'red'
            },
                    })

局部注册自定义指令

通过组件的directives选项进行局部注册，该指令只在本组件中可用。

html 复制代码

 var vm = new Vue({
            el: '#app',
            data: {
                msg: 'red'
            },
            //局部指令 只能在当前组件使用
            derectives: {
                color: {
                    bind: function(el, binding) {
                        el.style.backgroundColor = binding.value
                    }
                },
                focus: {
                    inserted: function(el) {
                        //el是指令绑定的元素
                        el.focus()
                    }
                }

            }
        })