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

已于 2022-06-12 17:08:38 修改
阅读量2.1k 收藏 8
点赞数 1
文章标签： 前端 vue.js elementui
于 2022-01-12 18:45:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44840708/article/details/122457161
版权

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节点，故输出了结果“唐浩益”

注意：created方法中只能用this，axios异步请求中只能用let   v

五八个
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Day7 综合案例
08-11
10. **错误处理和生命周期钩子**：Vue组件有自己的生命周期，我们可以利用生命周期钩子函数（如`created`, `mounted`, `updated`等）进行初始化操作、数据加载或更新后的处理。同时，合理的错误处理机制也能提高应用...
Vue Day6面经基础src文件
08-10
- 组件有多个生命周期钩子函数，如`created`、`mounted`、`updated`、`beforeDestroy`，在组件不同阶段运行。 10. **模板语法**： - Vue使用基于HTML的模板语法，通过`v-model`实现双向数据绑定，`v-on`处理事件...
Nuxt.js使用VUE生命周期钩子函数重复调用接口问题(created()调用两次)
xiaosong2001的博客
11-06 5794
Nuxt.js使用VUE生命周期钩子函数重复调用接口问题(created()调用两次) 解决问题前要先了解客户端渲染和服务端渲染的区别 1、客户端渲染 简单理解就是，在服务端放一个html 页面，客户端发起请求，服务端把页面发送过去。客户端从上到下依次解析，如果发现ajax请求就再发送新的请求，拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。如图： 但是，这种渲染方式存在的弊端也是不容忽视的，比如请求量大时首屏渲染慢，不利于seo等问题。服务端渲染恰好弥补了这些不足。 2. 服务端渲染
【Vue】生命周期中的八个钩子函数
cleannnnn的博客
12-13 3709
Vue学习笔记
Vue进阶（三十七）：created、mounted等钩子函数整理_vue3created钩子函数
2401_84617302的博客
05-16 328
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
前端路线--Vue（day03）
Yan9_9的博客
05-13 260
01-自定义指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
前端-Vue的生命周期 day03
weixin_58719141的博客
07-18 265
从vue实例创建、运行到销毁期间，总是伴随各种各样的事件，这些事件，统称生命周期！
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 3585
黑马前端Vue学习笔记(未学完)
Vue3+ts(day05：ref、props、生命周期、hook)
weixin_51591826的博客
05-02 647
Vue3+ts中的ref、props、生命周期、hook
day05-vue入门
hu_zhi_chao的博客
06-22 506
vue入门学习目标0.前言1.认识Vue2.Node和NPM2.1.下载Node.js2.2.NPM3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.2.3.推荐npm安装3.3.vue入门案例3.3.1.HTML模板3.3.2.vue声明式渲染3.3.3.双向绑定3.3.4.事件处理4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this5.指令5.1.插值表达式
day03vue学习
WU3087676106的博客
03-13 1065
思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁1.创建阶段：创建响应式数据2.挂载阶段：渲染模板3.更新阶段：修改数据，更新视图4.销毁阶段：销毁Vue实例Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码 四、生命周期钩子小案例 1.在created中发送数据 2.在mo
Vue [Day5]
weixin_63681863的博客
08-07 426
自定义指令 插槽 单页应用程序 路由
day04-前端(vue).zip
10-01
8. **生命周期钩子**：Vue组件有多个生命周期钩子函数，如`created`、`mounted`、`updated`等，允许我们在特定阶段执行自定义逻辑。 9. **插槽与作用域插槽**：Vue的插槽机制允许我们将内容插入到组件的特定位置，...
Vue Day3小兔鲜组件
08-05
此外，Vue组件支持生命周期钩子函数，如`created`、`mounted`、`updated`等，它们在组件的不同阶段被调用，允许我们在特定时刻执行逻辑操作。 在实际开发中，我们还可能遇到异步组件、动态组件、组件插槽（用于...
vue2-day8.zip
08-10
9. **生命周期钩子**：Vue 2组件有多个生命周期钩子函数，如`beforeCreate`、`created`、`beforeMount`等，让开发者在组件不同阶段进行操作。 10. **过渡效果（Transition）**：Vue 2提供了内置的过渡系统，通过CSS...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 816
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 445
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1008
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值