自定义指令

定义语法：

(1).局部指令：在new Vue实例中配置
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
(2).全局指令：在new Vue实例外配置
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

回调函数
函数何时会被调用？

1.指令与元素成功绑定时（一上来）。
2.指令所在的模板被重新解析时。

回调函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。这两个钩子是生命周期钩子，以后再说
- expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ，
  expression 的值是 “1 + 1”。
- arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
- modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

配置对象中的回调：

(1)bind：指令与元素成功绑定时调用。（常用）
(2)inserted：指令所在元素被插入页面时调用。（常用）
(3)update：指令所在模板结构被重新解析时调用。（常用）
(4)componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
(5)unbind: 只调用一次，指令与元素解绑时调用。

（钩子：这个以后再说，现在先理解为函数）常用的是前三个

注意点：

1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式。
3.this是window

局部指令

局部指令在new Vue实例中使用directives配置项配置

回调函数形式

<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>
    <hr/>
    <input type="text" v-fbind:value="n">

    <hr/><hr/>
</div>

		data:{
            name:'自定义指令',
            n:1

        },
        directives:{
            big(element,binding) {
                element.innerText = binding.value * 10
            },
            fbind(element,binding){
                element.value = binding.value
                element.focus()
            },
        }

效果：实现了需求1，但是需求2的默认获取焦点没有实现，这是因为回调函数其中一个调用时机是一上来就会被调用，也就是元素还没插入页面就会被调用，元素还没有插入页面就获取焦点，显然是不可行的，这是一个顺序问题，所以回调函数实现不了需求2，需要用配置对象实现。
在这里插入图片描述

配置对象形式

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

效果：所有需求都能实现
在这里插入图片描述

全局配置

如果多个容器使用同一个自定义指令，可以配置成全局配置。
在new Vue实例外使用Vue.directive配置

回调函数形式

<div id="root2">
    <h2>当前的n值是：<span v-text="n"></span> </h2>
    <input type="text" v-fbind:value="n">
</div>

	Vue.directive('fbind',(element,binding)=>{
        element.value = binding.value
        element.focus()
    })
    new Vue({
        el: '#root2',
        data: {
            n: 10
        },
    })

效果：同样实现不了需求2
在这里插入图片描述

配置对象形式

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