java三阶段学习_day05

最新推荐文章于 2024-11-03 23:30:01 发布

小骄傲_倍儿坚强

最新推荐文章于 2024-11-03 23:30:01 发布

阅读量81

点赞数

文章标签： vue java html javascript

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

版权

1.Vue js

1.1 vue 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

1.2 vue组件说明

在这里插入图片描述

1.3 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对象  指定渲染区域  动态调用
		-->
		
		
		
		<!-- 指定区域 -->
		<div id="app">
			<!-- 展现msg属性
			 插值表达式:{{key}}
			 -->
			<h1>{{msg}}</h1>
</div>
		
		<!-- 导入js文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 创建vue对象 -->
		<script>
			/**
			 * 语法:
			 * 		1.const 定义常量
			 * 		2.let   作用与var类似,有作用域概念
			 * 		3.var   特点:没有作用域
			 */
			const app=new Vue({
				el: "#app",
				data: {
					msg: "你好vue"
				}
			})
		</script>
	</body>
</html>

1.4数据显示

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

		<div id="app">
			<!-- 特点: 如果页面没有渲染完成,则直接展现给用户
					插值表达式需要直接显示
					显示时使用,输入不可使用-->
			<h1>{{msg}}</h1>
			
			<!-- v-text 如果页面没有渲染完成,则不显示信息-->
			<h1 v-text="msg"></h1>
			
			<!-- v-html 直接渲染html标签 -->
			<div v-text="h3html"></div>
			<div v-html="h3html"></div>
			
			<!-- v-pre 跳过预编译 -->
			<div v-pre>{{msg}}</div>
			
			<!-- v-once 只渲染一次 -->
			<div v-once>{{once}}</div>
		</div>

		<script src="../js/vue.js"></script>

		<script>

			const app=new Vue({
				el: "#app",
				data: {
					msg: "你好vue",
					h3html: "<h3>需要html渲染</h3>",
					once: "我只能被渲染一次"
				}
			})
		</script>
	</body>
</html>

1.5 双向数据绑定

1.5.1 双向数据绑定代码

双向数据绑定: 实现了页面与数据的绑定. 页面变数据变 / 数据变页面变.

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

		<div id="app">
		<!-- v-model 双向数据绑定 
				数据段--页面
				页面----数据 
				-->
				{{msg}}
		<input name="msg" v-model="msg" />
		
		</div>

		<script src="../js/vue.js"></script>

		<script>

			const app=new Vue({
				el: "#app",
				data: {
					msg: "数据随时修改",

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

1.5.2 MVVM设计思想

回顾: mvc模式,核心思想:减少代码的耦合性
m model:封装的数据
v view :视图层: 数据的展现
c contro 控制层: 程序的流转过程
衍生: 3层代码的结构 controller–service–mapper/dao
MVVM思想:
M: model 封装的数据
V: view 数据的展现视图层
VM: 数据视图的控制层控制数据流转的过程
MVVM是前端为了解耦,模拟后端设计的一种思想

1.5.3 双向数据绑定的原理

步骤:

用户修改页面是,通过DOM监听器感知用户的修改行为,通过虚拟DOM,第一时间更新Model中的数据.
当数据发生变化时,由虚拟DOM根据数据绑定的规则,第一时间通知真实的DOM,页面发生变化.

在这里插入图片描述

1.6 事件绑定

语法:

	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>

1.7 按键触发机制

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

1.8 计算器练习

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

1.9 按键修饰符

1.9.1 阻止冒泡 .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>

1.9.2 阻止默认行为 .prevent

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