Vue系列教程（二十二）自定义全局指令让文本获取焦点

实现文本框自动获取焦点，在原生JS中的做法如下：

html

<input type="text" class="form-control" v-model="keywords" id="search">

js

document.getElementById('search').focus()

但是vue不提倡操作DOM，vue中的做法是使用自定义指令：

注意：vue中自定义指令都是以v-开头

• 使用Vue.directiv()定义全局指令
• 参数1：指令名称
• 在定义的时候，指令名称前面，不需要加v-前缀，在调用时，必须在指令名称前加上v-前缀来进行调用
• 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作

自定义指令的定义：

    Vue.directiv('focus', {
        // 当绑定元素插入到 DOM 中
        inserted: function (el) {
            //  聚焦元素
            el.focus()
        }
    })

自定义指令的使用：

<input type="text" class="form-control" v-model="keywords" v-focus>

其他的函数：

• bind：每当指令绑定到元素上的时候，会执行这个bind函数，只执行一次。第一个参数，永远是el，表示被绑定了指令的那个元素，这个el，是一个原生的js对象。
• inserted：元素插入到DOM中的时候，会执行，只执行一次。
• updated：当VNode更新的时候，会执行updated，可能会触发多次。

推荐阅读：
Vue系列教程（一）基础介绍
Vue系列教程（二）v-cloak、v-text、v-html的基本使用
Vue系列教程（三）v-bind指令
Vue系列教程（四）v-on指令定义事件
Vue系列教程（五）跑马灯效果案例
Vue系列教程（六）事件修饰符
Vue系列教程（七）v-model和双向数据绑定
Vue系列教程（八）v-model实现计算器案例
Vue系列教程（九）属性绑定为元素设置class类样式
Vue系列教程（十）属性绑定为元素绑定style行内样式
Vue系列教程（十一）v-for指令的四种使用方式
Vue系列教程（十二）v-for中key的使用注意事项
Vue系列教程（十三）v-if和v-show的使用和特点
Vue系列教程（十四）品牌管理案例-品牌列表的添加功能
Vue系列教程（十五）品牌管理案例-根据Id完成品牌的删除
Vue系列教程（十六）品牌管理案例-根据关键字实现数组的过滤
Vue系列教程（十七）全局过滤器的基本使用
Vue系列教程（十八）品牌管理案例-定义格式化时间全局过滤器
Vue系列教程（十九）私有过滤器的基本使用
Vue系列教程（二十）字符串的padStart方法使用
Vue系列教程（二十一）自定义按键修饰符