Vue基础入门(一)：Vue的基本概念与基础语法

最新推荐文章于 2024-03-05 10:04:33 发布

王维诗里的代码i

最新推荐文章于 2024-03-05 10:04:33 发布

阅读量170

点赞数

分类专栏：前端技术基础文章标签： vue.js 前端 javascript vue 前端框架

本文链接：https://blog.csdn.net/liucj_20000/article/details/134328722

版权

前端技术基础专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1. Vue的基本概念

1.1 MVP模式的概念

类似余后端的 MVC，MVP 也是根据代码功能的特性来进行划分的，Model 模型层（前端的模型层[数据模型]），View 层，Presenter 层（模型层和显示层的桥梁）。

在这里插入图片描述

各部分之间的通信，现在是单向的。
View 与 Model 不发生联系，都通过 Presenter 传递。
View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

1.2 M-V-VM 模式

M：(model）就是数模型，前端数据的来源，这个 model 层的数据又来源于后端的 controller。

V：(view）前端展示页面。

VM：(ViewModel）用户实现数据的双向绑定，就是 vue 的实例（对象）MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。唯一的区别是，它采用双向绑定（data-binding）：View 的变动，自动反映在 Model，反之亦然。这种模式下，页面输入改变数据，数据改变影响页面数据展示与渲染。

在这里插入图片描述

首先你要知道，每一门技术的出现都是为了解决对应的问题，那么我们来看看 Vue 是为了解决什么问题呢？

在之前使用 jQuery 操作数据的时候如果要取得页面中的数据，则需要使用选择器取得该数据所在的宿主元素（标签），之后再使用 jq 相关的方法取得数据（比如说要取得表单中填写的数据，发送给后端），如果要将后端传递的数据渲染到页面中，则需要先取得要显示数据的宿主元素对象，之后调用该对象的相关方法（如 append 方法）来实现数据的渲染，这种操作无疑是比较麻烦的，于是后面出现了很多解决类似问题的前端框架，比如说 Angular，这是一款老牌的前端框架（老古董了，你在很多老项目中还能看到），但是该框架还是不够简洁，使用起来还是不够方便，于是后面了 vue.js，这是一个国内的开源框架，Vue 能轻松的实现数据的双向绑定和渲染等操作，以及前后端分离架构支持，同时解决了之前的一些前端 js 框架对 dom 操作的复杂问题。

vue 也是一个 javascript 的框架，封装了原生的 javascript。hbuilderx 就非常方便开发 vue 代码，另外一个工具，叫做 vscode，直接安装也非常的方便。

DEMO1:第一个vue程序，需要导入 VUE 的开发包（就是一个*.js 文件），有两种方式可以导入：第一种就是直接下载到本地导入，第二种直接使用该框架对应的地址引入，可以在 vue 的官网上找到对应的链接（https://cn.vuejs.org/）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vueTest测试！</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="msgDiv">
			<h1>{{title}}:{{msg}}</h1>			
		</div>
		
		<!-- //这里创建vue的代码 -->
		<!-- 创建一个vue对象，这个对象与上面的div进行关联 -->
		<script>
			new Vue({
				el:'#msgDiv', //选择器找到对应的标签
				data:{ 
					// data里面定义数据
					title:'好好学习',
					msg:'天天向上！'
				}
			})
		</script>
	</body>
</html>

页面效果图：在这里插入图片描述

DEMO2:实现页面局部定时刷新，使用 vue 结合定时函数可以实现页面的局部刷新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vueTest测试！</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="msgDiv">
			<h1>{{title}}:{{msg}}</h1>			
		</div>
<!-- top1： 创建一个vue对象，这个对象与上面的div进行关联 -->
		<script>
			var app = new Vue({
				el:'#msgDiv', //选择器找到对应的标签
				data:{ 
					// data里面定义数据
					title:'好好学习',
					msg:'天天向上！'
				}
			})
/* top2：创建一个定时函数实现定时刷新修改vue对象中的数据 */
			var i = 0;
			function setDataFun(){
				//修改vue对象中的数据
				app.$data.msg="我是刷新的数据："+ i++;
			}
			// 启用周期函数
			setInterval(setDataFun,1000)
		</script>
	</body>
</html>

页面动态效果：在这里插入图片描述

DEMO3:实现数据的双向绑定，数据的双向绑定就是页面中的数据发生了变化，则 vue 能进行监听并且可以将改变后的数据实时的同步到 Model（数据模型v-model）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vueTest测试！</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="msgDiv">
			<h1>{{title}}:{{msg}}</h1>
<!--top3: v-model实现数据双向绑定 -->
			<h2>
				输入数据：<input type="text" v-model="msg">
			</h2>
		</div>
		
<!-- top1： 创建一个vue对象，这个对象与上面的div进行关联 -->
		<script>
			var app = new Vue({
				el:'#msgDiv', //选择器找到对应的标签
				data:{ 
					// data里面定义数据
					title:'test',
					msg:'天天向上！'
				}
			})
			
/* top2：创建一个定时函数实现定时刷新修改vue对象中的数据 */
			var i = 0;
			function setDataFun(){
				//修改vue对象中的数据
				app.$data.msg="我是刷新的数据："+ i++;
			}
			// 启用周期函数
			setInterval(setDataFun,10000)
		</script>
	</body>
</html>

测试效果：在这里插入图片描述

DEMO4:实现一个字符串反转操作，使用 vue 提供的一些函数可以实现对各种数据的操作，其中最典型的就是对字符串的操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vueTest测试！</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="msgDiv">
			<h2>{{title}}:{{msg}}</h1>
<!--top3: v-model实现数据双向绑定 -->
			<h2>
				输入数据：<input type="text" v-model="msg">
			</h2>
<!-- top4：利用vue进行字符串的操作 -->
			<h2>
				<p>操作之前的数据：{{msg}}</p>
				<p>操作之后的数据：{{msg.split('').reverse().join()}}</p>
			</h2>
		</div>
		
<!-- top1： 创建一个vue对象，这个对象与上面的div进行关联 -->
		<script>
			var app = new Vue({
				el:'#msgDiv', //选择器找到对应的标签
				data:{ 
					// data里面定义数据
					title:'test',
					msg:'天天向上！'
				}
			})
			
/* top2：创建一个定时函数实现定时刷新修改vue对象中的数据 */
			var i = 0;
			function setDataFun(){
				//修改vue对象中的数据
				app.$data.msg="我是刷新的数据："+ i++;
			}
			// 启用周期函数
			setInterval(setDataFun,10000)
		</script>
	</body>
</html>

DEMO5:查找子字符串在字符串中的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vueTest测试！</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="msgDiv">
			<h2>{{title}}:{{msg}}</h1>
<!--top3: v-model实现数据双向绑定 -->
			<h2>
				输入数据：<input type="text" v-model="msg">
			</h2>
<!-- top4：利用vue进行字符串的操作 -->
			<h2>
				<p>操作之前的数据：{{msg}}</p>
				<p>操作之后的数据：{{msg.split('').reverse().join()}}</p>
			</h2>
<!-- 查找字符串在字符串中的位置 -->
			<h2>
				{{title.indexOf('i')}} <<br>
				{{title.split('')}}<br/>
				{{title.split('').reverse()}}<br/>
				{{title.split('').reverse().join()}}<br/>
				{{title.split('').reverse().join('')}}<br/>
			</h2>
		</div>
		
<!-- top1： 创建一个vue对象，这个对象与上面的div进行关联 -->
		<script>
			var app = new Vue({
				el:'#msgDiv', //选择器找到对应的标签
				data:{ 
					// data里面定义数据
					title:'test this is vue page : v-model="msg"',
					msg:'天天向上！'
				}
			})
			
/* top2：创建一个定时函数实现定时刷新修改vue对象中的数据 */
			var i = 0;
			function setDataFun(){
				//修改vue对象中的数据
				app.$data.msg="我是刷新的数据："+ i++;
			}
			// 启用周期函数
			setInterval(setDataFun,10000)
		</script>
	</body>
</html>

2. Vue的渲染指令（v-if）

在 jsp 中使用 el 表达式和 jstl 进行条件的判断，可以迭代输出数据等，在 thymeleaf 中也一样可以实现，使用 javascript 和 jQ都可以实现，那么在 vue中也有自己的渲染指令。

2.1 v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test vue v-if</title>
		<!-- 开发环境版本，导入vue -->
	<!-- 	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
	<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id='mydate'>
<!-- top1：v-if\v-else-if\v-else测试 -->
			<h2>
				<input type="text" name="" id="" value="请输入你的年龄！" v-model="age"/>
			</h2>
			<h3 v-if="age=='null' || age==''">请填入年龄</h3>
			<h3 v-else-if="age<18">未成年</h3>
			<h3 v-else-if="age>18 && age<30">青少年</h3>
			<h3 v-else-if='age>=30 && age<60'>中年人</h3>
			<h3 v-else-if='age>=60'>老年</h3>
			<h2>当前age的值为：{{age}}</h2>
			
		</div>
	</body>
	<script>
		var testVue = new Vue({
			el:'#mydate',
			data:{
				// 定义数据
				age:''
			}
		})
	</script>
</html>

测试效果：在这里插入图片描述

2.2 v-show

v-show进行判断，实现if判断的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test vue v-if</title>
		<!-- 开发环境版本，导入vue -->
	<!-- 	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
	<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id='mydate'>
<!-- top1：v-if\v-else-if\v-else测试 -->
			<h2>
				<input type="text" name="" id="" value="请输入你的年龄！" v-model="age"/>
			</h2>
			<h3 v-if="age=='null' || age==''">请填入年龄</h3>
			<h3 v-else-if="age<18">未成年</h3>
			<h3 v-else-if="age>18 && age<30">青少年</h3>
			<h3 v-else-if='age>=30 && age<60'>中年人</h3>
			<h3 v-else-if='age>=60'>老年</h3>
			<h2>当前age的值为：{{age}}</h2>

<!-- top2:测试v-show测试！ -->
			输入想看的人数：<input type="text" value="" v-model="number"><br/>
			<img src="../img/图片2.jpg" style="zoom:30%;"  v-show="number==1">
			<img src="../img/图片3.jpg" style="zoom:30%;" v-show="number==2">
		</div>
	</body>
	<script>
		var testVue = new Vue({
			el:'#mydate',
			data:{
				// 定义数据
				age:'',
				number:''
			}
		})
	</script>
</html>

2.3 v-for 循环渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test:v-for</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testvfor">
			<div id="">
				<h2>{{title}}图书馆</h2>
				<h3 v-for="(book,index) in books">
					{{index}}、{{book}}
				</h3>
			</div>
		</div>
	
		<script>
			var app = new Vue({
				el:'#testvfor',  //选择器
				//vue对象的属性值
				data:{ 
					title:'贵州省',
					msg:'遵义市！',
					books:[
						"java从入门到放弃！","mysql从删库到跑路！","Spring开发","若依开源！"
					]
				}
				// ,
				// methods:{
				// }
			})
		</script>
	</body>
</html>

测试效果：在这里插入图片描述

总结—vue中的 v-if 和 v-show 的区别：

在vue中使用 v-if 则不满足条件，则对应的dom会被删除。如果在 vue 中使用 v-show 则不满足条件，则对应的dom会使用css样式将其隐藏，而不会删除！

3. vue-bind数据绑定

可以将 vue 中的数据绑定到页面的元素中，在之前是将数据直接在页面输出（之前是通过表单实现演示），现在我们也可以将 vue 中的数据绑定到标签的属性中，只需要使用语法 v-bind 就可以。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试v-bind</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="TestBind">
			<h3 v-bind:title="msg">v-bind标签属性绑定测试</h3>
			<h4>
				<a v-bind:href="baiduUrl" title="测试连接1">百度连接</a> <br />
				<a v-bind:href="taobaoUrl">淘宝连接</a>
			</h4>
		</div>
	</body>
	<script>
		var bindvue = new Vue({
			//选择器一点要加上#才能是选择器！！！
			el:"#TestBind",  
			data:{
				msg:"v-bind标签属性绑定测试！！！",
				baiduUrl:"https://www.baidu.com/",
				taobaoUrl:"http://www.taobao.cn"
			}
		})
	</script>
</html>

测试结果：在这里插入图片描述

4. v-on:click事件的绑定

在 JavaScript 中事件的绑定是不可少的，可以使用 jQuery 实现动态绑定事件，也就是可以不在 html 代码中写绑定的语句，但是如果使用 vue 则不能实现动态的绑定，而是要在 html的标签中进行绑定语句的编写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on:click vue中的单击事件绑定</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testClick">
			<h3> vue的事件绑定测试！！</h3>
			<button v-on:click="showMsgMethod(msg)">事件绑定1</button><br/>
			<button @click="showMsg2(msg2)">vue事件绑定简写方式 @click="xxx"</button><br />
			<button @click.once="showMsg3()">绑定事件只执行一次@click.once</button>
			<button v-on:click.once="showMsg3()">绑定一次方式二</button>
		</div>
	</body>
	<script>
		var clickApp = new Vue({
			el:"#testClick",
			data:{
				msg:"测试数据111",
				msg2:"测试数据22222"
			},
			methods:{
//vue对象中不存在 '=' 号，而是用 ':'号！！！
				showMsgMethod:function(data){
					console.log(data) //控制台打印!
				},
				showMsg2:function(date2){
					alert(date2) //弹窗提示
					console.log("事件绑定2执行了！！")
				},
				showMsg3: function(data3){
					alert("弹窗消息3") //弹窗提醒！
					console.log("事件绑定3 v-on:click 方法执行！")
				}
			}
		})
	</script>
</html>

在这里插入图片描述

Vue 的事件绑定和 JQ 的形式是不同的，定义出函数之后还需要在对应的 html 元素上编写绑定函数的代码，这一点是 Vue 的不足，但是总体上来说 Vue 的其他优势远远抵消这点小小的不足！

5. vue 绑定处理（数组处理）

之前处理的数据都是简单的字符串数据，我们也可以对数组进行处理，严格来说是JSON 格式的数组。

DEMO:操作数组元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组元素数据展示</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testJson">
			<table border="1">
				<thead>
					<tr>
						<td>No</td> <td>部门编号</td> <td>部门名称</td> <td>操作</td>
					</tr>
				</thead>
				<tbody v-for="(dept,index) in depts">
					<!-- //遍历json格式数据中的各数据 -->
					<tr>
						<td>{{index}}</td>
						<td>{{dept.dNo}}</td>
						<td>{{dept.ranking[index]}}:{{dept.dName}}</td>
						<td><button type="button"  @click="delDept(dept.dName)"> 删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		
	</body>
	<script>
		var jsonVar = new Vue({
			el:"#testJson",
			data:{
				//json格式数据！！！！！
				depts:[
					{"dNo":1001,"dName":"财务部","ranking":["1号","2号","3号","4号","5号"]},
					{"dNo":1002,"dName":"客户部","ranking":["1号","2号","3号","4号","5号"]},
					{"dNo":1003,"dName":"研发部","ranking":["1号","2号","3号","4号","5号"]},
					{"dNo":1004,"dName":"销售部","ranking":["1号","2号","3号","4号","5号"]}
				]
			},
			methods:{
				delDept:function(deptName){
					alert("确认删除"+deptName+"吗?")
				}
			}
		})
	</script>
</html>

在这里插入图片描述

6. v-model控件绑定

6.1 基础数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控件绑定</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testModel">
			<h4>model绑定数据展示:{{msg}}</h4>
			<!-- 数据绑定格式 -->
			请输入需要展示的数据:<input type="text" v-model="msg" />
		</div>
	</body>
	<script>
		var modelApp = new Vue({
			el:"#testModel",
			data:{
				//绑定的数据
				msg:"初始数据！！"
			}
		})
	</script>
</html>

演示效果：在这里插入图片描述

以上的操作是只有数据改变之后就会同步到vue的model中，但是很多时候我们不需要每修改一个字符都要同步，而是需要类似于change事件（内容改变且鼠标的焦点移开之后才会触发的事件），即只有数据和之前不一样了并且失去焦点之后才会进行同步！

6.2 懒同步 v-model.lazy

<div id="testModel">
	<h4>model绑定数据展示:{{msg}}</h4>
	<!-- 懒同步数据绑定格式 -->
	请输入需要展示的数据:<input type="text" v-model.lazy='msg' />
</div>

6.3 去空格 v-model.trim

<body>
	<div id="testModel">
		<h4>model绑定数据展示:{{msg}}</h4>
		<!-- 数据绑定格式 -->
		请输入需要展示的数据:<input type="text" v-model.trim.lazy='msg' />
	</div>
</body>

如果表单中有空格，就可以使用trim进行删除，只有取出我们从表单中输入的空格，但是不能去除原始数据中的空格。

6.4 类型检测 v-model.number

很多时候是需要输入数字的，此时可以对输入的内容进行判断，如果不是数字则自动回避！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控件绑定</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testModel">
			<!-- <h4>model绑定数据展示:{{msg}}</h4> -->
			<!-- 数据绑定格式 -->
			<!-- 请输入需要展示的数据:<input type="text" v-model.trim.lazy='msg' /> -->
			<h5>姓名：{{name}} <br/>  年龄：{{age}}</h5>
			输入姓名:<input type="text" v-model="name" />
			输入年龄：<input type="text" v-model.number="age"/>
		</div>
	</body>
	<script>
		var modelApp = new Vue({
			el:"#testModel",
			data:{
				//绑定的数据
				msg:"初始数据！！",
				age:"",
				name:""
			}
		})
	</script>
</html>

在这里插入图片描述

6.5 日期控件 v-model.date

在很多时候需要在页面选择日期，vue 很容易就实现了一个日历的控件显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控件绑定</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testModel">
			<!-- <h4>model绑定数据展示:{{msg}}</h4> -->
			<!-- 数据绑定格式 -->
			<!-- 请输入需要展示的数据:<input type="text" v-model.trim.lazy='msg' /> -->
			<h5>姓名：{{name}} <br/>  年龄：{{age}} <br/> 生日：{{birthday}} </h5>
			输入姓名:<input type="text" v-model="name" />
			输入年龄：<input type="text" v-model.number="age"/>
			输入生日：<input type="date" v-model.date="birthday" />
		</div>
	</body>
	<script>
		var modelApp = new Vue({
			el:"#testModel",
			data:{
				//绑定的数据
				msg:"初始数据！！",
				age:"",
				name:"",
				birthday:"2019/01/05"
			}
		})
	</script>
</html>

在这里插入图片描述

7. vue表单的绑定

在表单的绑定中，除了输入框类型的表单（type=text）之外还有一其他类型的表单也可能需要绑定。比如：文本域（textarea）、单选按钮（radio）、复选框（checkbox）、下拉框（select）等。

7.1 绑定文本域 textarea

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定文本域表单</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testForm">
			<p>你输入的内容：{{msg}}</p>
			<textarea name="测试输入文本框" rows="2" cols="100" v-model="msg"></textarea>
		</div>
	</body>
	<script>
		var testTextArea = new Vue({
			el:"#testForm",
			data:{
				msg:"待跟新。。。。"
			}
		})
	</script>
</html>

在这里插入图片描述

7.2 绑定单选按钮 radio

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testRadio">
			<p>你选择的性别是：{{sex}}</p>
			<input type="radio" name="radioSex" value="男子"  v-model="sex"/>男 <br/>
			<input type="radio" name="radioSex" value="女子" v-model="sex" />女
		</div>
	</body>
	<script>
		var radioApp = new Vue({
			el:"#testRadio",
			data:{
				sex:"带选择！"
			}
		})
	</script>
</html>

在这里插入图片描述

7.3 复选框绑定 checkbox

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多选框的model绑定</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testCheckBox">
			<p>你的爱好是：{{list}}</p>
			<input type="checkbox" name="likeList" value="唱" v-model="list"/>唱歌
			<input type="checkbox" name="likeList" value="跳" v-model="list"/> 跳舞
			<input type="checkbox" name="likeList" value="rap篮球" v-model="list"/>打篮球
		</div>
	</body>
	<script>
	var checkboxTest = new Vue({
		el:"#testCheckBox",
		data:{
			list:[]
		}
	})
	</script>
</html>

在这里插入图片描述

7.4 绑定下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉框选择绑定</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testSelect">
			<!-- country -->
			<p>你所在的城市是：{{city}}</p> 
			<select name="citySelect" v-model="city" title="选择你所在的城市：" >
				<optgroup label="北方" >
					<option value ="beijing">北京</option>
					<option value="tianjing">天津</option>
				</optgroup>
				<optgroup label="南方">
					<option value="guiyang">贵州</option>
					<option value="chengdu">成都</option>
				</optgroup>
			</select>
		</div>
		<script>
		var selectApp = new Vue({
			el:"#testSelect",
			data:{
				city:""
			}
		})
		</script>
	</body>
</html>

在这里插入图片描述

8. vue实例的生命周期【重要】

生命周期描述的就是 Vue 的实例的创建到最后在页面产生作用的过程，在这个过程中会触发一些 Vue 给的默认的函数，这些方法叫做钩子方法（又被叫做回调方法），里面的钩子方法很多，但是重要的只有三个：mounted()，created()，updated()。

在这里插入图片描述

vue什么周期执行顺序过程演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的生命周期</title>
		<script src="../js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="testVueLife">
			<p>消息数据：{{msg}}</p>
			<button type="button" v-on:click="updateMsg()">跟新消息数据</button>
		</div>
	</body>
	<script>
		var vueLife = new Vue({
			el:"#testVueLife",
			beforeCreate: () => {
				console.log("beforCreate方法执行！msg="+this.msg)
			},
			created() {
				console.log("created方法执行！msg="+this.msg)
			},
			beforeMount() {
				console.log("beforeMount方法执行！ msg="+this.msg)
			},
			mounted() {
				console.log("mounted方法执行！ msg="+this.msg)
			},
			beforeUpdate() {
				console.log("beforeUpdate方法执行！ msg="+this.msg)
			},
			updated() {
				console.log("updated方法执行！ msg="+this.msg)
			},
			data:{
				msg:"初始数据！！"
			},
			methods:{
				updateMsg:function(){
					console.log("click事件函数，自定义方法执行！！ ")
					this.msg="跟新最新数据！！！"
				}
			}
		})
	</script>
</html>

在这里插入图片描述