一般自定义指令
以用户注册页面为例，在默认情况下，用户打开页面时焦点并不会一开始就定位在输入框，而是需要用户点击输入框之后才能进行输入。
我们可以通过自定义属性来使焦点在打开页面时就自动定位到输入框。做法是通过Vue的API Vue.directive()，括号中的第一个参数就是自定义属性的名称，第二个参数则是实现这个自定义指令的业务逻辑。
以下是写在main.js的逻辑:
以下是写在App.vue组件里的HTML:
效果如下：
单个页面有多个输入框的话这个指令只能定位一个，每个输入框都调用这个指令的话默认定位最后一个输入框。
实现这个自定义指令的具体函数（方法）以及原理参考：cn.vuejs.org/v2/guide/cu…
inserted函数是钩子函数中比较常用到的一个。
带参数的自定义指令
定义规则
带参数的自定义指令的定义规则与一般自定义指令大同小异，只是实现指令的函数中多了一个参数。
例（改变原速背景颜色）：
inserted(el, binding){
el.style.backgrondColor=binding.value.color;
}
})
这里可以将inserted替换成bind，某些情况下这两个方法是通用的。
使用规则
拓展变形
将Vue.directive()中的钩子函数换成update()，结合一些JS逻辑我们就可以得到如下的响应式的装置。
每点一下Change按钮输入框颜色就会跟着切换。
自定义指令局部指令
我们之前写的都是全局自定义指令，所以Vue.directive的逻辑都写在main.js里，这样写的自定义指令的作用是全局的，也就是无论是项目中的父组件还是子组件都会受到影响，局部自定义指令就是只作用于单个组件的自定义指令，实现指令的directive逻辑可以作为对象写在组件里，就像我们之前说到methods对象和computed对象等一样，同理，methods对象和computed对象等也是可以写到main.js里作全局逻辑的。
以下是写在App.vue组件里的逻辑：
效果如下:
我们可以再写一个子组件试试：
directives对象中可以写多个不同的自定义指令，下面我们在上面的基础上再加上我们之前写的focus指令。
