java三阶段学习_day06

最新推荐文章于 2024-08-23 10:53:05 发布

小骄傲_倍儿坚强

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量107

点赞数

文章标签： vue js html java

本文链接：https://blog.csdn.net/m0_58407149/article/details/119172957

版权

本文详细介绍了Vue的基础用法，包括HTML属性绑定、分支结构的v-if/v-else-if/v-else应用、表单数据绑定、计算属性以及数组操作。通过实例演示了如何在实际项目中运用这些技术来构建用户界面。

摘要由CSDN通过智能技术生成

1 属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
		<style>
			/* 红色  高度50  宽度50 */
			.red{
				background-color: red;
				height: 50px;
				width: 50px;
			}
			.blue{
				background-color: blue;
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<!-- a标签的属性绑定
				 语法:v-bind:href="vue中的属性" -->
			<a v-bind:href="url">百度</a>
			<!-- 简化写法 
				 : 代表属性绑定-->
			<a :href="url">百度</a>
			<hr />
			<!-- class类型绑定
				 class中可以定义多个样式,简化程序的调用 
				 规则: :class是属性绑定,绑定之后查找对应的属性
				 colorClass: "blue" 之后根据value值 blue查找对应的css样式-->
				<div :class="colorClass">我是class修饰</div>
				<!-- 属性的切换
				需求: 通过按钮控制样式是否展现
					 语法: :class{colorClass: true}
					 -->
					 <hr />
				<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>

2 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>

		<div id="app">
		<!-- 分支结构
			 语法: 
			 v-if 如果为true则展现标签
			 v-else-if 必须与v-if连用
			 v-else    必须与v-if连用  否则...
			 案例:
			 按照用户考试成绩进行评级
				>=90 优秀  >=80 良好
				>=70 中等  >=60 及格
				<60  不及格 
			 -->
			 <h2>评级</h2>
			 输入分数:<input type="number" v-model="score" />
			 <div v-if="score<=100 && score>=0">
			 	
			 
			 <div v-if="score>=90"><h1>优秀</h1></div>
			 <div v-else-if="score>=80"><h2>良好</h2></div>
			 <div v-else-if="score>=70"><h3>中等</h3></div>
			 <div v-else-if="score>=60"><h4>及格</h4></div>
			 <div v-else>不及格</div>
		</div>
</div>
		<script src="../js/vue.js"></script>

		<script>

			const app=new Vue({
				el: "#app",
				data: {
					score: 0
				}
			})
		</script>
	</body>
</html>

3 循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>

		<div id="app">
			<!--需求1:
					将数组中的数据在页面中展示
					-->
			<p v-for="item in array" v-text="item">
			<!-- {{item}} -->
			</p>
			
			<!--需求2:
					获取数组下标 
					-->
			<p v-for="(item,index) in array" >
			{{index}}==	{{item}}
			</p>
			
			<!-- 需求2:
					遍历对象
			 -->
			 <hr />
			 <p v-for="(value,key,index) in user">
				 {{index}}=={{key}}=={{value}}
			 </p>
			 
			<!-- 需求2:
					遍历对象集合
			 -->
			 <hr />
			 <p v-for="user in userlist">
				id:{{user.id}}
				|name:{{user.name}}
				|age:{{user.age}}
				<p v-for="(value,key,index) in user">
					下标:{{index}}
					|key:{{key}}
					|value:{{value}}
				</p>
			 </p>
			 <!-- 总结:
					如果遍历数组  参数是(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: "tomcat",
						age: 18
					},
				userlist: [
					{
						id: 100,
						name: "tomcat",
						age: 18},
						{
							id: 10,
							name: "cat",
							age: 12
						},
				]
				}
			})
		</script>
	</body>
</html>

4 form表单数据绑定

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

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: {
					//key:value  必须添加返回值
					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">替换</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>

8 知识小结

8.1属性绑定

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

8.2 分支结构

用法: 如果数据为真则展现html标签
语法: v-if/v-else-if/v-else
要求: v-if可以单独使用
另外2个必须与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 表单操作

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

8.5 计算属性

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

8.6 数组操作

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

8.7 VUE生命周期(难点!!)

周期:
1.初始化周期
1.beforeCreate vue对象实例化之前(刚开始)
2. created
3. beforeMount
4. Mounted 说明VUE对象实例化成功(DIV渲染完成)
2.修改周期

beforeUpdate 用户修改数据之前
updated 用户修改数据之后
3.销毁周期
beforeDestroy VUE对象销毁前
destroyed VUE对象销毁后(最后一步)

生命周期函数的作用:
如果需要对VUE对象中的数据进行额外的操作.则使用生命周期函数.
目的: 框架的扩展性更好.(实现定制化)
在这里插入图片描述

小骄傲_倍儿坚强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java三阶段学习_day06

1 属性绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>VUE入门案例</title> <style> /* 红色高度50 宽度50 */ .red{ background-color: red; height: 50px; width: 50px; } .blue{ ba
复制链接

扫一扫