## vue 响应原理
# 对象
1；对象新增的属性，不具有响应式。
2：对象本存在属性，具有响应式。
3: 属性是数组，数组的普通元素通过索引修改 不会进行响应式；
但如果数组元素也是一个对象，则该对象具有响应式。
4: 属性值是数组，通过调用pushspliceshift...具有响应式，并且添加元素值是一个对象
也具有响应式。
系统核心逻辑：
【1】布局
<div id="app">
<div class="addStu">
<label for="">编号: <input type="text" v-model="id" disabled='flag'></label>
<label for="">姓名: <input type="text" v-model="name"></label>
<label for="">性别: <input type="text" v-model="sex"></label>
<button @click="handleAddStu">提交</button>
</div>
<table class="tabCont">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='stu.id' v-for='stu in students'>
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td><a href="" @click.prevent='toEdit(stu.id)'>修改</a> | <a href="" @click.prevent='removeStu(stu.id)'>删除</a> </td>
</tr>
</tbody>
</table>
</div>
【2】CSS
.addStu,
.tabCont {
662px;
margin: 0 auto;
border-collapse: collapse;
}
.addStu,
.tabCont th {
background-color: orange;
}
.tabCont th,
.tabCont td {
height: 35px;
border: 1px dashed black;
padding: 10px;
text-align: center;
}
【3】JS操作
//添加数据
handleAddStu() {
if (this.flag) { //修改数组中数据
this.students.some(item => {
if (item.id == this.id) {
item.name = this.name;
item.sex = this.sex;
return true;
}
});
this.flag = false;
} else {
//vue处理获得填写的数据
let stu = {
id: this.id,
name: this.name,
sex: this.sex
};
this.students.push(stu);
}
//清空表单元素
this.id = '';
this.name = '';
this.sex = '';
},
//编辑学生信息
toEdit(id) {
//点击修改 禁止添加学生
this.flag = true;
//根据id查到对应学生的信息，然后填充到表单
console.log(id);
let student = this.students.filter(stu => {
return stu.id === id;
});
this.id = student[0].id;
this.name = student[0].name;
this.sex = student[0].sex;
}
//删除学生信息
【1】方法1，splice
let index = this.students.findIndex(stu => {
return stu.id == id;
});
this.students.splice(index, 1);
【2】filter获取新的数组
this.students = this.students.filter(stu => stu.id != id);
补充：
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])start- 指定修改的开始位置（从0计数）
deleteCount：
整数，表示要移除的数组元素的个数。
如果
deleteCount是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。item1, item2, ...可选- 要添加进数组的元素,从
start位置开始。如果不指定，则splice()将只删除数组元素。
slice()方法返回一个新的数组对象，这一对象是一个由begin和end决定的原数组的浅拷贝（包括begin，不包括end）。
## 模块化
一个功能单独封装到一个模块中
## 浏览器
AMD(require.js)
CMD(Sea.js)
## 服务端
commonjs
## es6模块化是浏览器与服务器通用的模块化方案
每一个js文件也是一个模块
import导入模块
export导出模块
## 安装包
npm i --save-dev
@babel/core
@babel/cli
@babel/preset-env
@babel/node
npm i --save @babel/polyfill
npx babel-node index
html-webpack-plugin 生成一个预览页面
##
npm i --save-dev @babel/core
npm i --save-dev @babel/cli
npm i --save-dev @babel/preset-env
npm i --save-dev @babel/node
npm i --save @babel/polyfill