JAVA-stage3-day06-VUE2

于 2021-07-28 18:37:34 发布
阅读量114 收藏
点赞数
分类专栏： java stage 3 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58818711/article/details/119174345
版权

1 属性绑定

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>属性绑定</title>
			<style>
				/* 红色 宽度 高度  */
				.red {
					background-color: hotpink;
					width: 500px;
					height: 25px;
				}
				.blue {
					background-color: aquamarine;
					width: 250px;
					height: 25px;
				}
			</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样式
					-->
				 <div :class="colorClass">我是class修饰</div>
				 <hr />
				 <!-- 3.属性切换
						需求:通过按钮控制样式是否展现 属性
						语法: :class={class类型的名称: false}
						-->
				<div :class="{blue: flag}">我是class修饰</div>
				<button @click="flag = !flag">切换</button>
				<!-- 小结:
						1.如果需要切换样式 使用属性变量colorClass:"blue"
						2.如果切换是否显示 使用: class="{red: flag}"
						-->

			 </div>
			 <script src="../js/vue.js"></script>
			 <script>
			 const APP = new Vue({
				 el: "#app",
				 data: {
					 url: "http://www.baidu.com",
					 colorClass: "red",
					 flag: true
				 }
			 })
			 
			 </script>
		</body>
	</html>

2 分支结构

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>分支结构</title>
		</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 type="number" 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: 90

				 }
			 })
			 
			 </script>
		</body>
	</html>

3 循环结构

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>循环结构</title>
		</head>
		<body>
			 <div id="app">
				 <!-- 什么时候使用循环
							多次重复的执行同一个操作
						什么数据使用循环
							1.数组
							2.对象
							3.数组套对象(集合)
						需求
							1.将数组中的数据在页面中展现
							2.获取下标
					-->
					<!-- 1.遍历数组 -->
					<p v-for="item in array" v-text="item">
					<!-- {{item}} -->
					</p>
					<!-- 获取下标
							语法:v-for="(遍历的元素,遍历的下标) in array"
						-->
					<p v-for="(item,index) in array" >
						下标:{{index}}----数据值:{{item}}
					</p>
					<!-- 2.遍历对象 
						v-for="value,key,index下标"
					-->
					<hr />
					<p v-for="(value, key, index) in user">
						{{index}}----{{key}}----{{value}}
					</p>
					<hr />
					<!-- 3.遍历"集合"-->
					<div v-for="user in userList">
						ID: {{user.id}} | name: {{user.name}} | age: {{user.age}}
						<p v-for="(value,key,index) in user">
							{{index}}-{{key}}-{{value}}
						</p>
					</div>
					<!-- 总结 
					如果遍历数组 参数(value,index)
					如果遍历对象 参数(value,key,index)
					特点:遍历数据在页面中显示
					-->

			 </div>
			 <script src="../js/vue.js"></script>
			 <script>
			 const APP = new Vue({
				 el: "#app",
				 data: {
					 array: ["郭晶晶","吴敏霞","姚明"],
					 user: {
						 id: 100,
						 name: "tom",
						 age: 18						 
					 },
					 userList: [
						 {
							 id: 101,
							 name: "tracy",
							 age: 16
						 },
						 {
							 id: 102,
							 name: "jerry",
							 age: 108
						 }
					 ]
				 }
			 })
			 
			 </script>
		</body>
	</html>

4 表单操作

<!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>
						<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>

5 表单修饰符

<!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>

6 计算属性

<!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: {
					reverseCom(){
						console.log("计算属性")
						return this.msg.split("").reverse().join("")
					}
				}
			})
		</script>
	</body>
</html>

7 数组操作

<!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">splice</button>
			<button @click="sort">sort</button>
			<button @click="reserve">reverse</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.将前两个元素替换为msg
						 * 	this.array.splice(0,2,this.msg)
						 * 	this.array.splice(0,2,this.msg,this.msg)
						 * 	3.将最后一个替换为msg
						 * 	let index = this.array.length - 1;
						 *		this.array.splice(index,1,this.msg)
						 * 	4.删除第二个元素
						 */
						//如果只有两个参数,则表示删除
						this. array.splice(1,1)
					},
					sort(){
						this.array.sort()
					},
					reserve(){
						this.array.reverse()
					}
				}
			})
		</script>
	</body>
</html>

8 知识总结

8.1 属性绑定

  1. 属性绑定
  2. Class绑定
  3. class绑定 数据是否展现 可以通过{class类型 true/false}

8.2 分支结构

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

8.3 循环结构

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

8.4 表单操作

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

8.5 计算属性

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

8.6 数组操作

push() 结尾追加
pop() 结尾删除
shift() 开头删除
unshift() 开头追加
splice() 替换
sort() 排序
reverse() 反转

8.7 VUE的生命周期(难点)

周期
1.初始化周期
beforeCreate Vue对象创建前
created
beforeMount
mounted Vue对象创建完成
2.更新周期
beforeUpdate
updated
3.销毁周期
beforeDestory Vue对象销毁前
destroyed Vue对象销毁后(最后一步)
生命周期函数的作用:
如果需要对VUE对象中的数据进行额外的操作,则使用生命周期函数,目的是为了框架的扩展性更好(定制化)

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值