CGB2105-Day06

最新推荐文章于 2021-08-12 09:56:38 发布
最新推荐文章于 2021-08-12 09:56:38 发布
阅读量3.8k 收藏 22
点赞数 4
分类专栏： 2105 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16804847/article/details/119170805
版权
本文详细介绍了Vue.js中的属性绑定，包括基本的`v-bind`用法、class和style的动态绑定、条件渲染（`v-if/v-else-if/v-else`）以及循环结构（`v-for`）。通过实例展示了如何动态改变属性值、切换class、控制元素显示，并探讨了表单数据绑定、表单修饰符、计算属性以及数组操作。此外，还总结了Vue.js生命周期中的关键阶段及其应用。
摘要由CSDN通过智能技术生成

1. 属性绑定

1.1 入门案例

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

2 分支结构语法

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

3 循环结构

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

4 form表单数据绑定

主要练习: 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属性绑定

  1. 属性绑定 v-bind:xxxx 动态为属性赋值
  2. class绑定 如果用户需要切换class 则可以使用该操作
  3. 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 表单操作

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

8.5 计算属性

  1. 复杂的操作如果通过{{}} 插值表达式封装 比较冗余.
  2. 如果将复杂的操作封装为方法 调用一次执行一次 效率低.
  3. 计算属性:
    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.修改周期
1. beforeUpdate 用户修改数据之前
2. updated 用户修改数据之后
3.销毁周期
1. beforeDestroy VUE对象销毁前
2. destroyed VUE对象销毁后(最后一步)

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

在这里插入图片描述

闪耀太阳
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
cgb2106-day05
cgblpx的博客
07-30 6302
文章目录一,视图--1,概述--2,测试二,SQL练习--1,测试三,SQL优化的方案--1,总结三,SQL优化的方案 一,视图 –1,概述 可以把SQL的查询结果缓存起来,存入视图中. 好处: 简化了SQL的编写 坏处: 没法做SQL的优化,占用空间. –2,测试 #1.创建视图:缓存了查询结果 CREATE VIEW `cgb2106`.`emp_view` AS #以下的SQL执行的结果会被缓存到视图中 (SELECT * FROM emp WHERE ename LIKE '%a%'); #2.
cgb2106-day06
cgblpx的博客
08-02 4500
一,改造登录案例 –1,概述 –2, –3, 标题 标题
cgb2105-day06
cgblpx的博客
07-05 4513
一，SQL注入 –1，需求 –1，利用jdbc查询user的信息，如果信息正确就登录，否则提示错误 –1，创建user表，指定字段id name password，并添加数据 –2，通过jdbc查询user表的数据，根据用户名和密码查 –2，测试 package cn.tedu.test; import java.sql.*; import java.util.Scanner; //测试 用户的查询 /* create table user( id int primary key auto_incre
CGB2105-Day18
qq_16804847的博客
08-12 5939
1.安装JDK 2.安装MySql数据库(需要外网) 3.tomcat基本发布 (SpringBoot发布到Linux中) 4.部署tomcat集群(部署2台) 5.nginx操作 6.反向代理 7.负载均衡 8.实现项目完整部署
CGB2011-DAY13-14.html
03-30
CGB2011-DAY13-14.html
CGB2011-DAY02.html
03-12
CGB2011-DAY02.html
cgb2106-day12
cgblpx的博客
08-10 5908
标题
cgb2106-day02
cgblpx的博客
07-27 5776
标题
京淘后台管理开发文档
热门推荐
qq_16804847的博客
08-04 2万+
京淘后台管理开发文档
CGB2105-Day02
qq_16804847的博客
07-22 7999
1.SpringBoot高级用法 2.SpringBoot整合Mybatis 3.MybatisPlus框架
CGB2105-Day07-Day08
qq_16804847的博客
07-29 7087
1.Ajax请求 Axios 2.请求的方式 get/post/put/delete 3.实现完整的前后端的数据交互 4.前端restFul风格
CGB2105-Day03
qq_16804847的博客
07-23 6934
1. MybatisPlus 2.前后端调用机制 Ajax
CGB2105-Day04
qq_16804847的博客
07-26 5654
1.手动搭建后端完成项目 2.前后端调用 3.Ajax问题 异步原理 4.什么是跨域
CGB2105-Day05
qq_16804847的博客
07-27 5009
1.VUEJS 2.VUEJS 语法 内容多 细节
CGB2105-Day09
qq_16804847的博客
08-02 4815
1.VUE 练习 2.VUE组件化的思想 3.VUE路由机制 4.京淘后台管理搭建 5.前后端分离思想 MP
CGB2105-Day17
qq_16804847的博客
08-11 4631
1.Window与Linux系统的链接问题 检查虚拟机的网段 检查windowsIP地址 检查Linux IP 192.168.126.129 检查是否可以正常通信 如果上述操作都对 但是还是不能正常链接 点击恢复默认设置.之后重新配置
CGB2105-Day12
qq_16804847的博客
08-05 4261
1.用户的登陆实现 2.控制权限 路由导航守卫 3.系统首页的跳转 4.左测菜单的实现 5.左侧菜单的跳转说明
CGB2105-Day13
qq_16804847的博客
08-06 4221
1.用户模块管理 代码结构 2.用户分页查询 !!! 数学问题 3.用户模块状态更新 4.用户新增 5.用户删除 6.用户修改
H3CGB0-190试题解析：数据链路层与网络设备
"GBO-190题库包含与数据链路层相关的设备识别、光纤类型理解、IP地址处理、TCP连接建立、FTP协议端口、操作系统启动配置、MTU检测、交换机STP状态判断以及STP协议在交换网络中的应用等内容。" ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

闪耀太阳

感觉文章不错的记得打赏呀

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值