Vue 笔记11.24 使用Vue实现增删改查效果、Vue的生命周期

Posted 2023-03-27

参考技术A  课堂学习：使用Vue实现增删改查    Vue的生命周期   Vue制作轮播图

不大好说 建议直接去敲 或者 看例子

以下写几个需要注意的地方：

这是一个把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的值 都会影响到另一方的属性值 

删除的方法是根据下标来截取 对象数组 students 把和 删除按钮 同一下标的对象从数组中截取掉

这个方法要传入下标 index 因为之前使用了列表渲染 v-for 所以绑定方法时可以直接传 index进去 即 @click=‘delStudent（index）’

这里的两个方法第一个是在点击 修改按钮 时 把列表里的值 赋值 给弹出的编辑框

因为列表中的数据都是通过列表渲染   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 找到的那个对象

（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);

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中 修改数据无效。

vue-实现对数组的增删改查

参考技术A 使用vue实现对数组的增删改查
1、css

2、html

3、vue
data的两种形式：
① 对象形式 data： ： 直接在里面写数据
② 方法形式 data() ：由方法返回对象