课堂学习：使用Vue实现增删改查 Vue的生命周期 Vue制作轮播图
一、使用Vue实现增删改查效果
不大好说 建议直接去敲 或者 看例子
以下写几个需要注意的地方：
1.关于使用 对象 的时候要 展开 的几个地方：
这是一个把student对象添加到students对象数组中的方法（用了两种写法 就是先后展开的顺序不同而已 方法是同一种 一个先展开 一个后展开而已 后一种更好理解）
我们声明了 stu 接收this.student的各项属性和值
然后再把stu添加到students的后面，这里注意要用 “...” 把stu展开
let stu = {...this.student} 展开后的student 就是 { no:''xxx,name:'xxx',age:0,sex:'xxx' }
这样就相当于声明了一个新的对象 let stu = { no:''xxx,name:'xxx',age:0,sex:'xxx' }
如果不展开 就是 stu = student 两个对象相等 对象相等就是储存地址相同 这样如果修改stu的值或者student的值 都会影响到另一方的属性值
2.关于删除的方法：
删除的方法是根据下标来截取 对象数组 students 把和 删除按钮 同一下标的对象从数组中截取掉
这个方法要传入下标 index 因为之前使用了列表渲染 v-for 所以绑定方法时可以直接传 index进去 即 @click=‘delStudent（index）’
3.还有一个需要传值进去的方法：
这里的两个方法第一个是在点击 修改按钮 时 把列表里的值 赋值 给弹出的编辑框
因为列表中的数据都是通过列表渲染 v-for 从对象数组 students 中得到的 所以可以通过某一项属性把这一行列表所对应的对象 从 students 中找出来
这里要传入一个属性 我们使用的是 学号 no 属性
声明了 stu 来接收 用数组的高阶函数 find 来把 students 中 no 属性值与列表中 no 属性值相同的对象找出来 赋值给 stu
然后把stu展开 再令 this.student = {...stu} 重新定义了对象 student
又因为 对象 student 的各个属性和编辑框的各个表单双向绑定 所以就完成了把列表里的值 赋值 给弹出的编辑框
第二个方法是在编辑框内点击修改按钮 使列表中的数据变化
同样是通过学号 no 来从students 中找到相对应的 对象
这边不用传入 no 作为参数 是因为 通过 修改按钮 打开编辑框后 student 对象各个属性已经有相应的值 可以直接拿来用
用stu 来接收找到的相同 no 属性值的对象后
用 student 中各个属性的值 重新定义 stu 接收的这个对象的各个属性的值
这样就影响到了 对象数组 students 中某一个相应的对象 也就是我们通过 no 找到的那个对象
二、Vue的生命周期：
1.Vue生命周期函数加载的顺序：
2.关于模板和手动挂载：
（1）.模板
el:'#app',指定挂载的容器
指定模板（如果有模板，vue会渲染整个模板；如果没有模板，vue会将el里面的所有内容当成模板使用）
template 就是模板 有的话Vue就会渲染这个模板 没有就渲染el里面所有内容
template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
（2）.手动挂载
通过vue实例的$mount方法，手动挂载容器 （这里需要 let vm = new Vue ({})）
公共el选项指定挂载容器，当模板渲染成功后，会立刻挂载页面
$mount方法的好处是，可以自行选择挂载的时机。
vm.$mount('#app')
比如可以把这放到定时器里面
setTimeout(() => {
vm.$mount('#app')
}, 1000);
3.Vue生命周期函数简介：
beforeCreate(){}：创建之前（数据初始化之前）
Vue实例已经创建完成，但是Vue实例未初始化完成（在这个函数里 打印 this 可以得到Vue 但是如果打印data里的属性就是undefined）
这个生命周期函数，基本上不用，除非要设置Vue实例的内容
created(){}：创建之后（数据初始化完成）
在beforeCreate的基础上，Vue实例完成初始化（通俗来说就是Vue中data里的属性可以打印出来了）
这个生命周期函数，通常用于初始化Vue管理的数据，比如：发生ajax请求会放在这里。
beforeMount(){}：挂载之前(模板已经成功渲染，但是还没有将内容挂载到页面中)
差值表达式还无法使用 {{name}} 显示出来还是{{name}}
个生命周期函数，基本上不用
mounted(){}：挂载完成(模板已经成功渲染，并且已经将模板内容挂载到了页面)
{{name}}会显示在data中的值了
这个生命周期函数，通常用于对DOM的重新改动
beforeUpdata(){}：修改之前(数据已经改了，只是还没有重新挂载页面)
Vue中的data里的值已经改变了 但是因为没有挂载所以页面中还是原来的数据
updated(){}：修改完成(数据已经改了，页面也已经重新挂载)
这个就很好理解了 data中的数据和页面中的都改了
beforeDestroy(){}：销毁之前
beforeDestroy() {
console.log('-----------------beforeDestroy------------------');
// 这个生命周期函数，会用的多一些
console.log(this);
// 对数据做任何的修改，都不会重新渲染到页面
this.name = '王五'
},
destroyed(){}：销毁完成
这个生命周期函数，几乎不用
// 通过vue实例的$mount方法，手动挂载容器
// 公共el选项指定挂载容器，当模板渲染成功后，会立刻挂载页面
// $mount方法的好处是，可以自行选择挂载的时机。
vm.$mount('#app')
在destroyed和beforeDestroy中 修改数据无效。
