vue 指令

<template>
  <div>
    <!-- v-bind 指令用于动态绑定一个或多个属性，或一个组件 prop 到表达式 -->
    <img v-bind:src="imageSrc" alt="Vue Logo">

    <!-- v-on 指令用于监听 DOM 事件，并在触发时执行 JavaScript 代码 -->
    <button v-on:click="increment">点击我</button>
    <p>你点击了按钮 {{ count }} 次。</p>

    <!-- v-if 指令根据表达式的值的真假条件渲染元素 -->
    <p v-if="showMessage">显示这条消息。</p>

    <!-- v-for 指令基于源数据多次渲染元素 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://vuejs.org/images/logo.png',
      count: 0,
      showMessage: true,
      items: ['苹果', '香蕉', '橙子']
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

解释说明：

1. v-bind: 用于动态绑定 HTML 属性。例如，v-bind:src="imageSrc" 将 imageSrc 的值绑定到 <img> 标签的 src 属性上。
2. v-on: 用于监听 DOM 事件并执行相应的 JavaScript 代码。例如，v-on:click="increment" 监听按钮的点击事件，并调用 increment 方法。
3. v-if: 根据表达式的真假条件渲染元素。例如，v-if="showMessage" 控制是否显示 <p> 标签。
4. v-for: 基于源数据多次渲染元素。例如，v-for="(item, index) in items" 遍历 items 数组并为每个元素生成一个 <li> 标签。

以上代码展示了 Vue.js 中常用的指令及其基本用法。