vue 第6节 生命周期钩子

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 代码：

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

<template>
   <div>
    <h1>声明周期勾钩子</h1>
   </div>
</template>

<script>
export default {
  created(){
    console.log("这是created函数的内容。");
  }

}
</script>

<style></style>

显示界面

 生命周期钩子

异步加载水果列表代码

 

<template>
  <div>
    <h1>水果列表</h1>
    <!-- v-for=""循环.  :key -->
    <ol>
      <li v-for="(fruit, i) of fruits" :key="i">{{ fruit }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    // return 声明数据
    return {
      fruits: ['香蕉', '苹果', '梨子'],
    };
  },
  mounted() {
    console.log('这是mounted()函数的内容。');
  },
  created() {
    console.log('这是created函数的内容。');
  },
};
</script>

<style></style>

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

<template>
  <div>
    <h1>水果列表</h1>
    <!-- v-for=""循环.  :key -->
    <div>loading...</div>
    <ol>
      <li v-for="(fruit, i) of fruitList" :key="i">{{ fruit }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    // return 声明数据
    return {
      fruitList: [],
    };
  },
  mounted() {
    console.log('这是mounted()函数的内容。');
  },
  created() {
    // console.log('这是created函数的内容。');
    // 必须在created里面调用getData函数才能有数值,显示当中才有数值。
    this.getData();
  },
  methods: {
    // 在methods中写方法
    getData() {
      // 通过计时器，模拟一个ajax获取数据的方法。
      //  setTimeout(()=>{},时间ms)
      setTimeout(() => {
        this.fruitList = ['香蕉', '苹果', '梨'];
      }, 500);
    },
  },
};
</script>

<style></style>

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

loading是true显示的时候

 

<template>
  <div>
    <h1>水果列表</h1>
    <!-- v-for=""循环.  :key    v-if表示是否显示，是布尔值 -->

    <div v-if="loading">loading...</div>
    <ol v-if="!loading">
      <li v-for="(fruit, i) of fruitList" :key="i">{{ fruit }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    // return 声明数据
    return {
      fruitList: [],
      loading: true,
    };
  },
  mounted() {
    console.log('这是mounted()函数的内容。');
  },
  created() {
    // console.log('这是created函数的内容。');
    // 必须在created里面调用getData函数才能有数值,显示当中才有数值。
    this.getData();
  },
  methods: {
    // 在methods中写方法
    getData() {
      // 通过计时器，模拟一个ajax获取数据的方法。
      //  setTimeout(()=>{},时间ms)
      setTimeout(() => {
        this.fruitList = ['香蕉', '苹果', '梨'];
        // 赋值之后，loading就变成false不显示
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style></style>

今天学了什么？今天学了 生命周期钩子。学了created(){}函数和mounted(){}函数。created(){}函数在程序初始化的时候就会运行。跟着视频，做了三个例子。第一个，先在data方法中声明变量数据fruitList:["香蕉","苹果","梨子"]，在列表中用li标签里用v-for循环输出数组的值，:key属性是绑定数组的索引。<li v-for="(fruit,index) of fruitList" :key="index"> 第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数据结构。做题目项目就是遇见问题解决问题。自己的问题自己想明白相通。改变不了的，那就算了。预算。

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

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

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