一、使用vue实现对数组的增删改查
1.定义一个学生数组
students:[
{
no:'1001',
name:'刘德华',
age:20,
sex:'男'
},
{
no:'1002',
name:'周杰伦',
age:22,
sex:'男'
},
{
no:'1003',
name:'蔡依林',
age:24,
sex:'女'
}
],
//是否显示编辑窗口
showEdit:false,
//是否是添加状态
isAdd:true,
//学生对象
student:{
no:'',
name:'',
age:0,
sex:''
}
},
2.添加方法
addStudent(){
//将表单数据展开后，返回一个新的对象
let stu = {...this.student}
//将学生对象添加到学生数组中
this.students.push(stu)
//调用清空表单数据的方法
this.clear()
},
3.清空表单数据的方法
clear(){
this.student = {
no:'',
name:'',
age:0,
sex:''
}
},
4.关闭编辑窗口
close(){
this.showEdit = false
this.isAdd = true
this.clear()
},
5.根据学号查询学生对象
getOne(no){
//打开编辑窗口
this.showEdit = true
//编辑窗口是修改状态
this.isAdd = false
//根据学号查询学生对象
let stu = this.students.find(s=>s.no===no)
this.student = {...stu}
},
6.修改学生信息
updateStudent(){
//根据学号，找到原始数组中指定的学生对象
let stu = this.students.find(s=>s.no===this.student.no)
//修改数组里面指定学生对象的属性
stu.name = this.student.name
stu.age = this.student.age
stu.sex = this.student.sex
},
7.删除学生
delStudent(index){
if(confirm('确定删除吗？')){
this.students.splice(index,1)
}
}
二、vue的生命周期
// 指定挂载的容器
// el:'#app',
// 指定模板（如果有模板，vue会渲染整个模板；如果没有模板，vue会将el里面的所有内容当成模板使用）
// template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
//数据
methods: {
destroy(){
// 调用销毁当前Vue实例的方法
// 注意：销毁后，当前Vue实例对象还在，只是该对象不能在重新挂载页面了
this.$destroy()
}
},
3.创建之前(数据初始化之前)
beforeCreate() {
console.log('-----------------beforeCreate------------------');
// 这个生命周期函数，基本上不用，除非要设置Vue实例的内容
this.__proto__.fn = function(){
alert('哈哈！')
}
//Vue实例，已经创建完成
console.log(this);
//Vue实例身上的数据还没有初始化完成
console.log(this.name+' '+this.age);
},
4.创建完成(数据初始化完成)***
created() {
console.log('-----------------created------------------');
// 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发生ajax请求会放在这里。
console.log(this);
console.log(this.name+' '+this.age);
},
5.挂载之前(模板已经成功渲染，但是还没有将内容挂载到页面中)
beforeMount() {
console.log('-----------------beforeMount------------------');
// 这个生命周期函数，基本上不用
console.log(this.$el);
// document.querySelector('#name').innerHTML = "哈哈"
},
6.挂载完成(模板已经成功渲染，并且已经将模板内容挂载到了页面)***
mounted() {
console.log('-----------------mounted------------------');
// 这个生命周期函数，通常用于对DOM的重新改动
console.log(this.$el);
// document.querySelector('#name').innerHTML = "呵呵"
},
7.修改之前(数据已经改了，只是还没有重新挂载页面)
beforeUpdate() {
console.log('-----------------beforeUpdate------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
8.修改完成(数据已经改了，页面也已经重新挂载)
updated() {
console.log('-----------------updated------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
9.销毁之前***
beforeDestroy() {
console.log('-----------------beforeDestroy------------------');
// 这个生命周期函数，会用的多一些
console.log(this);
// 对数据做任何的修改，都不会重新渲染到页面
this.name = '王五'
},
10.销毁完成
destroyed() {
console.log('-----------------destroyed------------------');
// 这个生命周期函数，几乎不用
console.log(this);
this.name = '王五'
},
通过vue实例的$mount方法，手动挂载容器 公共el选项指定挂载容器，当模板渲染成功后，会离开挂载页面 $mount方法的好处是，可以自行选择挂载的时机。
