Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)

一.VUE

vue概述(vue.js)

vue是前端JavaScript框架,对JavaScript进行封装,是一套用于构建用户界面的渐进式框架.vue的核心只关注图示层,不仅易上手,还便于与第三方库或既有的项目整合.
vue.js和Angular.js,React.js一起,并称为前端三大主流框架

注意: 在此初步学习的是vue2并不是vue3,vue3属于入门级

vue.js特点

体积小(封装的文件小) 压缩后33k
更高的运行效率,不直接频繁的对网页上的标签进行操作,基于dom技术进行优化
实现数据双向绑定,程序员只关心要操作的数据即可,把数据渲染到标签上交给vue框架处理
生态丰富,学习成本低

vue.js如何实现数据绑定

通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,把更多的精力投入到业务逻辑上.
MVVM是Model-View-ViewModel的缩写.MVVM就是将其中的View的状态和行为抽象化,让我们将视图UI和业务逻辑分开.

二.VUE搭建

方式1:直接用<script>引入

进入vue.js官网https://v2.cn.vuejs.org/

找到安装

将下载得到的文件复制或移入项目中的js目录

在需要使用vue框架的项目中导入js文件<script src="js/vue.js"></script>

三.第一个VUE程序

vue.js的核心是一个允许采用简洁模板语法来声明式地将数据渲染进DOM的系统

导入开发版本的vue.js
创建vue实例对象,设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js库 -->
		<script src="js/vue@2.js"></script>
		<!-- 导入一个文件后,下方不能再写一个js文件 -->
	</head>
	<body>
		<!-- {{变量}}必须写在命中标签的内部-->
		<div id="app">
			<div>
			{{message}},
			</div>
			<p>
			{{a}}
			</p>
		</div>
		
		<!-- 以后的Script标签写在标签的后面,先加载网页的内容,再加载js -->
		<script type="text/javascript">
			/*创建vue对象,把页面指定id的标签与vue对象进行绑定 
			  el是vue对象中的属性,可以选择#id,或.类,建议使用id选择器
			  el命中标签不能是body
			  data属性中定义使用的数据 键:值 键值对之间需要使用","隔开最后一个键值对后不添加","正常数据都要定义在data中
			  {{变量名}} 插值表达式,获取到data中定义的数据
			 */
			let app = new Vue({
				el:"#app",
				data:{
					a:"abc",
					message:"hello vue"
				}
			});
		</script>
	</body>
</html>

示例代码解析:

{{变量}},插值表达式用于获取data数据

new Vue();创建Vue对象(VM对象)

el:数据挂载的dom对象

Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器,但是建议使用ID选择器

可以使用其他的闭合标签,不能使用HTML和BODY

data:{message:'hello world'} model数据

Vue中用到的数据定义在data中

data中可以写复杂类型的数据,如对象,数组

四.VUE指令

VUE指令是指带有v-开头,以代表它们是VUE提供的特殊属性.

插值表达式{{message}}

{{message}} 插值表达式不会覆盖标签体中的内容,只是在标签内部插入一个值,在标签中有值得情况也可以添加插值表达式,不会影响原本数据的显示

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<!-- {{变量}}必须写在命中标签的内部-->
		<div id="app">
			<div>
			{{message}}不影响比标签中的其他内容
			</div>
			<p>
			{{a}}
			</p>
		</div>
		<script type="text/javascript">
			/* 
			  {{变量名}} 插值表达式,获取到data中定义的数据
			 */
			let app = new Vue({
				el:"#app",
				data:{
					a:"abc",
					message:"hello vue"
				}
			});
		</script>
	</body>
</html>

效果演示:

v-text指令

该指令的作用是设置标签的文本内容,此写法会替换标签中的全部内容

内部支持写插值表达式
<p v-text="message">被替换的内容</p>

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="Message1">这是一段被替代的话</div>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					Message1:"v-text指令会替代标签中的内容"
				}
			});
		</script>
	</body>
</html>

使用v-text前效果:

使用后的效果:

v-html指令

该指令的作用是设置元素的innerHTML,变量中的内容中存在html结构会被解析为标签

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-html="Message2">这是一段被替代的话</div>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					Message2:"<b>这是一段被加粗的文字</b>"
				}
			});
		</script>
	</body>
</html>

效果演示:

插值表达式,v-html,v-text的区别

{{message}} 插值表达式不会覆盖标签体中的内容,只是在标签内部插入一个值
v-html与v-text 会用数据覆盖标签体中的内容

v-html与v-text的区别:
v-html:能解析字符串中的标签
v-text:不能解析字符串中的标签

v-on指令

该指令的作用是为元素绑定事件,事件名不需要写on指令可以简写为@

