Vue.js 基础教程：生命周期、数据绑定与事件处理-优快云博客

VUE生命周期

1.初始化周期
1.beforeCreate vue对象实例化之前(刚开始)
2. created
3. beforeMount
4. Mounted 说明VUE对象实例化成功(DIV渲染完成)
2.修改周期
1. beforeUpdate 用户修改数据之前
2. updated 用户修改数据之后
3.销毁周期
1. beforeDestroy VUE对象销毁前
2. destroyed VUE对象销毁后(最后一步)

在这里插入图片描述

基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>
		
		<!-- 
			入门案例步骤:
				1.导入vue.js文件   html下部编辑
				2.指定区域进行渲染  需要准备div vue.js代码
				3.创建VUE.js对象 指定渲染区域 动态调用
		 -->
		
		<!-- 2.指定区域 -->
		<div id="app">
			<!-- 在div中展现msg属性 
				插值表达式: {{key}}
			-->
			<h1>{{msg}}</h1>
		</div>
		
		
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			/**
			 * 语法:
			 * 		1.const 定义常量的
			 * 		2.let: 作用和var类似, 有作用域的概念
			 * 		3.var 特点:没有作用域
			 */
			const APP = new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
				data: {
					//key:value
					msg: "您好VUE"
				}
			})
		</script>
		
	</body>
</html>

数据显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<!-- 特点: 如果页面没有渲染完成,则直接展现给用户
					   插值表达式需要直接显示
				 注意事项:  只有显示时采用,输入操作不可使用
				 1.v-text指令: 如果页面没有渲染完成,则不显示信息
			 -->
			 {{msg}}
			<h1 v-text="msg"></h1>
	
			<!-- 2.v-html 直接渲染html标签 -->
			<div v-html="h3Html"></div>
			
			<!-- 3.v-pre  跳过预编译 显示标签体本身 -->
			<div v-pre>{{msg}}</div>
			
			<!-- 4.v-once 只渲染一次 -->
			<div v-once>{{once}}</div>
			
			
		</div>
	<!--  -->	
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					msg: "您好VUE",
					h3Html: "<h3>我需要html渲染</h3>",
					once: "我只能被渲染一次"
				}
			})
		</script>	
	</body>
</html>

双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<!-- 双向数据绑定 v-model
				1.数据端---页面
				2.页面-----数据
			   -->
			<input name="msg" v-model="msg"/><br>
			{{msg}}
			
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					msg: "数据随时修改"
				}
			})
		</script>	
	</body>
</html>

双向数据绑定原理
原理步骤:
1.用户修改页面时,通过DOM的监听器感知用户的修改行为,之后通过虚拟DOM对象,第一时间更新Model中的属性.
2.当数据发生变化,由虚拟DOM根据数据绑定的规则,第一事件通知真实的DOM对象.至此页面数据发生变化.

在这里插入图片描述
事件绑定

语法:

	v-on:click="函数/直接进行计算"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 双向数据绑定 v-model
				1.数据端---页面
				2.页面-----数据
			   -->
			<input name="msg" v-model="msg"/><br>
			{{msg}}
			
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					msg: "数据随时修改"
				}
			})
		</script>	
	</body>
</html>

按键触发机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键触发操作</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				 语法:	
					1.v-on:keydown="" 按下触发
					2.v-on:keyup=""   弹起来触发
					3.v-on:keypress="" 小键盘触发
				 按键支持:
					.enter  .tab
					.delete (捕获“删除”和“退格”键)
					.esc   .space
					.up .down .left .right
				 
				 需求:用户通过输入 按特殊的键位触发函数 
				 要求1. 按钮实现加法操作 num = num + num2
				 要求2. 用户按回车按钮实现触发 
				 要求3. 用户按空格键实现触发 
			-->
			<h3>用户数据:{{num}}</h3><br>
			<!-- <input type="text" v-on:keyup.enter="addNum" v-model="num2" /> -->
			<input type="text" v-on:keyup.space="addNum" v-model="num2" />
			<!-- 如果没有参数，可省略()-->
			<button @click="addNum">计算</button>
			
			
		</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num: 100,
					num2: 0
				},
				methods: {
					addNum(){
						//this.num = this.num + this.num2
						//将字符串转化为数值类型
						this.num +=   parseInt(this.num2) 
					}
				}
			})
		</script>	
	</body>
