「这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」。

1. Vue的基本使用

1. 模板与Vue实例

准备一个容器，设置一个id名，便于与 Vue 实例的绑定。

容器里的代码也成为 Vue 模版，模板中{{xxxx}}，xxxx要写 JavaScript 表达式。

<div id="root">
    <h1>Hello, I'm {{name.toUpperCase()}}!</h1>
</div>

创建 Vue 实例，传入一个配置对象，Vue 实例和容器是一一对应的。

new Vue({
    el: '#root',
    data: {
        name: 'Jack',
    },
});

模板中的xxxx会读取到实例 Vue 实例中data的所有属性，一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

可以先获取到 Vue 实例对象，再在这个对象上挂载要绑定的容器。

const vm = new Vue({
	data: {
		name: 'Jack',
	},
});
vm.$mount('#root');

data可以写成一个函数，函数要放回一个对象，数据都存放这这个对象中。

new Vue({
	el: '#root',
	data() {
		console.log(this); // 此处的this是Vue实例对象
		return {
			name: 'Jack',
		};
	},
});

插值语法用于解析标签内容。

写法：

{{xxx}}

xxx是 JavaScript 表达式，可以读取到data中的所有属性。

指令语法用于解析标签，例如，标签属性、标签体内容、绑定事件等。

v-bind:href="xxx"

xxx也是 JavaScript 表达式，也可以读取到data中的所有属性。

（1）单向数据绑定

v-bind指令是单向绑定，数据只能从data流向页面。

（2）双向数据绑定

v-model是双向绑定，数据不仅能从data流向页面，也能从页面流向data。

MVVM 模型是指 M-V-VM 模型，其中，各字母的含义以及在 Vue 中代表的是：

data中的所有属性，最后都会挂载到 Vue 的实例对象vm上。

Vue 的实例对象身上的所有属性及 Vue 原型上的所有属性，在 Vue 模板中都可以直接使用。

Vue 通过Object.defineProperty()方法，把data对象中的所有属性添加到 Vue 实例对象vm上。同时，为每一个添加到vm上的属性，都指定getter方法和setter方法。在getter和setter内部，操作data中的属性。

有关Object.defineProperty的更多说明，请看「JavaScript中的Object.defineProperty()方法」。

可以更加方便地操作data中的数据。