java三阶段学习_day05

本文主要是介绍java三阶段学习_day05，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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同步请求 -->

这篇关于java三阶段学习_day05的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

java三阶段学习_day05

1.Vue js

1.1 vue 是什么

1.2 vue组件说明

1.3 vue入门案例

1.4数据显示

1.5 双向数据绑定

1.5.1 双向数据绑定代码

1.5.2 MVVM设计思想

1.5.3 双向数据绑定的原理

1.6 事件绑定

1.7 按键触发机制

1.8 计算器练习

1.9 按键修饰符

1.9.1 阻止冒泡 .stop

1.9.2 阻止默认行为 .prevent

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