前端（day05）Vue，Vue的钩子函数created：

关注

原创 2022-06-12 17:08:38 2.4k 阅读 AI 写同款· GEO 优化 ›

前端面试题 Vue 中的生命函数(钩子函数) 一，生命周期(钩子函数) 的简介生命周期函数又叫钩子函数, 像它的名字一样,这也是个函数,与其他 methods 中定义的函数不同的是,Vue 中已经规定好了他的触发条件,而这些不同的触发条件就是一个 Vue 文件从初始化到删除关闭必定经历的一些时间点,而我们就可以通过这些时间点进行各种操作常用的钩子函数分为四类: 初始化 beforeCreate created 挂载 beforeMount mounted 更新 bef... 阅读详情

Vue

概念：一套构建用户界面的渐进式前端框架

1.创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2. 引入Vue.js

<script src="../day03/vue.js"></script>

3.创建一个Vue实例

<script type="text/javascript">
			var config={
				"el":"#app",
				"data":{
					"msg":"hello vue"
				},
				"methods":{
					test1(){
						document.write("定义的方法")
					}
				}
			}

说明：

el: '#vue'：绑定元素的ID
data:{message:'Hello Vue!'}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！

4. 将数据绑定到页面元素

<div id="app">	
</div>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">	
		</div>
		<script src="../day03/vue.js"></script>
		<script type="text/javascript">
			var config={
				"el":"#app",
				"data":{
					"msg":"hello vue"
				},
				"methods":{
					test1(){
						document.write("定义的方法")
					}
				}
			}
			var vu=new Vue(config);
			vu.test1();
		</script>
	</body>
</html>

vue的指令

v-html：给标签设置文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a href="https://www.baidu.com/" v-html="msg"></a>
		</div>
		<script src="../day03/vue.js">
			
		</script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"msg":"点击我",
				},
			})
		</script>
	</body>
</html>

v-bind：给标签的属性赋值，作用和：一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="url" >点击我</a>
		</div>
		<script src="../day03/vue.js">
			
		</script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"url":"https://www.baidu.com/",
				},
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--:属性名=变量 让元素的属性和变量进行绑定-->
    <input type="text" :value="info">
    <input type="text" v-bind:value="info">

    <a :href="url">超链接</a>
    <img :src="imageName" alt="">
</div>
<!--引入网络版的Vue框架 Vue插件才会正常工作-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
    new Vue({
        el: "div",
        data: {
            info: "属性绑定",
            url:"http://www.baidu.com",
            imageName:"head.jpg"
        }
    })
</script>
</body>
</html>

v-if，v-else,v-else-if：条件指令，写条件表达式，如果条件不成立，删除标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a href="https://www.baidu.com/" v-if="num>2">点击访问百度</a><hr/>
			<a href="https://www.baidu.com/" v-else-if="num>11">点击访问百度</a>
		</div>
		<script src="../day03/vue.js">
		</script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"num":10,
					"name":"jack",
				},
			})
		</script>
	</body>
</html>

v-show：条件不成立，使用css样式隐藏标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a href="https://www.baidu.com/" v-show="num>11">点击访问百度</a><hr/>
		</div>
		<script src="../day03/vue.js">
		</script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"num":10,
					"name":"jack",
				},
			})
		</script>
	</body>
</html>

@click为v-on:click的缩写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="a">
			<button v-on:click="test1()">方式一绑定</button>
			<button @click="test2()">方式二绑定</button>
		</div>
		<script src="../day03/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#a",
				"methods":{
					test1:function(){
						console.log(111);
					},
					test2(){
						console.log(222);
					}
				}
			})
		</script>
	</body>
</html>

v-for：遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li v-for="ele in names">{{ele}}</li>
			</ul>
		</div>
		<script src="../day03/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#a",
				"data":{
					"names":["小莫","小米","好好学"],
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li v-for="ele in users">{{ele.id}},{{ele.name}}</li>
			</ul>
		</div>
		<script src="../day03/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#a",
				"data":{
					"users":[{"id":1,"name":"jack"},
								{"id":2,"name":"j"},
								{"id":3,"name":"ja"},
					],
				}
			})
		</script>
	</body>
</html>

v-model：在表单元素上创建双向数据绑定

更新data数据，页面中的数据也会更新。

更新页面数据，data数据也会更新。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			{{count}}
			商品的库存<input type="text" name="count" v-model="count"/>
		</div>
		<script src="../day03/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"count":1,
				},
			})
		</script>
	</body>
</html>

练习：物品数量的加减

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="a">
			<button type="button" @click="add()">+</button>
			<input type="text" name="count" v-model="count"/>
			<button type="button" @click="sub()">-</button>
		</div>
		<script src="../day03/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#a",
				"data":{
					"count":1
				},
				"methods":{
					add(){
						this.$data.count++;
					},
					sub(){
						if(this.count>0){
							this.count--;
						}
						
					},
				}
			})
		</script>
	</body>
