Vue.js 的响应式数据
浏览 772
课文
这节课我们开始学习 Vue 实例中的 data 属性。
实例中的 data 属性是负责存储该 Vue 实例的变量。由于 Vue.js 建立在 MVVM 架构之上，因此它将数据与视图分开，从而使应用程序组织得更好。这意味着应用程序中使用的所有变量都将保存在这个专门处理数据的单独空间中。
数据类型
Vue.js 中的变量是 JavaScript 风格的变量，支持原生 JavaScript 中可用的所有标准类型。这些类型包括：
- String存储字符串
- Number - 存储整数、浮点数和指数符号
- Boolean - 存储“true”或“false”
- Null - 表示空值
- Object 存储对象
- Array - 存储数组
以下代码片段显示了定义的这些数据类型：
data: {
name: '小乔', //string
count: 0, //number
visible: false, //boolean
todos: ['读书', '健身'], //array
error: null //null
object: { //object
foo: 'bar'
}
}
引用 data 变量
我们已经看到 data 变量如何单独存储的，以及它们是不直接连接到视图层的。
但是必须有一种方法将数据变量连接到模板。
现在，从 Vue.js 的角度看看这些变量是如何被引用到 template 上面的。
Vue 实例中的 data 属性是使用 {{ }} 符号（即插值表达式）来引用的。
例如，如果我们要使用一个变量 name， 并且把它的值显示在 template 中，则将该变量放在上面显示的代码中，即在大括号内，即 {{ name }}。这会在运行时将 {{ name }} 替换为变量 name 的当前值。
示例代码：
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app"></div>
<script>
new Vue({
el: '#app',
template:
`<div>
<h1> Vue.js Application </h1>
<p> My name is {{name}}. See how my name is referenced from the data!</p>
</div>
`,
data: {
name: '小乔'
}
})
</script>
</body>
</html>
在上面的示例中，可以看到 Vue 实例有一个值为 「小乔」 的变量 name。需要使用时在 template 中通过 {{ name }} 来引用此变量。
评论
暂无评论