垦荒学园
  • 中文

      • Vue 指令

      指令 (Directives) 是 Vue 模板语法中一种特殊的、带有 v- 前缀的属性。指令的职责是，当其表达式的值改变时，相应地将行为应用到 DOM 上。

      1. v-bind：绑定属性

      用于动态地绑定一个或多个 HTML 属性。

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

const imageUrl = ref('https://vuejs.org/images/logo.png')
const linkUrl = ref('https://vuejs.org/')
</script>

<template>
  <a v-bind:href="linkUrl">
    <img :src="imageUrl" alt="Vue Logo"> <!-- : 是 v-bind: 的简写 -->
  </a>
</template>
      • 简写: :

      2. v-on：监听事件

      用于监听 DOM 事件，并在事件触发时执行一些 JavaScript 代码。

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <!-- 当按钮被点击时，调用 increment 方法 -->
  <button v-on:click="increment">Count is: {{ count }}</button>
</template>

      • 简写: @

        <button @click="increment">...</button>

      3. v-model：双向绑定

      v-model 是一个非常强大的指令，它可以在表单的 <input>, <textarea>, 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方式来更新元素。

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

const message = ref('Hello Vue!')
</script>

<template>
  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me" />
</template>

      v-model 本质上是一个语法糖，它等同于将 v-bind:value 和 v-on:input 结合起来。

      4. v-if, v-else, v-else-if：条件渲染

      用于根据表达式的真假值，条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才会被渲染。

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

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">Toggle</button>

  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

      v-else 元素必须紧跟在 v-if 或 v-else-if 元素的后面，否则它将不会被识别。

      5. v-show：条件显示

      另一个用于条件性显示元素的选项是 v-show 指令。用法大致一样：

      <template>
  <h1 v-show="ok">Hello!</h1>
</template>

      不同的是带有 v-show 的元素会始终被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS display 属性。

      • v-if vs v-show:
        • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
        • v-show 的开销更高，因为它不管初始条件如何，始终会渲染元素。
        • 选择：如果需要频繁地切换，使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 较好。

      6. v-for：列表渲染

      用于基于一个数组来渲染一个列表。v-for 指令需要使用 (item, index) in items 形式的特殊语法。

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

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.message">
      {{ index }} - {{ item.message }}
    </li>
  </ul>
</template>

      v-for 也可以用于遍历一个对象的属性。

      :key 的重要性：key 是一个特殊的属性，Vue 用它来追踪每个节点的身份，从而重用和重新排序现有元素。key 的值必须是唯一的字符串或数字。