一色罚、使用vue實(shí)現(xiàn)對數(shù)組的增刪改查
1.定義一個學(xué)生數(shù)組
students:[
{
no:'1001',
name:'劉德華',
age:20,
sex:'男'
},
{
no:'1002',
name:'周杰倫',
age:22,
sex:'男'
},
{
no:'1003',
name:'蔡依林',
age:24,
sex:'女'
}
],
//是否顯示編輯窗口
showEdit:false,
//是否是添加狀態(tài)
isAdd:true,
//學(xué)生對象
student:{
no:'',
name:'',
age:0,
sex:''
}
},
2.添加方法
addStudent(){
//將表單數(shù)據(jù)展開后真仲，返回一個新的對象
let stu = {...this.student}
//將學(xué)生對象添加到學(xué)生數(shù)組中
this.students.push(stu)
//調(diào)用清空表單數(shù)據(jù)的方法
this.clear()
},
3.清空表單數(shù)據(jù)的方法
clear(){
this.student = {
no:'',
name:'',
age:0,
sex:''
}
},
4.關(guān)閉編輯窗口
close(){
this.showEdit = false
this.isAdd = true
this.clear()
},
5.根據(jù)學(xué)號查詢學(xué)生對象
getOne(no){
//打開編輯窗口
this.showEdit = true
//編輯窗口是修改狀態(tài)
this.isAdd = false
//根據(jù)學(xué)號查詢學(xué)生對象
let stu = this.students.find(s=>s.no===no)
this.student = {...stu}
},
6.修改學(xué)生信息
updateStudent(){
//根據(jù)學(xué)號，找到原始數(shù)組中指定的學(xué)生對象
let stu = this.students.find(s=>s.no===this.student.no)
//修改數(shù)組里面指定學(xué)生對象的屬性
stu.name = this.student.name
stu.age = this.student.age
stu.sex = this.student.sex
},
7.刪除學(xué)生
delStudent(index){
if(confirm('確定刪除嗎漏健？')){
this.students.splice(index,1)
}
}
二嚎货、vue的生命周期
// 指定掛載的容器
// el:'#app',
// 指定模板（如果有模板，vue會渲染整個模板蔫浆；如果沒有模板殖属，vue會將el里面的所有內(nèi)容當(dāng)成模板使用）
// template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
//數(shù)據(jù)
methods: {
destroy(){
// 調(diào)用銷毀當(dāng)前Vue實(shí)例的方法
// 注意：銷毀后，當(dāng)前Vue實(shí)例對象還在瓦盛，只是該對象不能在重新掛載頁面了
this.$destroy()
}
},
3.創(chuàng)建之前(數(shù)據(jù)初始化之前)
beforeCreate() {
console.log('-----------------beforeCreate------------------');
// 這個生命周期函數(shù)洗显，基本上不用外潜，除非要設(shè)置Vue實(shí)例的內(nèi)容
this.__proto__.fn = function(){
alert('哈哈！')
}
//Vue實(shí)例挠唆，已經(jīng)創(chuàng)建完成
console.log(this);
//Vue實(shí)例身上的數(shù)據(jù)還沒有初始化完成
console.log(this.name+' '+this.age);
},
4.創(chuàng)建完成(數(shù)據(jù)初始化完成)***
created() {
console.log('-----------------created------------------');
// 這個生命周期函數(shù)处窥，通常用于初始化Vue管理的數(shù)據(jù)，比如：發(fā)生ajax請求會放在這里玄组。
console.log(this);
console.log(this.name+' '+this.age);
},
5.掛載之前(模板已經(jīng)成功渲染滔驾，但是還沒有將內(nèi)容掛載到頁面中)
beforeMount() {
console.log('-----------------beforeMount------------------');
// 這個生命周期函數(shù)，基本上不用
console.log(this.$el);
// document.querySelector('#name').innerHTML = "哈哈"
},
6.掛載完成(模板已經(jīng)成功渲染巧勤，并且已經(jīng)將模板內(nèi)容掛載到了頁面)***
mounted() {
console.log('-----------------mounted------------------');
// 這個生命周期函數(shù)嵌灰，通常用于對DOM的重新改動
console.log(this.$el);
// document.querySelector('#name').innerHTML = "呵呵"
},
7.修改之前(數(shù)據(jù)已經(jīng)改了，只是還沒有重新掛載頁面)
beforeUpdate() {
console.log('-----------------beforeUpdate------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
8.修改完成(數(shù)據(jù)已經(jīng)改了颅悉，頁面也已經(jīng)重新掛載)
updated() {
console.log('-----------------updated------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
9.銷毀之前***
beforeDestroy() {
console.log('-----------------beforeDestroy------------------');
// 這個生命周期函數(shù)沽瞭，會用的多一些
console.log(this);
// 對數(shù)據(jù)做任何的修改，都不會重新渲染到頁面
this.name = '王五'
},
10.銷毀完成
destroyed() {
console.log('-----------------destroyed------------------');
// 這個生命周期函數(shù)剩瓶，幾乎不用
console.log(this);
this.name = '王五'
},
通過vue實(shí)例的$mount方法驹溃，手動掛載容器 公共el選項(xiàng)指定掛載容器，當(dāng)模板渲染成功后延曙，會離開掛載頁面 $mount方法的好處是豌鹤，可以自行選擇掛載的時機(jī)。