</html>

计算器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器案例</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 要求
				1.准备两个文本输入框 num1/num2
				2.要求准备一个按钮 "计算" 当点击按钮时实现
				  count=num1+num2
				  将得到的结果通过 总数输出count
				3.当输入num2时可以通过回车按键 计算.
				注意事项: input框默认是字符串
			 -->
			 
			 数值1: <input type="text" v-model="num1" /><br>
			 数值2: <input type="text" v-model="num2" 
				@keyup.enter="addNum"
			 /><br>
			 总数:  {{count}} <br>
			 <button @click="addNum">计算</button>
			
		</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num1: 0,
					num2: 0,
					count: 0
				},
				methods: {
					addNum(){
						this.count = 
							parseInt(this.num1) +  parseInt(this.num2)
					}
				}
			})
		</script>	
	</body>
</html>

按键修饰符
阻止冒泡 .stop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 难点: 元素可能需要嵌套,事件可能嵌套
				 说明: 如果事件嵌套则必然带来事件的冒泡.
				 解决方案: 阻止事件冒泡  .stop属性
			 -->
			数值: {{num}}
			<div @click="num++">
				嵌套结构
				<button @click.stop="num++">计算</button>
			</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num: 0
				},
				methods: {
					
				}
			})
		</script>	
	</body>
</html>

阻止默认行为 .prevent

			<!-- 需求2:
				 a标签作用中的href的跳转是默认规则
				 要求: 用户点击a标签 不跳转页面,同时触发事件
				 解决: 阻止标签的默认行为  @click.prevent	
			 -->
			<a href="http://baidu.com" @click.prevent="aClick">百度</a>
			
			<!-- 用途: prevent阻止页面跳转  a标签/form表单 action同步请求 -->

属性绑定
属性绑定 v-bind:xxxx 动态为属性赋值
class绑定如果用户需要切换class 则可以使用该操作
class绑定数据是否展现可以通过 {class类型: true/false}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>
			
			/* red 红色 宽度50  高度50 */
			.red {
				background-color: red;
				width: 50px;
				height: 50px;
			}
			
			.blue {
				background-color: aqua;
				width: 100px;
				height: 100px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- a标签的属性绑定
				需求: href中的属性动态赋值
				语法: v-bind:href="VUE中的属性"
			 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化写法 -->
			<a :href="url">百度</a>
			<hr />
			
			<!-- 2.class类型绑定 
				class中可以定义多个样式.简化程序的调用
				需求: 需要动态的为class赋值
				规则: :class是属性的绑定,绑定之后查找对应的属性
				colorClass: "blue" 之后根据value值 blue 查找对应的CSS样式
				15上课
			-->
			<div :class="colorClass">我是class修饰</div>
			<hr >
			
			<!-- 3. 属性切换 
				    需求: 通过按钮控制样式是否展现 属性
					语法: :class={class类型的名称: false}
			-->
			<div :class="{red: flag}">我是class修饰</div>
			<button @click="flag = !flag">切换</button>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					colorClass: "blue",
					flag: true
				}
			})
		</script>	
	</body>
</html>

分支结构语法
用法: 如果数据为真则展现html标签
语法: v-if/v-else-if/v-else
要求: v-if可以单独使用
另外2个必须与v-if连用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 分支结构
				语法: 
					1.v-if   如果为真则展现标签
					2.v-else-if  必须与v-if连用
					3.v-else 	 必须与v-if连用	取反
				案例:
					要求: 按照用户的考试成绩 评级
						  >=90分  优秀
						  >=80分  良好
						  >=70分  中等
						  >=60分  及格
						  否则    不及格
			 -->
			<h3>评级</h3>
			请录入分数: <input v-model="score" />
			<div v-if="score >= 90 ">优秀</div>
			<div v-else-if="score >= 80 ">良好</div>
			<div v-else-if="score >= 70 ">中等</div>
			<div v-else-if="score >= 60 ">及格</div>
			<div v-else>不及格</div>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					score: 70
				}
			})
		</script>	
	</body>
</html>

