?課堂學(xué)習(xí)：使用Vue實(shí)現(xiàn)增刪改查? ? Vue的生命周期? ?Vue制作輪播圖
一、使用Vue實(shí)現(xiàn)增刪改查效果
不大好說 建議直接去敲 或者 看例子
以下寫幾個(gè)需要注意的地方：
1.關(guān)于使用? ?對(duì)象? ?的時(shí)候要? ? 展開? ? 的幾個(gè)地方：
這是一個(gè)把student對(duì)象添加到students對(duì)象數(shù)組中的方法（用了兩種寫法 就是先后展開的順序不同而已 方法是同一種 一個(gè)先展開 一個(gè)后展開而已 后一種更好理解）
我們聲明了 stu 接收this.student的各項(xiàng)屬性和值?
然后再把stu添加到students的后面，這里注意要用 “...” 把stu展開
let stu = {...this.student}? 展開后的student 就是 { no:''xxx,name:'xxx',age:0,sex:'xxx'? }?
這樣就相當(dāng)于聲明了一個(gè)新的對(duì)象 let stu =?{ no:''xxx,name:'xxx',age:0,sex:'xxx'? }
如果不展開 就是 stu = student 兩個(gè)對(duì)象相等 對(duì)象相等就是儲(chǔ)存地址相同 這樣如果修改stu的值或者student的值 都會(huì)影響到另一方的屬性值?
2.關(guān)于刪除的方法：
刪除的方法是根據(jù)下標(biāo)來截取 對(duì)象數(shù)組 students 把和 刪除按鈕 同一下標(biāo)的對(duì)象從數(shù)組中截取掉
這個(gè)方法要傳入下標(biāo) index 因?yàn)橹笆褂昧肆斜礓秩?v-for 所以綁定方法時(shí)可以直接傳 index進(jìn)去 即 @click=‘delStudent（index）’
3.還有一個(gè)需要傳值進(jìn)去的方法：
這里的兩個(gè)方法第一個(gè)是在點(diǎn)擊 修改按鈕 時(shí) 把列表里的值 賦值 給彈出的編輯框
因?yàn)榱斜碇械臄?shù)據(jù)都是通過列表渲染? ?v-for? ?從對(duì)象數(shù)組 students 中得到的 所以可以通過某一項(xiàng)屬性把這一行列表所對(duì)應(yīng)的對(duì)象 從 students 中找出來
這里要傳入一個(gè)屬性 我們使用的是 學(xué)號(hào) no 屬性?
聲明了 stu 來接收 用數(shù)組的高階函數(shù)? ?find? ?來把 students 中 no 屬性值與列表中 no 屬性值相同的對(duì)象找出來 賦值給 stu
然后把stu展開 再令 this.student = {...stu}? 重新定義了對(duì)象 student?
又因?yàn)?對(duì)象 student 的各個(gè)屬性和編輯框的各個(gè)表單雙向綁定 所以就完成了把列表里的值 賦值 給彈出的編輯框
第二個(gè)方法是在編輯框內(nèi)點(diǎn)擊修改按鈕 使列表中的數(shù)據(jù)變化
同樣是通過學(xué)號(hào) no 來從students 中找到相對(duì)應(yīng)的 對(duì)象
這邊不用傳入 no 作為參數(shù) 是因?yàn)?通過 修改按鈕 打開編輯框后 student 對(duì)象各個(gè)屬性已經(jīng)有相應(yīng)的值 可以直接拿來用?
用stu 來接收找到的相同 no 屬性值的對(duì)象后?
用 student 中各個(gè)屬性的值 重新定義 stu 接收的這個(gè)對(duì)象的各個(gè)屬性的值
這樣就影響到了 對(duì)象數(shù)組 students 中某一個(gè)相應(yīng)的對(duì)象 也就是我們通過 no 找到的那個(gè)對(duì)象
二、Vue的生命周期：
1.Vue生命周期函數(shù)加載的順序：
2.關(guān)于模板和手動(dòng)掛載：
（1）.模板
el:'#app',指定掛載的容器
指定模板（如果有模板，vue會(huì)渲染整個(gè)模板；如果沒有模板，vue會(huì)將el里面的所有內(nèi)容當(dāng)成模板使用）
template?就是模板??有的話Vue就會(huì)渲染這個(gè)模板?沒有就渲染el里面所有內(nèi)容
template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
（2）.手動(dòng)掛載
通過vue實(shí)例的$mount方法，手動(dòng)掛載容器 （這里需要 let vm = new Vue ({})）
公共el選項(xiàng)指定掛載容器，當(dāng)模板渲染成功后，會(huì)立刻掛載頁面
$mount方法的好處是，可以自行選擇掛載的時(shí)機(jī)。
vm.$mount('#app')
比如可以把這放到定時(shí)器里面??
setTimeout(()?=>?{
????????????vm.$mount('#app')
????????},?1000);
3.Vue生命周期函數(shù)簡介：
beforeCreate(){}：創(chuàng)建之前（數(shù)據(jù)初始化之前）
Vue實(shí)例已經(jīng)創(chuàng)建完成，但是Vue實(shí)例未初始化完成（在這個(gè)函數(shù)里 打印 this 可以得到Vue 但是如果打印data里的屬性就是undefined）
這個(gè)生命周期函數(shù)，基本上不用，除非要設(shè)置Vue實(shí)例的內(nèi)容
created(){}：創(chuàng)建之后（數(shù)據(jù)初始化完成）
在beforeCreate的基礎(chǔ)上，Vue實(shí)例完成初始化（通俗來說就是Vue中data里的屬性可以打印出來了）
這個(gè)生命周期函數(shù)，通常用于初始化Vue管理的數(shù)據(jù)，比如：發(fā)生ajax請(qǐng)求會(huì)放在這里。
beforeMount(){}：掛載之前(模板已經(jīng)成功渲染，但是還沒有將內(nèi)容掛載到頁面中)
差值表達(dá)式還無法使用 {{name}} 顯示出來還是{{name}}
個(gè)生命周期函數(shù)，基本上不用
mounted(){}：掛載完成(模板已經(jīng)成功渲染，并且已經(jīng)將模板內(nèi)容掛載到了頁面)
{{name}}會(huì)顯示在data中的值了
這個(gè)生命周期函數(shù)，通常用于對(duì)DOM的重新改動(dòng)
beforeUpdata(){}：修改之前(數(shù)據(jù)已經(jīng)改了，只是還沒有重新掛載頁面)
Vue中的data里的值已經(jīng)改變了 但是因?yàn)闆]有掛載所以頁面中還是原來的數(shù)據(jù)
updated(){}：修改完成(數(shù)據(jù)已經(jīng)改了，頁面也已經(jīng)重新掛載)
這個(gè)就很好理解了 data中的數(shù)據(jù)和頁面中的都改了
beforeDestroy(){}：銷毀之前
beforeDestroy()?{
????????????????console.log('-----------------beforeDestroy------------------');
????????????????//?這個(gè)生命周期函數(shù)，會(huì)用的多一些
????????????????console.log(this);
????????????????//?對(duì)數(shù)據(jù)做任何的修改，都不會(huì)重新渲染到頁面
????????????????this.name?=?'王五'
????????????},
destroyed(){}：銷毀完成
這個(gè)生命周期函數(shù)，幾乎不用
//?通過vue實(shí)例的$mount方法，手動(dòng)掛載容器
????????????//?公共el選項(xiàng)指定掛載容器，當(dāng)模板渲染成功后，會(huì)立刻掛載頁面
????????????//?$mount方法的好處是，可以自行選擇掛載的時(shí)機(jī)。
????????????vm.$mount('#app')
在destroyed和beforeDestroy中 修改數(shù)據(jù)無效。
