vue自定义指令

有时候需要对某些dom元素进行底层操作，这时候需要vue自定义指令。

1、自定义指令需要注册之后才能使用，注册目标是在vc（vue component）对象上进行：

app.directive(name,[definition]);

2.注册方式为：

   全局注册：

const app=Vue.creatApp({});
app.directive('focus',{});

   本地注册：

export default{
 data(){
},
directives:{
    focus:{
        inserted(el){
        }
    }

},
};

然后在模板中任何元素上就可以使用v-focus指令了。

<template>
<input v-fous/>
</template>
<script>

</script>

vue 自定义指令钩子

在Vue中，可以通过自定义指令来增强组件的行为。自定义指令可以注册全局指令，也可以注册局部指令。

自定义指令：

1.注册为全局自定义指令 `v-tip`

Vue.directive('tip', {
// 当被绑定元素挂载到 DOM 上时执行
bind(el, binding, vnode, oldVnode) {
// 为被绑定元素添加title属性
el.setAttribute('title', binding.value);
}
// 其他钩子
inserted(el){
}        
});

2. 注册为局部自定义指令
 

new Vue({
    directives: {
         tip: {
             bind(el, binding, vnode, oldVnode) {
                el.setAttribute('title', binding.value);
            }
         }

  }
});

可以注册如下钩子函数：

1. bind：只调用一次，指令第一次绑定到元素时调用。

2. inserted：被绑定元素插入父节点时调用。

3. update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

4. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5. unbind：只调用一次，指令与元素解绑时调用。

下面是一个自定义指令的例子，它将在绑定的元素上添加一个title属性，其值为绑定的输入属性：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：

<div id="dynamicexample"> <h3>Scroll down inside this section </h3> <p v-pin:[direction]="200"> I am pinned onto the page at 200px to the left. </p> </div>

Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' var s = (binding.arg == 'left' ? 'left' : 'top') el.style[s] = binding.value + 'px' } }) new Vue({ el: '#dynamicexample', data() { return { direction: 'left' } } })

结果：

       这样这个自定义指令现在的灵活性就足以支持一些不同的用例了。

函数简写

      很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value });

对象字面量

       如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" });