跳到主要内容位置

Vue 3.x:使用 data 配置项提供响应性数据

张旭乾

这篇文章我们看一下如何使用 data 来为 HTML 模板提供数据。在普通 HTML 中,我们编写的文本都是静态的,如果要改变一段文字,需要使用 JavaScript 来修改:

// html
<div>原始文本</div>;

// js
const div = document.querySelector("div");
div.innerHTML = "新文本";

而在 Vue 中,我们可以通过它的 data 属性,来把数据绑定到 HTML 中:

<div>{{ msg }}</div>

{ data() { return { msg: "你好" } } }

在绑定之后:

HTML 中的文本变成了动态的,data 中的数据变化时,HTML 中的文本也会变化。

接下来,我们先看一下如何展示动态的数据,对于如何更改数据,我们在后面的小节中再介绍。

概念

要使用 data,我们需要在 Vue 的 createApp() 方法中传递一个对象,并在对象里定义一个名为 data 的函数,这里注意 data 必须是一个函数,这样数据变化的时候,Vue 才能监测到,来帮我们自动更新 HTML。这里传给 createApp() 的对象,是 Vue 的配置对象,几乎所有 Vue 的功能都通过这个对象来实现。

const app = Vue.createApp({
data() {},
});

data 函数需要返回一个对象,对象中的所有顶级的属性,都可以直接在 HTML 中访问,例如这里的 name 属性:

const app = Vue.createApp({
data() {
return {
name: "眀昊",
};
},
});

顶级属性是说对象的第一级属性,如果对象中有嵌套的子对象,需要使用普通的对象访问语法来访问:

const app = Vue.createApp({
data() {
return {
name: "眀昊",
address: {
// 作为整体
city: "北京",
},
};
},
});

// address.city

data 返回的对象属性值可以是任意 JavaScript 类型,例如:字符串、数组、布尔值、null、undefined、对象、数字、函数等,它们在绑定到 HTML 中时,都会原样转换为字符串类型。

const app = Vue.createApp({
data() {
return {
name: "眀昊", // 字符串
// name: ["明昊", "北辰"], // 数组
// name: false, // 布尔值
// name: null, // null
// name: undefined, // undefined
// name: { firstName: "昊", lastName: "明" }, // 对象
// name: 666, // 数字
// name: function () { // 函数
// return "明昊";
// },
};
},
});

模板插值

要在 HTML 中访问 data 中的属性,可以利用模板插值语法。因为在调用 Vue 实例的 mount 方法后,所选择的元素以及它下边的子元素都会成为 Vue 的模板,所以我们可以在里边使用 Vue 提供的模板语法:

app.mount("#app");

当 data 中的属性作为开合标签中间的文本值时,可以直接使用两个大括号,中间写上要绑定的属性名,其它大括号外面的值则会原样输出:

<h1>你好!{{ name }}</h1>

实践

我们来实际看一下这个例子,使用我们之前文章配置好的起始项目。 我们首先打开 index.html 文件,在 id 为 app 的 div 中添加一个 h1 标签,写上一段欢迎语:

<div id="app">
<h1>你好!明昊</h1>
</div>

写完之后,在空白处右击,选择 Open with Live Server 预览一下效果,可以看到显示了静态的 HTML:

img

接下来,我们要把这个名字替换为 Vue 中 data 函数提供的数据。打开 index.js 文件,在 createApp() 方法中传递一个对象,对象中编写一个 data() 函数,然后在 data() 函数中返回一个对象,对象中有一个 name 属性,这里随意写一个名字:

const app = Vue.createApp({
data() {
return {
name: "眀昊",
};
},
});

接下来,我们修改一下 html,使用模板插值语法,把写死的名字替换为 name 属性的值:

<div id="app">
<h1>你好!{{name}}</h1>
</div>

这样,就把 name 属性值绑定到 {{ name }} 所在的位置了。 这个时候,我们可以尝试一下不同类型的数据:

  • 例如把它改成数组的形式。
  • 把它改成布尔类型的形式。
  • 改成对象的形式
  • ...等等,你可以自己尝试一下不同的值的输出结果。
const app = Vue.createApp({
data() {
return {
name: "眀昊", // 字符串
// name: ["明昊", "北辰"], // 数组
// name: false, // 布尔值
// name: null, // null
// name: undefined, // undefined
// name: { firstName: "昊", lastName: "明" }, // 对象
// name: 666, // 数字
// name: function () { // 函数
// return "明昊";
// },
};
},
});

不过这里要注意,如果属性值是 null 或 undefined,那么 vue 会直接输出空白,而不是 null 或 undefined 的字符串形式,这两个值适合在页面刚加载的时候用来占位,后面根据需要再替换成真实值。

小结

好了,这个就是 Vue 的 data 属性的使用方法,data 属性值是一个函数,函数需要返回一个对象,对象中的顶级属性可以直接在 HTML 模板中使用,使用方式为两个大括号中间,写上属性的名字,在实际运行的时候,vue 就会把它们替换成真实值。

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买