vue入门：vue基本指令介绍

在 Vue 3 中，大部分 Vue 2 中的指令保持了相同的用法。今天我们将讲讲Vue3的基本指令，带大家来了解一下它们的用法。

v-if

将 v-if 指令添加到 HTML 元素中，可以根据表达式的真假条件来进行条件性渲染。

示例：

<template>
  <div>
    <button @click="toggleContent">Toggle Content</button>
    <div v-if="showContent">
      <p>This is the content to show.</p>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const showContent = ref(false);

    function toggleContent() {
      showContent.value = !showContent.value;
    }

    return { showContent, toggleContent };
  },
};
</script>

在这个示例中，我们通过 ref 函数创建了一个名为 showContent 的响应式变量，并初始化为 false。当用户点击按钮时，我们调用 toggleContent 方法来切换 showContent 的值，从而控制内容的显示和隐藏。

需要注意的是，在 Vue 3 中，由于引入了 setup 函数，我们需要在 setup 函数中返回一个包含模板中使用的所有变量和方法的对象。这个对象中的每个属性都可以在模板中直接使用，无需再通过 this 来访问。

v-for

v-for可以基于源数据多次渲染元素或模板块。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    };
  }
};
</script>

在上述示例中，我们通过 v-for 循环渲染了一个数组 list 中的元素。:key 是必需的，用于帮助 Vue 跟踪每个元素的身份，以提高性能。

另外，v-if 和 v-for 指令不能同时使用在同一个元素上。如果需要对一个列表进行条件渲染，可以将 v-if 放在列表项的容器元素上。例如：

<template>
  <div>
    <button @click="toggleList">Toggle List</button>
    <div v-if="showList">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.text }}</li>
      </ul>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const showList = ref(false);
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
    ]);

    function toggleList() {
      showList.value = !showList.value;
    }

    return { showList, items, toggleList };
  },
};
</script>

在这个示例中，我们将 v-if 放在包含列表的 <div> 元素上，来对整个列表进行条件渲染。这样，当 showList 的值为 false 时，整个列表将被从 DOM 中移除。

v-show

v-show用于根据条件控制元素的显示与隐藏。使用 v-show 指令时，元素始终会被渲染到 DOM 中，只是通过修改 CSS 属性来控制元素的显示与隐藏。这与 v-if 指令不同，v-if 在条件为假时会完全从 DOM 中移除元素。而v-show控制的元素是一直存在的，只不过没有显示出来。它的使用方法和v-if是一样的，但v-show 只能用于普通元素，不能用于 <template> 标签或组件。如果需要根据条件动态地渲染组件，应该使用 v-if 指令。

v-bind

v-bind 用于绑定数据到 HTML 元素属性中。当你需要动态地将一个表达式的值绑定到元素的某个属性时，就可以使用 v-bind 或 它的简写语法:。这样，在 Vue 实例的数据改变时，对应的元素属性也会随之更新。

下面是一个使用 v-bind 的示例，将 Vue 实例中的 message 属性绑定到一个 <p> 元素的 title 属性上：

<template>
  <div>
    <p v-bind:title="message">Hover your mouse over this text to see the dynamic title.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This is a dynamic title!'
    };
  }
};
</script>

在上述示例中，v-bind:title 的意思是将 message 属性的值绑定到 <p> 元素的 title 属性上。由于 message 是一个响应式的数据属性，当它的值发生变化时，对应的元素属性也会自动更新。

除了简单的绑定表达式外，v-bind 也可以与其他指令一起使用。例如，可以使用 v-bind:class 来绑定一个动态的 CSS 类名，或使用 v-bind:style 来绑定一个动态的内联样式。

<template>
  <div :class="{ active: isActive }" :style="{ color: textColor }">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red',
      message: 'Hello, Vue!'
    };
  }
};
</script>

在上述示例中，:class="{ active: isActive }" 绑定了一个动态的 CSS 类名，如果 isActive 的值为 true，则 <div> 元素会应用 active 类名。:style="{ color: textColor }" 绑定了一个动态的内联样式，使得 <div> 元素的文字颜色为红色。

v-on

v-on 是用于绑定事件监听器的指令，它可以捕获和响应 HTML 元素上触发的各种事件。它可以简写为@，这里我们给按钮绑定一个点击事件。

<template>
  <div>
    <button v-on:click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

在上述示例中，我们使用 v-on:click 指令将 handleClick 方法绑定到 <button> 元素的 click 事件上。当用户点击按钮时，会触发 handleClick 方法，并在控制台打印出 'Button clicked!'。

v-model

v-model 可以将表单元素的值和 Vue 实例中的数据进行双向绑定，当表单元素的值发生变化时，对应的数据也会更新，反之亦然。

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

在上述示例中，我们使用 v-model 将 <input> 元素与 Vue 实例中的 message 数据进行双向绑定。当用户输入内容时，message 数据会自动更新，同时页面上的 <p> 元素也会实时显示出用户输入的内容。

本文的知识到这就已经讲完啦，欢迎下次再来一起学习ヾ(◍°∇°◍)ﾉﾞ！！