vue3指令

// Vue 3 指令示例代码

<template>
  <div>
    <!-- v-bind 指令用于动态绑定 HTML 属性 -->
    <img v-bind:src="imageSrc" alt="Vue Logo">

    <!-- v-on 指令用于监听事件 -->
    <button v-on:click="increment">点击我</button>
    <p>你已经点击了 {{ count }} 次</p>

    <!-- v-if 和 v-else 指令用于条件渲染 -->
    <p v-if="showMessage">显示这条消息</p>
    <p v-else>不显示那条消息</p>

    <!-- v-for 指令用于循环渲染列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>

    <!-- 自定义指令 -->
    <p v-focus>这段文本会自动聚焦</p>
  </div>
</template>

<script>
import { ref, directive } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式数据
    const imageSrc = ref('https://vuejs.org/images/logo.png');
    const count = ref(0);
    const showMessage = ref(true);
    const items = ref(['苹果', '香蕉', '橙子']);

    // 定义方法
    const increment = () => {
      count.value++;
    };

    // 定义自定义指令
    directive('focus', {
      mounted(el) {
        el.focus();
      }
    });

    return {
      imageSrc,
      count,
      increment,
      showMessage,
      items
    };
  }
};
</script>

<style scoped>
/* 样式部分省略 */
</style>

解释说明：

1. v-bind 指令：用于动态绑定 HTML 属性，例如 src 属性。v-bind:src="imageSrc" 表示 src 属性的值将根据 imageSrc 的值动态变化。

2. v-on 指令：用于监听 DOM 事件。v-on:click="increment" 表示当按钮被点击时，调用 increment 方法。

3. v-if 和 v-else 指令：用于条件渲染。v-if="showMessage" 表示当 showMessage 为 true 时显示该元素，否则显示 v-else 对应的内容。

4. v-for 指令：用于循环渲染列表。v-for="(item, index) in items" 表示遍历 items 数组，并为每个元素生成一个列表项。

5. 自定义指令：通过 directive('focus', {...}) 定义了一个名为 v-focus 的自定义指令，在元素挂载时自动聚焦。

以上代码展示了 Vue 3 中常见的指令用法及其解释。