</html>

vue的生命周期

在这里插入图片描述

特点

1.beforeCreate:function(){}

特点: vue对象没有创建, 也不能获取data里面的数据

2.created:function(){}

特点: vue对象已经创建,可以获取数据,但是vue对象没有挂载(vue对象还没有加载到浏览器)

3.beforeMount:function(){}

特点: vue对象已经创建,并且在浏览器中存在并且数据未挂载

4.mounted:function(){}

特点: vue对象已经创建,并且在浏览器中存在并且数据已经挂载了

5.beforeUpdate:function(){}

特点: vue对象已经创建,并且在浏览器中存在并且数据已经挂载了,在浏览器的内存中显示的未修改的

6.updateed:function(){}

特点: vue对象已经创建,并且在浏览器中存在并且数据已经挂载了,在浏览器的内存中显示的已经修改的

7.beforeDestroy(){}

特点: vue对象在浏览器中存在,数据依然显示

8.destroyed(){}

特点: vue对象在浏览器中不存在,数据依然显示与vue对象绑定的一切全部解绑.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			hello
		</div>
		<script type="text/javascript" src="vue.js">
		</script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",
				},
				beforeCreate:function(){
					console.group("----beforeCreate的状态");
					console.log("vue对象："+this.$el);//vue对象没有创建
					console.log("数据："+this.$data);//数据拿不到
				},
				created:function(){
					console.group("----created的状态");
					console.log("vue对象："+this.$el);//vue对象已经创建，没有挂载
					//拿到数据，但是没有挂载（没有加载到浏览器）
					console.log("数据："+this.$data);
					console.log("msg:"+this.msg);
				},
				beforeMount:function(){
					console.group("----beforeMount的状态");
					console.log("vue对象："+this.$el);//vue对象创建，挂载
					console.log("数据："+this.$data);//获取数据，没有挂载
				},
				mounted:function(){
					console.group("----Mounted的状态");
					console.log("vue对象："+this.$el);//vue对象创建，挂载  
					//获取数据，已经挂载，但是在修改数据是才能显示
					console.log("数据："+this.$data);
				},
				
			});
		</script>
	</body>
</html>

总结:

自动执行的

beforeCreated() created() beforeMounte() mounted()

当data数据发生改变时才会执行

beforeUpdate() updated()

当vue对象销毁时,才会执行

beforeDestroy(),destroyed()

异步操作

同步操作：

提交数据时提交整个网页

优缺点：

响应慢时，用户看到“留白”，

但是提交次数少

异步操作：

提交数据时，提交网页的一部分

优缺点：

后台响应慢时，用户依然可以看到网页，不会有“留白”

向后台提交数据的次数多

axios异步请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--定义一个button标签，点击事件发送异步请求-->
			<button type="button" @click="test1()">发送get的异步请求</button>
			<button type="button" @click="test2()">发送post的异步请求</button>
		</div>
		<!--引入vue-->
		<script src="js/vue.js"></script>
		<!--引入axios-->
		<script src="js/axios/axios-0.18.0.js"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",
				},
				"methods":{
					//1.定义异步请求
					test1(){
						//2.发送异步请求:get
						//get方法：指定请求地址，参数是一个string或则json的地址
						//then方法：接收后台响应的数据，参数是一个函数
						//catch方法：处理前台和后台的代码异常，参数是一个函数
						//定义一个json文件：模拟后台地址
						var url="moni.json";
						axios.get(url).then(
						function(resp){
							//用来接收后台响应的数据
							var user=resp.data;
							console.log(user.id+"，"+user.name);
						}).catch();
					},
					test2(){
						axios.post("moni.json").then(function(resp){
							var u=resp.data;
							console.log(u.id);
						}).catch(
						function(){
							window.alert("路径错误");
						}
						);
					}
				}
			})
			
		</script>
	</body>
</html>

一、什么是生命周期？
用通俗的语言来说，就是 Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。
通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别：
二、created和mounted区别？
官方图解如下:

我们从图中看两个节点：
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

三、例子

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
        created:function(){
            this.name="唐浩益"
            this.age = "12"
            this.city ="杭州"
            var x = document.getElementById("name")//第一个命令台错误
            console.log(x.innerHTML);
        },
        mounted:function(){
            var x = document.getElementById("name")//第二个命令台输出的结果
            console.log(x.innerHTML);
        }
    });
    var vm = new Vue({
        el:"#example1"
    })

可以看到输出如下：

可以看到都在created赋予初始值的情况下成功渲染出来了。
但是同时看console台如下：

可以看到第一个报了错，实际是因为找不到id，getElementById(ID) 并没有找到元素，原因如下：
在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，故输出了结果“唐浩益”