vue 第6节 生命周期钩子


第6节 生命周期钩子    https://www.bilibili.com/video/BV1er4y1P7UN?p=6&vd_source=a21f209175182b05e7cc789bc2b2aedb

知识很多,一个一个学,做的多了就会有熟悉感。没有学习工作,我一无所有。有了学习工作,就给我了很多东西。

把这个里面的知识用自己的话写出来说出来,才是理解了。敲,不管会不会做题目发现问题。

数学不做任何学科不联系都会忘记。practice makes perfect.

 

 代码:

created(){}函数用的很少,mounted(){}函数用的多,用于【比如页面加载完成之后,要调用一次查询数据】。初始化的时候它就会运动启动。





显示界面

 生命周期钩子

异步加载水果列表代码





将data中声明的数组变成空值。使用计时器setTimeout(()=>{},时间)用函数getData(){},里面给这边的变量赋值是什么。在created(){}方法中调用methods当中的函数,this.getData() ;





v-if显示的。首先1)声明loading赋值是false,2)然后在loading所在的div标签里写v-if="{{loading}}"     3)在列表的的ul标签里面写v-if=“!loading”     4)在计时器中this.fruitList赋值之后写this..loading=false;

loading是true显示的时候

 





今天学了什么?今天学了 生命周期钩子。学了created(){}函数和mounted(){}函数。created(){}函数在程序初始化的时候就会运行。跟着视频,做了三个例子。第一个,先在data方法中声明变量数据fruitList:["香蕉","苹果","梨子"],在列表中用li标签里用v-for循环输出数组的值,:key属性是绑定数组的索引。

  • 第2,是在methods属性中写getData(){}方法中写计时器方法,用ajax获取数据的方法 setTimeout(()=>{this.fruit=["香蕉","苹果","梨子"]},时间) 这边写的时候要将data(){}声明变量那边的值变成空的。然后在created(){}中调用getData(){}函数 this.getData(); 然后html中才能得到数据显示。 第三个,实现 数据未加载出来之前只显示loading字母,数据加载出来之后loading字母不显示,只显示数据。1)在data(){}方法中声明变量loading:true;就是未加载出来显示loading 2)在loading文字所在的标签div里面写v-if="loading" 3)在数据显示的标签ul中写v-if="!loading" 4)在计时器,ajax获取数据,赋值之后,写this.loading=false; 就是在获取到数据之后,loading数字就不显示了,显示数据。
    vue还有四个课时没看完。明天我继续学。

    珍惜自己已经拥有的。知道自己还有很多知识概念没明白没学,那就去学呗,打基础。然后js数据结构。做题目项目就是遇见问题解决问题。自己的问题自己想明白相通。改变不了的,那就算了。预算。

    时间有限,学知识,是我自己的知识,我自己想学。

    本科努力就不会这么惨,所以现在努力。我只有努力学习工作,别的什么也没有。

    学习,问这个领域优秀的人。