金山老师的笔记# 1.Vue概述
1.1.早期前后端分离模式
早期的前后端分离开发模式是这样的：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
width: 600px;
text-align: center;
border-bottom: solid 2px #DDD;
/* 合并边框 */
border-collapse: collapse;
}
td,th {
border-bottom: solid 1px #DDD;
height: 40px;
}
</style>
</head>
<body>
<h3>用户信息</h3>
<table>
<tr>
<th>用户编号</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>用户年龄</th>
</tr>
<tbody id="userBox">
<!-- 这里是动态内容 -->
</tbody>
</table>
<script>
let userArr = [{
userId: 1,
userName: '张三',
userSex: '男',
userAge: 20
}, {
userId: 2,
userName: '李四',
userSex: '女',
userAge: 21
}, {
userId: 3,
userName: '王五',
userSex: '男',
userAge: 22
}]
let userBox = document.getElementById('userBox');
let str = '';
for (let i = 0; i < userArr.length; i++) {
str += '<tr>' +
'<td>' + userArr[i].userId + '</td>' +
'<td>' + userArr[i].userName + '</td>' +
'<td>' + userArr[i].userSex + '</td>' +
'<td>' + userArr[i].userAge + '</td>' +
'</tr>';
}
userBox.innerHTML = str;
</script>
</body>
</html>以上开发模式的特点是：
- 必须直接操作DOM，动态改变DOM对象的内容与样式。
- 必须要进行大量的字符串拼接，才能拼接出动态内容，然后绑定到视图（html）上。
- 这种绑定方式是单向的。即：使用javascript将动态数据绑定到DOM上，但是用户操作DOM引起的变化，却不能反映到javascript的动态数据上。
1.2.MVVM框架
MVVM框架分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
- M：模型层，主要负责业务数据相关；
- V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
- VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
1.3.Vue简介
Vue.js : 渐进式JavaScript 框架（官网说明），它就是一个前端MVVM框架。 Vue.js的作者为Evan You（尤雨溪），任职于Google Creative Lab。 Vue的主要特点就和它官网 https://cn.vuejs.org/ 所介绍的那样： （1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化
