Vue----自定义指令

---

自定义指令

1. 自定义指令

vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。

vue 中的自定义指令分为两类，分别是：

1. 私有自定义指令
2. 全局自定义指令

2. 声明私有自定义指令的语法 & 使用自定义指令

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。

在使用自定义指令时，需要加上 v- 前缀。

<template>
  <div>
    <h1>App 组件</h1>
    <input type="text" v-focus>
    <hr>
  </div>
</template>

<script>
export default {
  name: 'App',
  directives: {
    // 自定义指令
    focus: {
      // 当被绑定的元素插入到DOM中时，自动触发mounted函数
      mounted(el) {
        // 让绑定的元素自动获取焦点
        el.focus()
      }
    }
  }
}
</script>

<style>

</style>

3. 声明全局自定义指令的语法

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明。

main.js

// 创建 Vue 实例对象
const app = createApp(App)

// 注册一个全局自定义指令 v-focus
app.directive( 'focus', {
  mounted( el ) {
    el.focus()
  }
} )

<template>
  <div>
    <h1>App 组件</h1>
    <input type="text" v-focus>
    <hr>
  </div>
</template>

<script>
export default {
  name: 'App',
  directives: {
    // // 自定义指令
    // focus: {
    //   // 当被绑定的元素插入到DOM中时，自动触发mounted函数
    //   mounted(el) {
    //     // 让绑定的元素自动获取焦点
    //     el.focus()
    //   }
    // }
  }
}
</script>

<style>

</style>

4. updated 函数

mounted 函数只在元素第一次插入 DOM 时被调用，当 DOM 更新时 mounted 函数不会被触发。

updated 函数会在每次 DOM 更新完成后被调用。

注意：
在 vue2 的项目中使用自定义指令时，【 mounted -> bind 】【 updated -> update 】

注释全局自定义指令

<template>
  <div>
    <h1>App 组件</h1>
    <input type="text" v-focus v-model="val">
    <button @click="add"> +1 </button>
    <hr>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      val: ''
    }
  },
  methods: {
    add() {
      this.val += 1
    }
  },
  directives: {
    // 自定义指令
    focus: {
      // 当被绑定的元素插入到DOM中时，自动触发mounted函数
      mounted(el) {
        // 让绑定的元素自动获取焦点
        el.focus()
      },
      updated( el ) {
        el.focus()
      }
    }
  }
}
</script>

<style>

</style>

全局

// 注册一个全局自定义指令 v-focus
// app.directive( 'focus', {
//   mounted( el ) {
//     el.focus()
//   },
//   updated( el ) {
//     el.focus()
//   }
// } )

5. 函数简写

如果 mounted 和updated 函数中的逻辑完全相同，则可以简写。

<template>
  <div>
    <h1>App 组件</h1>
    <input type="text" v-focus v-model="val">
    <button @click="add"> +1 </button>
    <hr>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      val: ''
    }
  },
  methods: {
    add() {
      this.val += 1
    }
  },
  directives: {
    // 自定义指令
    // focus: {
      // 当被绑定的元素插入到DOM中时，自动触发mounted函数
      // mounted(el) {
      //   // 让绑定的元素自动获取焦点
      //   el.focus()
      // },
      // updated( el ) {
      //   el.focus()
      // }
    // }
    focus(el) {
      el.focus()
    }
  }
}
</script>

<style>

</style>

全局

// 注册一个全局自定义指令 v-focus
// app.directive( 'focus', {
//   mounted( el ) {
//     el.focus()
//   },
//   updated( el ) {
//     el.focus()
//   }
// } )
// app.directive( 'focus', (el)=>{
//   el.focus()
// } )

6. 指令的参数值

在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值。

<template>
  <div>
    <h1 v-color="'red'">App 组件</h1>
    <input type="text" v-focus v-model="val">
    <button @click="add"> +1 </button>
    <hr>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      val: ''
    }
  },
  methods: {
    add() {
      this.val += 1
    }
  },
  directives: {
    // 自定义指令
    // focus: {
    //   // 当被绑定的元素插入到DOM中时，自动触发mounted函数
    //   mounted(el) {
    //     // 让绑定的元素自动获取焦点
    //     el.focus()

    //   },
    //   updated( el ) {
    //     el.focus()
    //   }
    // }
    focus(el) {
      el.focus()
    },
    // 第二个形参为传递的参数对象
    color( el, color ) {
      // console.log(color);
      // color.value 为指令等号后面为指令绑定的值
      el.style.color = color.value
    }
  }
}
</script>

<style>

</style>