如上面代码所示，使用app.directive(‘指令名称’,{ xxxx});的方式可以自定义的指令，使用时在对应的dom元素上添加v-指令名称就可以了，就如本例子中，调用的方法如下：

这时候运行代码会发现效果和我们之前做的一模一样，这个写法更简单。在文中我们看到了mounted函数，这个函数是Vue生命周期的函数吗，意思是当界面挂载完成时会回调它，el参数就是我们使用自定义指令的那个Dom元素

 mounted(el){
            console.log(el);
            el.focus();
            console.log('mounted');
        }

其实定义自定义指令时不只可以重写mounted()函数，还可以重写其他的函数，如下所示：

    app.directive('focus',{
        beforeMount(el){
            console.log('beforeMount');
        },
        mounted(el){
            console.log('mounted');
        },
        beforeUpdate(){
            console.log('beforeUpdate');
        },
        updated(){
            console.log('updated');
        },
        beforeUnmount(){
            console.log('beforeUnmount');
        },
        unmounted(){
            console.log('unmounted');
        }
    });

在浏览器中运行上面代码，打开console，如下

我们可以在对应的生命周期回调中做对应的事情。

在上面的代码中我们定义自定义指令用的是全局的方式，其实我们还有局部的方式，代码如下：

使用局部定义自定义属性的方式是：

 const direc = {
      focus:{
            mounted(el){
               el.focus();
            }
        }
    };

然后使用的时候需要加上：

 const app = Vue.createApp({
   ...
       directives:direc,
   ...
    });

2.使用自定义指令实现改变输入框位置

我们接下来使用Vue的自定义指令实现一个小功能，就是动态改变输入框的位置，代码如下：

首先我们定义一个样式，使用绝对定位的方式确定输入框的位置：

使用一个pxValue表示输入框位置的值，然后可以通过

v-pos:left="pxValue"的方式确定输入框是距离左边还是右边或者距离其他参照物。然后自定义指令的时候，拿到属性传过来的值和pxValue，改变输入框位置：

  app.directive('pos',{
        mounted(el,binding){
            el.style[binding.arg] = binding.value + 'px';
        },
        updated(el,binding){
            el.style[binding.arg] = binding.value + 'px';
        }  
    });

这里也可以写成：

   app.directive('pos',(el,binding)=>{
        console.log(binding.arg,'binding')
        el.style[binding.arg]=(binding.value+'px');
    })

然后使用的时候就可以如下：

 
或者  
或者  

运行之后，可以修改对应的值查看效果：