指令-自定义全局指令让文本框获取焦点
目录
一、具体方法
二、定义指令
三、总结
一、具体方法
提供了两种方式自定修饰符
1.x中自定义键盘修饰符【了解即可】
Vue.directive('on’).keyCodes,f2 = 113;
2.x中自定义键盘修饰符
通过Vue config,keycodes.名称=按键值来自定义案件修饰符的别名:
Vue.config.keycodes.f2=113;
使用自定义的按健修饰符：
<input type="text”v-model="name @keyup.f2="add">
第一种方法已经不适用，所以主要学习第二种方法。
让文本框获取焦点的方法：
可以使用 focus ，只需要获取到 DOM 元素，有一个 js 原生方法为：.focus
演示：
<input type=”text”class =”form-control”v-model=”keywords”id=”search”>
Document.getElementById(“search”).focus
在 vis code 中”.”出的淡蓝色的长方体图标表示属性，紫色的立方体图标表示方法。
如下图所示：
.Focus是一个方法，可以使文本框获得焦点，但是 vue 不提倡这样的做法，所以要通过自定义指令来获取焦点。
@keyup，v-model等都属于自定义指令，它们都是由 vue 提供的内置指令。
二、定义指令
<input type=”text”class =”form-control”v-model=”keywords”id=”search”v-focus>
给文本框加上v-focus 属性，刷新页面，文本框就会获得焦点。
但是Vue 未提供这个指令，所以需要自己定义。
注意：
Vue中所有的指令，在调用时，都必须以 v- 开头。
Vue.directive(‘focus’,{})//全局的过滤器不加S，私有过滤器加S，这里是全局的过滤器，不需要带 s。
使用 Vue.directive （）定义全局的指令 v-focus 。
其中：参数1为指令的名称，注意：在定义时，指令的名称前面，不需要加v-前缀，但是，在调用时，必须在指令名称前加上 v-前缀进行调用。
参数2是一个对象，这个对象上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。
其中包括：
- bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
- Inserted:被绑定元素插入父节点时调用(父节点存在即可调用，不必存在于 document 中)
- update：所在组件的VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。可以通过比较更新前后的值来忽略不必要的模板更新
- oonentUpdated：所在组件的VNode及其孩子的VNode全部更新时调用。
- unbind ：只调用一次，指令与元素解绑时调用。
bind:function(el)//每当指令绑定到元素上时，会立即执行这个bind 函数，只执行一次。因为一个指令交给一个元素绑定只能绑定一次，所以只执行一次。
在 bind 中只要把指令交给元素，就会立即执行。el 参数表示把指令绑定给哪个元素，el就是那个元素。
注意：
在每个函数中，第一个参数，永远是e1，表示被绑定了指令的元素，e1 参数是一个原生的 Js 对象，就是一个 DOM 对象。以上通过 focus 指令通过 v- 的形式应用给 input 。
el就代表 input 的原生的一个 js 对象，input上有.focus 方法。把指令绑定给文本框就会立即调用bind 。
再使 el 调用 focus 获取焦点是失败的，原因是执行时机不对，bind 的执行时机是指令绑定到元素上时，会立即执行，此时元素还未插入到 DOM 中去。
如果一个文本框或者超链接要显示就必须经过浏览器的渲染解析。解析好的元素先放入内存中的 DOM 树中，如果没有放到 DOM 树中，就只属于内存中，不能获取焦点。
只有放在页面上才能获取焦点。在 bind 中，元素刚绑定了指令，还没有插入到 DOM 中，这时，调用 focus 方法没有作用。因为一个元素只有插入 DOM 之后，才能获取焦点。
}
inserted:function(el)
el.focus()//inserted表示元素插入到 DOM 中时，会执行 insezted 函数【触发1次】。
Focus 的特点是，如果获取焦点，元素必须插入到 DOM 中。在这三个事件中，只有 inserted 执行完后，元素才被插入 Dom 中。
}
Updated:function(el)
el.focus()//当 VNode 更新时，会执行 updated ，可能会触发多次。
}<input type = “text”class=”form-control”v-model=”keywords”i=”search”v-focus>
演示效果：
三、总结
通过 Vue.directive （）定义全局的指令，参数1为指令的名称，不需要加v-前缀，在调用时，必须在指令名称前 加上 v-前缀进行调用。
参数2是一个对象，这个对象上，有三个比较主要的方法，bind inserted 和 updated，它们的第一个参数一直都是被绑定指令的元素，是一个原生的 js DOM 对象。
在每一个函数内部可以执行相关的方法操纵 DOM 元素。
三个函数的不同：
执行时期不一样，bind 是指令绑定给元素就立即执行，此时，元素还未插入到 DOM 中，inserted 是元素插入到 DOM 中后，就会执行，updated 是当 DOM 节点更新时，就会立即执行。