绑定方法定义在methods属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="text(1,2)"/>向方法中传入参数的用法
<input type="button" value="按钮" @click="text"/>简写且不传入参数的写法

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js库 -->
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 
			添加事件的两种方式
			 v-on:click 点击事件
			 @click
			 -->
			 <input type="button" value="按钮1" v-on:click="test1()"/>
			 <input type="button" value="按钮2" @click="test2(1)"/>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					message:"hello vue",
				},
				methods:{
					test1(){//this表示vue对象
						alert(this.message);
					},
					test2(a){//传参
						alert(a);
					}
				}
			});
		</script>
	</body>
</html>

注意: 在methods属性中添加函数时不需要使用function关键字,且在函数中使用在data中定义好的变量或methods属性中定义的其他方法时,需要使用this关键字

v-model指令

该指令的作用是便捷的设置和获取表单元素的值,绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值双向数据绑定

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js库 -->
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			 <p><!--还可以使用v-text-->
				 {{name}}
			 </p>
			 <!-- v-model可以将输入标签中的值(value)  绑定到指定的属性上 (这里通过vue框架将文本输入框的值,变量name,p标签中的内容插值表达式绑定)-->
			 <input type="text" value="" v-model="name"/>
			 <input type="button" value="测试" @click="test3"/>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					name:""
				},
				methods:{
					test3(){//改变name变量的值
						this.name = "jim";
					}
				}
			});
		</script>
	</body>
</html>

在此案例中通过v-model指令将输入框的value属性,变量name的值,p标签的值相互绑定,只要name变量的值发生改变其他两个标签的值也会发生改变

v-show指令

该指令的作用是根据布尔值显示或隐藏当前标签,原理是修改元素的display,实现显示隐藏,指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐藏,数据改变后,对应元素的显示状态会同步更新

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 
			 v-show="布尔值" 根据布尔值显示或隐藏当前标签
			 通过display的值控制标签显示或隐藏,每次不需要重新创建标签,效率高
			 -->
			<div v-show="isshow">123</div>
			<div v-show="a>5">456</div>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					isshow:false,
					a:10
				}
			});
		</script>
	</body>
</html>

在此案例中,v-show="false"时,标签会显示,通过改变标签的dispaly属性来实现标签的隐藏,由于a变量的值为10,a>5最终也会被解析为布尔值true.

v-if与v-else指令

v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过操纵dom元素来切换,显示状态表达式的值为true,元素存在于dom中,为false,从dom中移除.频繁的切换使用v-show,反之使用v-if,前者的切换消耗更小

v-if和v-else标签必须挨着满足则显示if标签内容,否则显示else内容

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 
			v-if="布尔值" 根据布尔值显示或隐藏当前标签
			 每次从网页中要删除/创建标签,数量多了效率低
			 v-if 和 v-else标签必须挨着满足则显示if标签内容,否则显示else内容
			 -->
			<div v-if="isshow">789</div>
			<div v-if="a>5">101</div>
			<div v-else>aaa</div>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					isshow:true,
					a:4
				}
			});
		</script>
	</body>
</html>

注意: v-else需要紧挨着v-if使用,当v-if="false"时显示v-else指令的标签

v-show与v-if的区别

v-show标签是通过display属性来实现显示或隐藏标签
而v-if标签每次都要从网页中删除/创建标签,数量多了效率太低.

在频繁的切换标签隐藏或显示,v-show标签相比于v-if标签效率更高.
但v-if标签可以搭配v-else标签使用,实现通过逻辑控制标签的隐藏与消失.

v-bind指令

该指令的作用是为元素绑定属性,完整写法是 v-bind:属性名

简写的话可以直接省略v-bind,只保留: 属性名

示例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- <img src="imgsrc"/> 错误写法,不能将data中的属性填充到普通标签属性中-->
			<!-- <img v-bind:src="imgsrc"/> 通过v-bind对标签的属性进行操作-->
			<!-- 简单写法 -->
			<img :src="imgsrc" :title="title"/>
			
			<input type="button" value="下一张" @click="next"/>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					imgsrc:"img/图片1.png",
					title:"第一张图片"
				},
				methods:{
					next(){
						this.imgsrc = "img/图片2.png";
						this.title = "第二张图片";
					}
				}
			});
		</script>
	</body>
</html>

在此案例中,通过v-bind指令对图片的src以及title属性进行操作,并通过v-on指令为按钮添加了点击事件实现了图片的属性切换.这里使用的v-bind指令采用的简单写法, 直接省略v-bind,只保留: 属性名

我们还可以传给v-bind:class一个对象,以动态地切换class:

