一、使用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 = '王五'
            },

11.  通过vue实例的$mount方法，手动挂载容器
       公共el选项指定挂载容器，当模板渲染成功后，会离开挂载页面
       $mount方法的好处是，可以自行选择挂载的时机。