## vue 響應原理
# 對象
1；對象新增的屬性，不具有響應式。
2：對象本存在屬性，具有響應式。
3: 屬性是數組，數組的普通元素通過索引修改 不會進行響應式；
但如果數組元素也是一個對象，則該對象具有響應式。
4: 屬性值是數組，通過調用push\splice\shift...具有響應式，並且添加元素值是一個對象
也具有響應式。
系統核心邏輯：
【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 {
width: 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