05 Vue中常用的指令

概述

All Vue-based directives start with a v-* prefix as a Vue-specific attribute.

所有基于 Vue 的指令都以 v-* 前缀作为 Vue 特有的属性。

v-text

The v-text directive has the same reactivity as with interpolation. Interpolation with {{ }} is more performant than the v-text directive. However, you may find yourself in situations where you have pre-rendered text from a server and want to override it once your Vue application has finished loading. For example, you can pre-define a static placeholder text while waiting for the Vue engine to eventually replace it with the dynamic value received from vtext, as shown in the following code block:

v-text 指令的反应性与插值相同。与 v-text 指令相比，使用 {{ }} 进行插值的性能更高。不过，您可能会遇到这样的情况，即您已从服务器预渲染了文本，但希望在 Vue 应用程序加载完成后覆盖它。例如，您可以预先定义一个静态占位符文本，同时等待 Vue 引擎最终将其替换为从 vtext 接收的动态值，如下代码块所示：

<template>
  <div v-text="msg">My placeholder</div>
</template>
<script setup>
const msg = "My message"
</script>

v-once

When used, it indicates the starting point of static content. The Vue engine will render the component with this attribute and its children exactly once. It also ignores all data updates for this component or element after the initial render. This attribute is handy for scenarios with no reactivity needed for certain parts. You can combine v-once with v-text, interpolation, and any Vue directive.

使用时，它表示静态内容的起点。Vue 引擎将对带有此属性的组件及其子组件进行一次精确的呈现。在首次呈现后，它还会忽略该组件或元素的所有数据更新。对于某些部分不需要反应性的场景，该属性非常方便。您可以将 v-once 与 v-text、插值和任何 Vue 指令结合使用。

v-html

Vue will parse the value passed to this directive and render your text data as a valid HTML code into the target element. We don’t recommend using this directive, especially on the client side, due to its performance impact and the potential security leak. The script tag can be embedded and triggered using this directive.

Vue 会解析传递给此指令的值，并将文本数据作为有效的 HTML 代码呈现到目标元素中。我们不建议使用此指令，尤其是在客户端，因为它会影响性能并可能造成安全漏洞。可使用此指令嵌入并触发脚本标签。

v-bind

This directive is one of the most popular Vue features. You can use this directive to enable one-way binding for a data variable or an expression to an HTML attribute, as shown in the following example:

该指令是最受欢迎的 Vue 功能之一。您可以使用该指令将数据变量或表达式单向绑定到 HTML 属性，如下例所示：

<template>
  <img v-bind:src="logo" />
</template>
<script setup>
const logo = '../assets/logo.png';
</script>

The preceding code demonstrates how to bind the logo data variable to image’s src. The img component now takes the source value from the logo variable and renders the image accordingly.

前面的代码演示了如何将徽标数据变量与图像的 src 绑定。现在，img 组件从徽标变量中获取源值，并相应地渲染图像。

You can also use it to pass a local data variable as props to another component. A shorter way is using the :attr syntax instead of v-bind:attr. Take the preceding example, for instance. We can rewrite the template as follows:

您还可以使用它将本地数据变量作为道具传递给另一个组件。更简便的方法是使用 :attr 语法而不是 v-bind:attr。以前面的例子为例。我们可以将模板重写如下：

<template>
  <img :src="logo" />
</template>

v-if

This is a powerful directive you can use to conditionally control how elements render inside a component. This directive operates like the if…else and if…else if… conditions.

这是一个功能强大的指令，可用于有条件地控制组件内元素的呈现方式。该指令的操作类似于 if…else 和 if…else if… 条件。

It comes with supporting directives, such as v-else, standing for the else case, and velse-if, standing for the else if case. For example, we want to render different text when count is 2, 4, and 6. The following code will demonstrate how to do so:

它带有支持指令，如 v-else（表示 else 情况）和 velse-if（表示 else if 情况）。例如，我们想在计数为 2、4 和 6 时显示不同的文本。下面的代码将演示如何做到这一点：

<template>
  <div v-if="count === 2">Two</div>
  <div v-else-if="count === 4">Four</div>
  <div v-else-if="count === 6">Six</div>
  <div v-else>Others</div>
</template>
<script setup>
const count = 6
</script>

v-show

You can also control the visible state of HTML elements by using v-show.

您还可以使用 v-show 来控制 HTML 元素的可见状态。

Unlike v-if, with v-show, the Vue engine still mounts the element to the DOM tree but hides it using the display: none CSS style.

与 v-if 不同，使用 v-show 时，Vue 引擎仍会将元素挂载到 DOM 树中，但会使用 display: none CSS 样式将其隐藏。

You can still see the content of the hidden element visible in the DOM tree upon inspecting it, but it is not visible on the UI to end users.

在检查隐藏元素时，您仍然可以在 DOM 树中看到隐藏元素的内容，但最终用户无法在用户界面上看到它。

This directive does not work with v-else or v-else-if.

该指令不适用于 v-else 或 v-else-if。

If v-show results in a true Boolean, it will leave the DOM element as is. If it resolves as false, it will apply the display:none style to the element.

如果 v-show 的布尔值为 true，它将保持 DOM 元素的原样。如果解析为 false，则会对元素应用 display:none 样式。

v-for

We use the v-for directive to accomplish the goal of list rendering based on a data source. The data source is an iterative data collection, such as an array or object. We will dive deeper into different use cases for this directive in a separate section within this chapter.

我们使用 v-for 指令来实现基于数据源的列表渲染目标。数据源是一个迭代数据集合，如数组或对象。我们将在本章的另一节中深入探讨该指令的不同用例。

