vue 移动端 利用vue 自定义指令实现搜索页面的输入框的自动聚焦 Vue.use

目标效果： 利用vue 自定义指令实现搜索页面的输入框的自动聚焦 

使用自定义指令的原因：

vue默认内置了v-model、v-if、v-show、v-html、v-text等指令，但是这些往往不足以满足我们实际项目开发中的场景，比如权限控制按钮、路由菜单，复制文字等功能，就需要我们自己自定义一些满足我们项目需求的指令了，那怎么封装自定义指令，并使用呢？我们先从封装指令的基础说起。

钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。可以进行一次性初始化设置。
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已经被插入文档中）。
• update：所在组件的VNode更新时调用，也可能发生在其子VNode更新之前。
• componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

案例里实现聚焦的操作步骤：

     1.在main.js 里封装中间件函数插件，并且创建一个自定义指令，命名为fofo

//封装中间件函数插件
 const directiveObj = {
   install(Vue) {
     //全局创建一个自定义指令
     Vue.directive("fofo", {
       inserted(el) {
         //指令所在van-search组件
         //组件根标签是div，input在内部
         //以上都是原生标签对象
         // console.log(el)
         // el.focus()
         let theInput = el.querySelector("input");
         theInput.focus();
       },
     });
   },
 };
 //执行目标对象里install方法并传入到vue 类
 Vue.use(directiveObj);

      2.在使用的搜索输入框里引入用到的自定义指令即可！！！