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数据结构。做题目项目就是遇见问题解决问题。自己的问题自己想明白相通。改变不了的，那就算了。预算。
时间有限，学知识，是我自己的知识，我自己想学。
本科努力就不会这么惨，所以现在努力。我只有努力学习工作，别的什么也没有。
学习，问这个领域优秀的人。