循环结构
用法: 通过循环展现标签+数据
语法:
v-for((value,index) in array)
v-for((value,key,index) in obj)
v-for(user in userList) 后续通过user.属性取值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 
				1.什么时候使用循环
					多次重复的执行同一个操作.
				2.什么数据使用循环
					1.数组
					2.对象
					3.数组套对象(集合)
			 -->
			 
			 <!--
					1. 遍历数据 将数组中的数据在页面中展现
			  -->
			 <p v-for="item in array" v-text="item">
				<!-- {{item}} -->
			 </p>
			 
			 <!-- 2. 获取下标  30上课
				  语法: v-for="(遍历的元素,遍历的下标) in array"
			  -->
			 <p v-for="(item,index) in array">
					下标:{{index}}~~~数据值:{{item}}
			 </p>
			 <hr >
			 <!-- 2. 遍历对象 
				v-for="(value,key,index下标)
			 -->
			 <p v-for="(value,key,index) in user">
				 {{index}}~~~~{{key}}~~~~{{value}}
			 </p>
			 
			 <!-- 3. 遍历"集合" -->
			 <p v-for="user in userList">
				 ID: {{user.id}}
				 | name: {{user.name}} 
				 | age:{{user.age}}
				<!-- <p v-for="(value,key,index) in user">
					 
				 </p> -->
			 </p>
			 
			 <!-- 总结:
				 1. 如果遍历数组 参数 (value,index)
				 2. 如果遍历对象 参数 (value,key,index)
				 特点: 遍历数据在页面中展现
			 -->
			 
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					array: ["郭晶晶","马龙","姚明"],
					user: {
						id: 100,
						name: "tomcat",
						age: 18
					},
					userList: [
						{
							id: 100,
							name: "tomcat",
							age: 18
						},
						{
							id: 200,
							name: "mysql",
							age: 20
						}
					]
				}
			})
		</script>	
	</body>
</html>

form表单数据绑定
一般数据进行提交时都会使用表单.
每个表单几乎都写action. action现在几乎不用(同步操作)
一般通过阻止默认行为的方式禁用action,之后手写点击事件触发后续操作(Ajax)
用户录入标签体 1.文本框 2.单选 3.多选 4.下拉框 5.文本域
掌握各个标签的双向数据绑定的写法. 值有多个使用数组.
表单修饰符 1.number 2.trim 3.lazy

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用表单属性</title>
	</head>
	<body>
		<h1>本案例练习 表单提交数据时  数据如何与vue进行数据绑定</h1>
		<div id="app">
			<form id="userForm"action="http://www.baidu.com">
				<div>
					<span>
						姓名:
					</span>
					<span>
						<input type="text" name="name" v-model="name"/>
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<!-- 单选框: name属性必须一致 -->
						<input type="radio" name="gender" value="男" id="man" v-model="gender"/>
						<label for="man">男</label>
						<input type="radio" name="gender" value="女" id="women" v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				<div>
					<span>爱好:</span>
					<input type="checkbox" name="hobbies" value="吃" v-model="hobbies"/>吃
					<input type="checkbox" name="hobbies" value="喝" v-model="hobbies"/>喝
					<input type="checkbox" name="hobbies" value="玩" v-model="hobbies"/>玩
				</div>
				<div>
					<span>职业</span>
					<!-- 如果需要设置为多选 则添加属性 -->
					<select name="occupation" v-model="occupation" multiple="true">
						<option value="工人">工人</option>
						<option value="教师">教师</option>
						<option value="工程师">工程师</option>
					</select>
				</div>
				<div>
					<span>个人简介</span>
					<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
				</div>
				<div>
					<!-- 阻止默认提交事件 -->
					<input type="submit"  value="提交" v-on:click.prevent="submitForm"/>
				</div>
			</form>
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					name: '输入名称',
					gender: '女',
					//多个数据定义时 应该使用数组
					hobbies:	['吃','喝','玩'],
					occupation: ['工人'],
					userInfo: ''
				},
				methods: {
					submitForm(){
						//数据提交
						console.log("姓名:"+this.name)
						console.log("性别:"+this.gender)
						console.log('爱好:'+this.hobbies)
						console.log('职业:'+this.occupation)
						console.log('用户详情:'+this.userInfo)
						console.log('封装好数据之后,可以使用ajax方式实现数据提交')
					}
				}
			})
		</script>
	</body>
</html>

