VUE学习八，数据对象加入

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

一、示范代码

// 我们的数据对象
var data = { firstname: 'CL', lastname: '张' }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
    el: '#app-8',
    data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
console.log(vm.lastname == data.lastname);

// 设置 property 也会影响到原始数据
vm.lastname = '李';
console.log(data.lastname);

// ……反之亦然
data.lastname = '王';
console.log(vm.lastname);

<div id="app-8">
    {{lastname}}
</div>

二、效果图

三、整体代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VUE简单示范</title>
<script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script>
</head>
<body>
<div id="app-8">
    {{lastname}}
</div>
<script>
// 我们的数据对象
var data = { firstname: 'CL', lastname: '张' }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
    el: '#app-8',
    data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
console.log(vm.lastname == data.lastname);

// 设置 property 也会影响到原始数据
vm.lastname = '李';
console.log(data.lastname);

// ……反之亦然
data.lastname = '王';
console.log(vm.lastname);
</script>
</body>
</html>

View Code

本文参考：

https://cn.vuejs.org/v2/guide/instance.html