dom 元素自定义指令

如果感觉 vue 提供的功能不足够，需要获取 dom 元素进行底层操作，就可以自定义指令

在初始化 vue 实例的时候，参数对象里面可以添加一个 directives 属性，为 vue 增加自定义指令。

写好一个指令的方法之后，就可以像 v-html 等的内置指令一样使用了。

例子：实现一个指令 v-focus 作用就是插入了这个指令的 input 会被自动聚焦

实现方式

1. 创建自定义指令
   • 创建vue实例时，directives 属性名不能变
   • 指令名称这里是 focus 可以自己起名字，不要用大写字母，在 dom 标签使用的时候需要添加 v- 前缀
   • 指令内触发的函数名不能乱起，按固定写就好了，感兴趣可以查文档看看其他函数名
   • 函数接收的第一个参数是元素本身。

directives: {
  focus: {
	// 指令的定义，这个 inserted 是固定写法，意思是带有这个指令的 dom 元素被插入的时候，触发这个方法
    // 还有其他一些可选写法，感兴趣可以看文档
    inserted: function (el) {
       el.children[0].focus()
    }
  }
}

2、使用指令

<input v-focus type="text">

注意：按照官网的Vue自定义指令directives设置Element-UI的el-input输入框获取焦点无法生效，通过查看浏览器解析出的Element-UI的DOM树发现，Element-UI的input外层包裹了一层<div><div/>标签，浏览器解析如下

如果写el.focus()相当于把自定义指令给了el-input这个div而不是input输入框,所以加了一个children[0]获取input节点