表单修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
	</head>
	<body>
		<h1>表单修饰符number/trim/lazy</h1>
		<div id="app">
			<!-- 
				语法:
					.number 只能输入数值类型
					.trim   去除左右空格
					.lazy   离焦事件才触发
			 -->
			 <h3>数据展现: {{age}}</h3>
			 年龄: <input type="text" v-model.number="age" />
			 <button @click="addNum">增加</button>
			 <hr />
			 用户输入的长度: {{name.length}} <br>
			 用户名: <input type="text" v-model.trim="name" />	
			 <hr />
			 展现数据lazy~~{{msg}}  <br>
			 <input type="text" v-model.lazy="msg"/>
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					age: 18,
					name: '',
					msg: ''
				},
				methods: {
					addNum(){
						this.age += 1
					}
				}
			})
		</script>
	</body>
</html>

计算属性
复杂的操作如果通过{{}} 插值表达式封装比较冗余.
如果将复杂的操作封装为方法调用一次执行一次效率低.
计算属性:
1.可以封装复杂操作
2.内部有缓存机制,只需要计算一次.多次调用效率高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<h1></h1>
		<div id="app">
			<!-- 需求:
				 将用户的输入内容进行反转
				 API:
					1.字符串转化为数组 拆串 split('')
					2.将数组倒序		.reverse()
					3.将数组转化为字符串 .join('')
					
				 计算属性功能用法:
					1.插值表达式中应该写简单的算数计算,如果复杂应该封装
					2.如果数据操作相同则应该简化过程.
				 总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
			 -->
			<h3>数据展现:</h3> 
			{{reverse()}}<br>  <!-- 方法多次执行-->
			{{reverse()}}<br>
			{{reverse()}}<br>
			{{reverse()}}<br>
			{{reverseCom}}<br> <!-- 计算属性只执行一次-->
			{{reverseCom}}<br>
			{{reverseCom}}<br>
			{{reverseCom}}<br>
			<input type="text" v-model="msg"/>
		</div>
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					msg: 'abc'
				},
				methods: {
					reverse(){
						 console.log("方法执行!!!!!")
						 return this.msg.split('').reverse().join('')
					}
				},
				computed: {
					//key:value  必须添加返回值
					reverseCom(){
						console.log("计算属性!!!!")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

数组操作
push() 在结尾追加元素
pop() 删除最后一个元素
shift() 删除第一个元素
unshift() 在开头追加元素
splice() 替换数组中的数据 !!!
sort() 数据排序
reverse() 数组反转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组操作</title>
	</head>
	<body>
		<h1>数组操作</h1>
		<div id="app">
			
			<!-- 数组的方法  java中的叫法push:入栈 pop弹栈
				push() 	在结尾追加元素
				pop()	删除最后一个元素
				shift()	删除第一个元素
				unshift() 在开头追加元素
				splice() 替换数组中的数据 !!!!
				sort()	 数据排序
				reverse() 数组反转
			 -->
			 输入框: <input type="text" v-model="msg"/><br>
			<span v-for="(value) in array">
				{{value}},
			</span><br>
			<button @click="push">push</button>
			<button @click="pop">pop</button>
			<button @click="shift">shift</button>
			<button @click="unshift">unshift</button>
			<button @click="splice">替换</button>
			
		</div>
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					array: ["a","b","c"],
					msg: ''
				},
				methods: {
					push(){
						this.array.push(this.msg)
					},
					pop(){
						//数组数据会自动的更新
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						//在开头追加
						this.array.unshift(this.msg)
					},
					splice(){
						/**
						 * 参数: 3个参数
						 * 		arg1: 操作数据的起始位置 从0开始
						 * 		arg2: 操作的数量     阿拉伯数字
						 * 		arg3: 替换后的数据.可以有多个(可变参数类型)
						 * 案例:
						 * 		1.将第一个元素,替换为msg
						 * 			this.array.splice(0,1,this.msg)
						 * 		2.将前2个元素替换为msg
						 * 			this.array.splice(0,2,this.msg) 前2个替换
						 * 			this.array.splice(0,2,this.msg,this.msg) 前2个替换,补齐2个数据
						 * 		3.将最后一个替换为msg
						 * 			let index = this.array.length - 1;
									this.array.splice(index,1,this.msg)
								4.删除第二个元素
						 */
							//如果只有2个参数,则表示删除
							this.array.splice(1,1) 
					}
				}
			})
		</script>
	</body>
</html>

VUE基本语法