vue自定义指令的基础使用

自定义指令是一种非常有用的特性，它允许你对普通 DOM 元素进行底层操作，以实现一些特定的功能。注册指令可以注册全局指令和局部指令。定义自定义指令有两种方式，第一种直接使用对象，第二种 vue3，提供了defineDirective函数。本文主要使用第一种先简单介绍下基本使用。

全局指令

// 在vue3中 可以通过 app.directive() 来注册全局指令
// 通过自定义指定操作dom元素，要写在mounted钩子函数中，确保dom元素加载完成
app.directive('myfoucs',{
  mounted(el){
    el.focus();
  }
})

 <input type="text" v-myfoucs >

当页面加载完成后，input会自动获取焦点

局部指令

局部指令只能在当前的页面中使用

// 用来控制元素文字颜色
const vColor = {
  mounted(el) {
    el.style.color = 'red';
  }
};

   <div v-color>测试自定义指令</div>

自定义组件除了在  mounted钩子函数外，还可以添加多个生命周期函数。演示下：

const num=ref(0) 
// 用来控制元素文字颜色
const vColor = {
  mounted(el) {
    el.style.color = 'red';
  },
  // 当组件更新完成后 修改文本的颜色
  updated(el){
    el.style.color = 'blue';
  }
};

        <div v-color>测试自定义指令</div>
        <div>num: {{ num }}</div>
        <button @click="num++">+1</button>

在页面加载完成后，元素文本的颜色为红色，这里通过让num+1，触发组件更新。当组件更新完成后，文本的颜色修改为绿色。在实际开发中，灵活使用其他的生命周期函数来实现需求。

demo在演示一个

// 生命一个可以指定样式的指令
const vMystyle= {
  mounted(el, binding) {
    console.log('binding',binding);
    // 判断参数
    if (binding.arg === 'color') {
      el.style.color = binding.value;
    }else if(binding.arg === 'size'){
      el.style.fontSize = binding.value;
    }
  }
};

  <!-- 这里 :color相当于传入了参数   在vue的模板语法中 双引号包裹的是表达式，
             当我们需要传入一个字符串值的时候，就需要双引号包裹单引号了
             这里v-mystyle:color="blue" ，vue会把blue当作变量来处理而不是字符串
          -->
        <div v-mystyle:color=" 'blue' ">自定义指令给文本设置颜色</div>
        <div v-mystyle:size=" '24px' " >自定义指令给文本设置颜色</div>
  <!-- 自定义指令可以同时绑定多个 -->
        <div v-mystyle:size=" '34px' "  v-mystyle:color=" 'red' ">
          自定义指令给文本设置颜色
         </div>

效果图

end 

后续会更新更多关于自定义指令的内容。（如有误欢迎指正）