综合练习

We have gone over the most common directives in Vue. Let’s review and experiment with how to use these directives with the following exercise.

我们已经介绍了 Vue 中最常用的指令。让我们通过下面的练习来回顾并尝试如何使用这些指令。

More complicated components will use multiple directives to achieve the desired outcome. In this exercise, we will construct a component that uses several directives to bind, manipulate, and output data to a template view.

更复杂的组件将使用多个指令来实现所需的结果。在本练习中，我们将构建一个使用多个指令绑定、操作和输出数据到模板视图的组件。

Create a new Vue component file named Exercise1-03.vue in the src/components directory.

在 src/components 目录中新建一个名为 Exercise1-03.vue 的 Vue 组件文件。

Inside Exercise1-03.vue, compose the following code to display the text content:

在 Exercise1-03.vue 中，编写以下代码以显示文本内容：

<template>
  <div>
    <h1>{{ text }}</h1>
  </div>
</template>
<script setup>
const text = 'Directive text';
</script>

修改App.vue，引入组件并渲染：

<script setup>
import Exercise from "./components/Exercise1-03.vue";
</script>
<template>
  <Exercise/>
</template>

Replace the {{}} interpolation with the v-text attribute. The output should not change:

用 v-text 属性替换 {{}} 插值。输出结果不会改变：

<template>
  <div>
    <h1 v-text="text"></h1>
  </div>
</template>
<script setup>
const text = 'Directive text';
</script>

Add the v-once directive to the same element. This will force this DOM element to only load the v-text data once:

在同一元素中添加 v-once 指令。这将迫使 DOM 元素只加载一次 v-text 数据：

<template>
  <div>
    <h1 v-once v-text="text"></h1>
  </div>
</template>

Underneath the h1 element, include a new h2 element that uses the v-html attribute. Add a new local data called html that contains a string with HTML formatting in it, as shown in the following code block:

在 h1 元素下方，加入一个使用 v-html 属性的新 h2 元素。添加名为 html 的新本地数据，该数据包含一个带有 HTML 格式的字符串，如以下代码块所示：

<template>
  <div>
    <h1 v-once v-text="text"></h1>
    <h2 v-html="html" />
  </div>
</template>
<script setup>
const text = 'Directive text';
const html = 'Stylise</br>HTML in<br/><b>your data</b>'
</script>

Add a new local link object that contains a bunch of information such as the URL, target, title, and tab index. Inside the template, add a new anchor HTML element and bind the link object to the HTML element using the v-bind short syntax – for example, :href=“link.url”:

添加一个新的本地链接对象，其中包含大量信息，如 URL、目标、标题和标签索引。在模板中添加一个新的锚 HTML 元素，并使用 v-bind 简语法将链接对象绑定到 HTML 元素，例如 :href=“link.url”：

<template>
  <div>
    <h1 v-once v-text="text"></h1>
    <h2 v-html="html"/>
    <a
        :href="link.url"
        :target="link.target"
        :tabindex="link.tabindex"
    >{{ link.title }}</a>
  </div>
</template>
<script setup>
const text = 'Directive text';
const html = 'Stylise</br>HTML in<br/><b>your data</b>'
const link = {
  title: "Go to Google",
  url: "https://google.com",
  tabindex: 1,
  target: '_blank',
};
</script>

Apply v-if=“false” to the h1 element, v-else-if=“false” to h2, and v-else to the a tag like this:

在 h1 元素上应用 v-if=“false”，在 h2 上应用 v-else-if=“false”，在 a 标签上应用 v-else，就像这样：

<template>
  <div>
    <h1 v-if="false" v-once v-text="text"></h1>
    <h2 v-else-if="false" v-html="html"/>
    <a
        v-else
        :href="link.url"
        :target="link.target"
        :tabindex="link.tabindex"
    >{{ link.title }}</a>
  </div>
</template>
<script setup>
const text = 'Directive text';
const html = 'Stylise</br>HTML in<br/><b>your data</b>'
const link = {
  title: "Go to Google",
  url: "https://google.com",
  tabindex: 1,
  target: '_blank',
};
</script>

You should only see the <a> tag on the page since we have set the main conditional statements to false.

由于我们已将主要条件语句设置为 false，因此在页面上应该只能看到 <a> 标记。

Change the template to use v-show instead of the v-if statements, remove v-else from the <a> element, and change the value of v-show in h1 to true:

更改模板，使用 v-show 代替 v-if 语句，删除 <a> 元素中的 v-else，并将 h1 中 v-show 的值改为 true：

<template>
  <div>
    <h1 v-show="true" v-once v-text="text"></h1>
    <h2 v-show="false" v-html="html"/>
    <a
        :href="link.url"
        :target="link.target"
        :tabindex="link.tabindex"
    >{{ link.title }}</a>
  </div>
</template>
<script setup>
const text = 'Directive text';
const html = 'Stylise</br>HTML in<br/><b>your data</b>'
const link = {
  title: "Go to Google",
  url: "https://google.com",
  tabindex: 1,
  target: '_blank',
};
</script>

In this exercise, we learned about the core Vue directives to control, bind, show, and hide HTML template elements without requiring any JavaScript outside of adding new data objects to your local state.

在本练习中，我们学习了 Vue 的核心指令，这些指令用于控制、绑定、显示和隐藏 HTML 模板元素，而无需任何 JavaScript，只需在本地状态中添加新的数据对象即可。

In the next section, we will learn how to achieve two-way binding with the help of Vue’s v-model.

在下一节中，我们将学习如何借助 Vue 的 v 模型实现双向绑定。