示例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.active{
				color: red;
			}
		</style>
		<script src="js/vue@2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 通过isActive控制是否为标签添加指定的类名 active是类名-->
			<div v-bind:class="{active:isActive}">状态</div>
            <!--为按钮添加点击事件,实现点击按钮改变标签样式的功能-->
            <input type="button" @click="next"/>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					isActive:false//控制是否添加样式表
				},
				methods:{
					next(){//使用this关键字调用data中定义的变量
						this.isActive="true";
					}
				}
			});
		</script>
	</body>
</html>

在此案例中,需要注意v-bind:class="{active:isActive}" 其中active是标签的类名,isActive是data键值对中定义的变量名,通过改变变量的布尔值,实现此标签样式的存在或消失

v-for指令

该指令的作用是根据数据生成列表结构,数组经常和v-for结合,其语法是 (item,index) in 数据
item和index可以结合其他指令一起使用,数组长度的更新会同步到页面上是响应式的
为循环绑定一个Key值 :Key="值" 尽可能唯一

示例1:通过v-for指令循环遍历数据到列表项中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 
		<script src="js/vue@2.js"></script>
	 
	</head>
	<body>
		 <!-- 5点18 -->
		<div id="app">
			<!-- 使用v-for指令循环遍历数据到列表项中,在列表项内容中添加插值表达式,p指的是数组中的一个字符串数据-->
			 <ul>
                 <!--不添加数组索引的写法-->
 				 <!-- <li v-for="p in provinces">{{p}}</li> -->

                   <!--添加数组索引的写法,在循环时为它添加序号-->
				 	<li v-for="(p,index) in provinces">{{index+1}}{{p}}</li>
			 </ul>
		</div>
		
		 
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					//模拟从服务器后端响应回来的数据,在前端把后端响应的数据动态的响应在网页上
				  provinces:['北京','天津','上海']//字符串类型数组
				}
			});
		</script>
	</body>
</html>

在此案例中,通过v-for指令将字符串类型数组provinces的数据循环遍历在列表项中,并添加了数组的索引值,由于数组的索引值是从零开始的,我们在插值表达式中为索引值加1,实现添加的数字序号从1开始.
v-for="(p,index) in provinces" 其中p为字符串数组中的一个字符串数据,这里的用法与增强for循环遍历数据类似

示例2:表格使用v-for遍历数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 
		<script src="js/vue@2.js"></script>
	 
	</head>
	<body>
		<div id="app">
			 <table border="1">
				 <tr>
					 <td>序号</td>
					 <td>学号</td>
					 <td>姓名</td>
					 <td>性别</td>
				 </tr>
				 <tr v-for="(student,index) in students">
					 <td>{{index}}</td>
					 <td>{{student.id}}</td>
					  <td>{{student.name}}</td>
					   <td>{{student.gender}}</td>
				 </tr>
			 </table>
		</div>
		
		 
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
				  //对象类型数组
				  students:[{id:101,name:'jim',gender:'男'},{id:102,name:'tom',gender:'男'},{id:103,name:'jery',gender:'女'}]
				}
			});
		</script>
	</body>
</html>

在此案例中,data中定义的数据类型是students对象类型的数组,每一个大括号代表一个对象,其中的id,name,gender等是该对象的属性.
注意: v-for指令应当写在行标签中,将插值表达式写在列标签中,在插值表达式中通过student.id来获取students对象类型数组中一个对象student的属性id值.

五.VUE 实例生命周期

每个Vue 实例在被创建时都要经过一系列的初始化过程-例如,需要设置数据监听,编译模板,将实例挂载到DOM 并在数据变化实更新DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己代码的机会.

下面图示表示不同的生命周期钩子函数的所处位置:

用户通过这八个生命周期函数,实现在不同的阶段添加代码,实现代码功能

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue@2.js"></script>
		 
	</head>
	<body> 
		<div id="app"> 
		</div>
		<script type="text/javascript">
			 /* 
			 vue对象生命周期
			 */
			let app = new Vue({
				el:"#app",//vue对象绑定标签
				data:{
					 
				},
				methods:{//自定义函数
				
			},//vue对象生命周期钩子函数
			beforeCreate(){//vue对象创建之前执行
				console.log("beforeCreate")
			},
			created(){//在vue对象创建后执行
				console.log("created")
			},
			beforeMount(){//这个是vue对象与标签绑定前执行,这里的绑定指el绑定
				console.log("beforeMount")
			},
			mounted(){//这个是vue对象与标签绑定后执行,这是我们后面需要的,在网页打开后,自动执行某些操作
			          //如自定义的向后端发送请求加载数据
				console.log("mounted")
			}
			});
		</script>
	</body>
</html>

在此案例中使用了四个生命周期钩子函数,在不同的阶段执行了代码中的功能,代码中注释了这四个函数在不同的阶段执行.