如果vue中13种指令不够用的,就可以给vue家添加自定义指令
何时:如果希望在首次加载时,对元素自动执行某些操作时,就可以用自定义指令: 比如:让某个元素在页面加载时就自动获得焦点 3.如何:2步

   1).向vue家添加一个新的指令,并起一个指令名
      Vue.directive("指令名",{//强调:定义指令时,指令名不要加v-前缀!
            //将来当带有这个指令的DOM元素被渲染到页面上
            之后自动执行inserted回调函数
            inserted(dom元素){
               //形参dom元素会自动获得当前拥有该指令的DOM元素对象
               //对当前拥有该指令的DOM元素执行原生的DOM操作
           }
   })
   2).在HTML界面中某个元素上使用自定义指令:
          <元素 v-自定义指令>
          强调:使用指令时,必须加v-前缀

4.原理

new Vue()扫描界面时,发现v-前缀的指令,都回去Vue家找有没有对应的指令对象
如果找到有对应名称的指令对象,就自动调用指令对象中的inserted()函数
Inserted()函数中包含了对当前元素执行的初始化DOM操作!

5.示例:让元素在页面加载时就自动获得焦点

图片1.png

<head>
   <script src="js/vue.js></script>
   <script>
      //给vue家添加新指令my-focus
      Vue.directive("my-focus",{
       //当拥有该指令的元素被渲染到页面上显示之后,自动执行inserted()函数
       inserted(elem){
       //每次elem都自动获得当前带有这个指令的DoM元素对象
       //本例中:希望当前元素自动获得焦点
       elem.foucs();//原生DOM中的函数
       }
       })
   </script>
</head>
<body>
      //让文本框在页面加载时自动获得焦点
      <div id="app">
        <input v-m-focus>
      </div>
      <script>
          //vue所有指令的执行,都靠new Vue()扫描过程中发现
          new Vue({
             el:"#app"
             })
      </script>
</body>

vue自定义指令

4.原理

5.示例:让元素在页面加载时就自动获得焦点