03 动态渲染数据

概述

One of the most used terms and reactive elements used when constructing Vue components is data properties. These manifest themselves within the data() function of a Vue instance:

数据属性是构建 Vue 组件时最常用的术语和反应式元素之一。这些属性体现在 Vue 实例的 data() 函数中：

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

You can use the data() function to create a local data object to essentially store any information you want to use within your Vue templates. This local object is bound to the component and we call it the local state data of the component. When any property of this local object is updated or changed, it will reactively update in the corresponding template.

您可以使用 data() 函数创建一个本地数据对象，以存储您想在 Vue 模板中使用的任何信息。这个本地对象与组件绑定，我们称之为组件的本地状态数据。当该本地对象的任何属性被更新或更改时，它将在相应的模板中进行反应式更新。

Once we have defined our local data, we need to bind it to the template section to display its values in the UI, which is called data interpolation.

定义好本地数据后，我们需要将其绑定到模板部分，以便在用户界面中显示其值，这就是所谓的数据插值。

Interpolation is the insertion of something of a different nature into something else. In the Vue context, this is where you would use mustache syntax (double curly braces) to define an area in which you can inject data into a component’s HTML template.

插值是将不同性质的东西插入到其他东西中。在 Vue 环境中，您可以使用大胡子语法（双大括号）定义一个区域，将数据注入组件的 HTML 模板中。

Consider the following example:

请看下面的例子：

<template>
  <span> {{ color }}</span>
</template >
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

The data property of red is bound to Vue.js reactive data and will update during runtime, depending on state changes between the UI and its data.

red 的数据属性与 Vue.js 的反应数据绑定，并将根据用户界面和数据之间的状态变化在运行时更新。

At this point, we should look at how to define and bind local data in the most classical Vue way. With Vue 3.0, we enjoy a shorter and simpler approach to writing and importing components. Let’s explore it next.

在这一点上，我们应该看看如何以最经典的 Vue 方式定义和绑定本地数据。有了 Vue 3.0，我们在编写和导入组件时可以使用更短更简单的方法。让我们接下来探讨一下。

练习：动态渲染数据

将App.vue改为如下代码：

<template>
  <span> {{ color }}</span>
</template >
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

浏览器访问：http://localhost:5173/