1、Vue简介

vue是一套用于构建用户界面的渐进式框架, 作者：尤雨溪，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或即有项目整合

1.1.官网：

1.英文官网: https://vuejs.org/

2.中文官网：https://cn.vuejs.org/

1.2. Vue的特点

1.遵循MVVM模式

2.编码简洁，体积小，运行效率高，适合移动/PC端开发

3.它本身只关注UI，也可以引入第三方库开发项目

2、Vue入门

小试牛刀

实例一

效果

image-20230717230009522

代码

<!DOCTYPE html>  
<html>  
	 <head>  
	 <meta charset="utf-8">  
	 <title></title>  
	 <!-- 通过cdn，引入vue.js -->  
	 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>  
 </head>  
 <body>  
	 <!-- 定义边界 -->  
	 <div id="app">  
		 <!-- 前端vue框架可以管控的位置 -->  
		 {{msg}}  
	 </div>  
	 {{msg}}  
 <script>  
	 //创建Vue实例对象  
	 new Vue({  
		 // 绑定边界  
		 el: '#app',  
		 //定义静态数据  
		 data(){  
			 return {  
				 msg: 'Hello World',  
				 user:{  
				 name: '张三',  
				 age: 18  
			 }  
		 }  
	 }  
 });  
 </script>  
 </body>  
</html>

实例二

获取输入框中的数据，并且弹窗显示

效果

1

代码

<!DOCTYPE html>  
<html>  
	 <head>  
	 <meta charset="utf-8">  
	 <title></title>  
	 <!-- 通过cdn，引入vue.js -->  
	 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>  
 </head>  
 <body>  
	 <!-- 定义边界 -->  
	 <div id="app">  
		 <!-- 前端vue框架可以管控的位置 -->  
		 请输入：<input v-model="msg"/>  
		 <button @click="tp">弹屏</button><br/>  
		 {{msg}}<br/>  
		 显  示：<input :value="msg"/>  
 </div>  
 <script>  
 //创建Vue实例对象  
 new Vue({  
	 // 绑定边界  
	 el: '#app',  
	 //定义静态数据  
	 data(){  
		 return {  
			 msg: 'Hello World'  
		 }  
	 },  
	 methods:{  
		 tp(){  
			 //this指的是vue实例  
			 alert(this.msg);  
		 }  
	 }  
 });  
 </script>  
 </body>  
</html>

实例三

两个输入框分别使用v-model="msg"和:value="msg"绑定数据, 如下效果所示，v-model绑定的数据是双向绑定的

效果

2

代码

<!DOCTYPE html>  
<html>  
	 <head>  
	 <meta charset="utf-8">  
	 <title></title>  
	 <!-- 通过cdn，引入vue.js -->  
	 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>  
 </head>  
 <body>  
	 <!-- 定义边界 -->  
	 <div id="app">  
	 <!-- 前端vue框架可以管控的位置 -->  
	 请输入：<input v-model="msg"/>  
	 <button @click="tp">弹屏</button><br/>  
	 {{msg}}<br/>  
	 显  示：<input :value="msg"/>  
	 </div>  
 <script>  
 //创建Vue实例对象  
 new Vue({  
	 // 绑定边界  
	 el: '#app',  
	 //定义静态数据  
	 data(){  
		 return {  
			 msg: 'Hello World'  
		 }  
	},  
	 methods:{  
		 tp(){  
			 //this指的是vue实例  
			 alert(this.msg);  
		 }  
	}  
 });  
 </script>  
 </body>  
</html>

3、Vue的生命周期

image-20230717234140599

<!DOCTYPE html>  
<html>  
<head>  
	 <meta charset="utf-8" />  
	 <title></title>  
	 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>  
</head>  
 <body>  
	 <div id="d1">  
		 <div>number:{{number}}</div>  
		 <div>{{detail()}}</div>  
		 <input type="text" v-model="number" />  
	 </div>  
 <script>  
	 var data = {  
		 number:999,  
		 msg:null  
	 };  
	 var vm = new Vue({  
		 el:'#d1',  
		 data:data,  
		 methods:{  
		 detail:function(){  
			 return "使用方法来插值："+this.msg;  
		 }  
	 },  
	 beforeCreate:function(){  
		console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')   
		 console.log(this.msg)//undefined  
		 console.log(document.getElementsByClassName("myp")[0])//undefined  
	 },  
	 created:function(){  
		 console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')  
		 this.msg+='!!!'  
		 console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')  
		 console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')  
	 },  
	 beforeMount:function(){  
		 console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')  
		 this.msg+='@@@'  
		 console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')  
		 console.log(document.getElementsByClassName("myp")[0])//undefined  
		 console.log('接下来开始render，渲染出真实dom')  
	 },  
	 // render:function(createElement){  
	 //     console.log('render')  
	 //     return createElement('div','hahaha')  
	 // },  
	 mounted:function(){   
		 console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')  
		 console.log(document.getElementsByClassName("myp")[0])  
		 console.log('可以在这里操作真实dom等事情...')  
    
	 //    this.$options.timer = setInterval(function () {  
	 //        console.log('setInterval')  
	 //         this.msg+='!'   
	 //    }.bind(this),500)  
	 },  
	 beforeUpdate:function(){  
		 //这里不能更改数据，否则会陷入死循环  
		 console.log('beforeUpdate:重新渲染之前触发')  
		 console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')   
	},  
	 updated:function(){  
		 //这里不能更改数据，否则会陷入死循环  
		 console.log('updated:数据已经更改完成，dom也重新render完成')  
	 },  
	 beforeDestroy:function(){  
		 console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')  
		 // clearInterval(this.$options.timer)  
	 },  
	 destroyed:function(){  
		console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')  
	 }  
 });  
 </script>  
 </body>  
</html>

面试题：

1、Vue中有哪些生命周期钩子函数

beforeCreate、created、beforeMount、mounted
beforeUpdate、updated、beforeDestroy、destroyed

2、Vue实例创建时默认触发的生命周期钩子函数

beforeCreate、created、beforeMount、mounted