自定义指令分为函数式写法和对象式写法，根据不同需求采用不同写法。

• 函数式写法是一种简洁的方式来定义自定义指令，它只包含一个函数，没有任何生命周期钩子。这种写法适合于不需要绑定值或者监听变化的简单指令。
• 对象式写法是一种更灵活的方式来定义自定义指令，它包含了多个属性和方法，可以定义指令的各种行为和逻辑。对象式写法通常包含 bind 、 inserted 、 update 和 unbind 等生命周期钩子函数。
• 自定义指令定义的时候不加 v-，但使用的时候需要加 v-。

注意

所有自定义指令中的 this 都指向 windows 不是 Vue 实例。

---

函数式

以下是自定义指令 "函数式" 写法示例：

<template>
     <div id="app" >
        <h2>当前的值是:<span v-text="n"></span></h2>
        <!-- 自定义指令定义的时候不加 v-，但使用的时候需要加 v- -->
        <h2 >放大10倍后的值是:<span v-big="n"></span></h2>
        <button @click="n++" >点我+1</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      n: 1
    }
  },
  directives:{
      // element 代表被指令操作的DOM元素、binding代表绑定的属性值
      big(element,binding){
          //输出指定元素的详细信息到控制台用于验证element是否是真实DOM元素
          console.dir(element);
          //检查传入的 element 是否是 HTMLElement 的实例
          console.log(element instanceof HTMLElement);
          element.innerText = binding.value * 10;
      }
    }
};
</script>

结果展示：

总结：

• 函数式写法是一种简洁的方式来定义自定义指令，它只包含一个函数，没有任何生命周期钩子。这种写法适合于不需要绑定值或者监听变化的简单指令。
• 上面示例中, big 函数在指令和元素绑定时就被调用，并且指令所在的模板被 vue.js 重新解析后也会再次被调用。

---

对象式

以下是自定义指令 "对象式" 写法示例：

<template>
  <div id="app">
    <h2>数据绑定并获取焦点</h2>
    <input type="text" v-focus-fbind="n" />
    <button @click="n++">点我+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: 1,
    };
  },
  directives: {
     //当需要多个单词命名的时候，就不能用简写形式，必须用字符串
    'focus-fbind': {
      //当指令绑定到元素上时调用
      bind(element, binding) {
        element.value = binding.value;
      },
      //当指令所在元素被插入到页面时调用
      inserted(element, binding) {
        element.value = binding.value;
        element.focus();
      },
      //当指令所在模板被更新时调用
      update(element, binding) {
        element.value = binding.value;
      }
    },
  },
};
</script>

结果展示：

总结：

• "数据绑定并获取焦点" 使用函数式写法是无法实现数据绑定和监听数据变化，所以上述例子中需要用到对象式写法，使用对象式写法定义了 inserted 生命周期钩子函数，当指令所在元素被插入到 DOM 中时，该指令会自动将焦点设置到该元素上。
• 当自定义指令涉及到多个单词，命名规则要使用 kebab-case 命名方式，不要用 camelCase 命名。
• 对象式写法是一种更灵活的方式来定义自定义指令，它包含了多个属性和方法，可以定义指令的各种行为和逻辑。对象式写法通常包含 bind 、 inserted 、 update 和 unbind 等生命周期钩子函数。