JAVA-stage3-day05-VUE

最新推荐文章于 2024-07-18 20:13:39 发布
最新推荐文章于 2024-07-18 20:13:39 发布
阅读量87 收藏
点赞数
分类专栏： java stage 3 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58818711/article/details/119142501
版权

1. Vue js

1.1

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

1.2

在这里插入图片描述

1.3 Vue基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 入门案例步骤
		 1.导入vue.js文件     html下部编辑
		 2.指定区域进行渲染  需要准备div  vue.js代码
		 3.创建Vue.js对象     指定渲染区域   动态调用
		 -->
		 <!-- 2.指定区域-->
		 <div id="app">
			<!-- 在div中展现msg属性
					插值表达式:{{key}}
			 -->
			 <h1>{{msg}}</h1>	
		 </div>
		 
		 <!-- 1.导入JS文件-->
		 <script src="../js/vue.js"></script>
		 
		 <!-- 3.创建Vue对象-->
		 <script>
		 /**
		  * 语法:
		  * 	1.const 定义常量
		  * 	2.let   作用和var类似,有作用域的概念 
		  * 	3.var  特点:没有作用域 
		  */
		 const APP = new Vue({
			 //1.指定区域
			 el: "#app",
			 //2.定义属性
			 data: {
				 //key:value
				 msg: "你好Vue"
			 }
		 })
		 
		 </script>
	</body>
</html>

1.4 数据显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		 <div id="app">
			<!-- 特点:如果页面没有渲染完成,则直接展现给用户 
							插值表达式需要直接显示,不可以在标签内作为属性显示
					注意事项:只有显示时采用,输入操作input不可使用
					
			-->
			 <h1>{{msg}}</h1>
			 <!-- 1.v-text指令,如果页面没有渲染完成,则不显示信息--->
			 <h1 v-text="msg"></h1>
			 
			 <!-- 2.v-html 直接渲染html标签-->
			 <div v-html="h3Html"></div>
			 
			 <!-- 3. v-pre 跳过预编译, 显示标签体本身-->
			 <div v-pre>{{msg}}</div>
			 
			 <!-- 4. v-once 只渲染一次-->
			 <div v-once>{{once}}</div>
			 
		 </div>
		 
		 <!-- 1.导入JS文件-->
		 <script src="../js/vue.js"></script>
		 
		 <!-- 3.创建Vue对象-->
		 <script>
		 /**
		  * 语法:
		  * 	1.const 定义常量
		  * 	2.let   作用和var类似,有作用域的概念 
		  * 	3.var  特点:没有作用域 
		  */
		 const APP = new Vue({
			 //1.指定区域
			 el: "#app",
			 //2.定义属性
			 data: {
				 //key:value
				 msg: "你好Vue",
				 h3Html: "<h3>我需要html渲染</h3>",
				 once: "我只能渲染一次"
			 }
		 })
		 
		 </script>
	</body>
</html>

1.4.1

1.5 双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>
		 <div id="app">
			 <!-- 双向数据绑定 v-model 数据和页面随对方改变而改变-->
			<input name="msg" v-model="msg"/>
			<br />
			{{msg}}
			 
		 </div>
		 
		 <!-- 1.导入JS文件-->
		 <script src="../js/vue.js"></script>
		 
		 <!-- 3.创建Vue对象-->
		 <script>
		 /**
		  * 语法:
		  * 	1.const 定义常量
		  * 	2.let   作用和var类似,有作用域的概念 
		  * 	3.var  特点:没有作用域 
		  */
		 const APP = new Vue({
			 //1.指定区域
			 el: "#app",
			 //2.定义属性
			 data: {
				 //key:value
				 msg: "数据随时修改"
			 }
		 })
		 
		 </script>
	</body>
</html>

1.5.1 MVVM

1.5.2 MVVM设计思想

知识回顾:MVC模式 核心思想 减少代码的耦合性
M Model:封装的数据
V View视图层:数据的展现
C Control 控制层 程序的流转的过程
衍生: 3层代码的结构 Controller-Service–Mapper/Dao
针对于 后端服务器

MVVM思想说明
M: Model 封装的数据 数据层
V: View 数据的展现 视图层
VM: ViewModel 数据视图的控制层 控制数据流转
MVVM设计思想是前端模拟后端为了解耦 的一种设计思想

1.5.3 双向数据绑定原理

原理步骤:
1.用户修改页面时,通过DOM的监听器感知用户的修改行为,之后通过虚拟的DOM对象,第一时间更新Model中的属性
2.当数据发生变化,由虚拟DOM根据数据绑定的规则,第一时间通知真实的DOM对象,至此页面的数据发生变化
在这里插入图片描述

1.6 事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		 <div id="app">
			 <!-- 需求: 实现数据自增操作
					1语法: v-on:click="函数/直接计算"
					2简化语法 v-on:可以简化为@
			 -->
			 <h3>数据: {{num}}</h3>
			 <br />
			 <button v-on:click="num++"><h4>自增</h4></button>
			 <button @click="num++"><h4>自增简化</h4></button>
			 <!-- 如果没有参数则()可以省略-->
			 <!-- <button @click="addNum()"><h4>计算</h4></button> -->
			 <button @click="addNum"><h4>计算+1</h4></button>
			 <button @click="reduceNum"><h4>计算-1</h4></button>
		 </div>
		 
		 <!-- 1.导入JS文件-->
		 <script src="../js/vue.js"></script>
		 <!-- 3.创建Vue对象-->
		 <script>
		 /**
		  * 语法:
		  * 	1.const 定义常量
		  * 	2.let   作用和var类似,有作用域的概念 
		  * 	3.var  特点:没有作用域 
		  */
		 const APP = new Vue({
			 //1.指定区域
			 el: "#app",
			 //2.定义属性
			 data: {
				 //key:value
				 num: 100
			 },
			 methods: {
				 //{}里面是一个对象 key方法名: value方法体
				 addNum: function(){
					 this.num++
				 },
				 //方法的简化 JS脚本支持
				 reduceNum(){
					 this.num--
				 }
				 
			 }
		 })
		 
		 </script>
	</body>
</html>

1.7 案件触发

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>案件触发</title>
		</head>
		<body>
			 <div id="app">
				 <!-- 用户通过输入 按特殊键位触发函数-->
				 <h3>用户数据:{{num}}</h3><br />
				 <input type="text" 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 += parseInt(this.num2)
					 }
				 }
			 })
			 
			 </script>
		</body>
	</html>


			 <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:按钮实现加法操作
						要求2:按回车实现触发
						要求3:按空格实现触发
						
				 -->
				 <h3>用户数据:{{num}}</h3><br />
				 <!-- <input type="text" @keyup.enter="addNum" v-model="num2" /> -->
				 <input type="text" v-on:keyup.space="addNum" v-model="num2" />
				 <button @click="addNum">计算</button>
			 </div>

1.8 计算器练习

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>计算器作业</title>
		</head>
		<body>
			 <div id="app">
				 <!-- 要求
					1.准备两个文本输入框 num1/num2
					2.要求准备一个按钮 "计算" 当点击按钮时实现 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>
			 </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

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

2 SpringMVC参数取值详情说明

2.0 Servlet

**Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，**用Java编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互式地浏览和生成数据，生成动态Web内容。
狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。

总结:Servlet是java与前端页面进行数据交互的一种机制
核心对象
1.request对象 封装用户请求的参数/请求头/请求全部内容
2.response对象 封装用户响应信息

2.1 对象方式

2.3 restFul风格

双子不爱双子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RuoYi-Vue-Plus 是重写 RuoYi-Vue
03-07
虽然 RuoYi-Vue-Plus 主要关注前端的 Vue.js 部分，但其后端通常会使用 Java 技术栈，例如 Spring Boot、MyBatis 或者 Spring Cloud，这些框架提供了丰富的功能，如自动化配置、数据库操作以及微服务治理等。...
vue-3d-model
03-21
vue展示3D模型
JAVA-stage3-day09-VUE3
m0_58818711的博客
08-02 103
1. 知识回顾 1.1 Axios案例 1.1.1 Ajax发展史 1.JS的原生Ajax操作,处理复杂 不便于使用 2.JQuery 是JS的高级函数类库 封装了很多的API 简化程序调用的过程(回调地狱 Ajax嵌套问题) 3.promise对象 将Ajax嵌套的结构 转化为链式加载的结构 ajax.get().then(xxx) 4.Axios 主要封装了promise对象,将调用变得更加简化,整个VUE.js中大部分条件下都整合axios发起ajax请求 1.1.2请求的类型 http常用的请求类型
JAVA-stage3-day06-VUE2
m0_58818711的博客
07-28 80
1 属性绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性绑定</title> <style> /* 红色 宽度 高度 */ .red { background-color: hotpink; width: 500px; height: 25px; } .b
JAVA-stage3-day07-axios
m0_58818711的博客
07-30 177
1.后端项目搭建 1.1 创建项目 项目名称: springboot_demo5_axios 要求: mapper/service/pojo/controller 1.2 SpringMVC参数传递方式 1.2.1 简单的参数传递 url地址: http://localhost:8090/getUserById?id=100 编辑后台Controller代码 @Autowired private UserService userService; /** *url:http
Java - stage3 - day07 - SpringMVC + VUE前端
taian1665的博客
09-29 14
1. SpringMVC 参数传递 总结 2. RestFul 数据结构 3. VUE JS 综合案例 4. Axios 5. 前端脚手架客户端
vue-devtools安装工具包.zip
03-23
内附已用npm处理过的vue-devtools工具包，已配置过源码文件，直接拿来用即可。利用vue-devtools工具包安装vue-devtools的具体操作过程可查看博主主页文档，操作简单，便于上手。
vue3.0 vue-quill-editor.rar
09-19
总的来说，Vue3.0 + Vue-Quill-Editor的组合为开发者提供了强大的富文本编辑功能，结合Vue CLI 3的快速开发能力，可以高效地构建出具有图片上传和尺寸调整功能的文本编辑器应用。在实际操作中，需注意版本兼容性、...
vue-admin-template Java .zip
08-02
总的来说，vue-admin-template是一个典型的前后端分离的项目结构，集成了Vue.js、Vuex、Element UI、axios等前端技术，以及Java、Spring Boot、Spring Data JPA和JWT等后端技术，是学习和实践现代Web开发的一个优秀...
《JavaSE》---6.＜基础语法（Java三大程序控制结构）＞
m0_73456341的博客
07-14 812
本篇博客主要讲解Java基础语法中的三大结构，一种顺序结构、两大分支结构i（if-else、swich-case）、四大循环结构（while、do while、fot、foreach）
Spring Security 授权
persistence_PSH的博客
07-14 880
在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。通过 RBAC 获取到用户的具体权限后，再通过 Security 的 用户-权限-资源 来进行权限控制。HttpSecurity 权限配置。
【Go系列】 Sync并发控制
u013379032的博客
07-14 1011
在上一篇文章中，我们介绍了goroutine和channel，理论上，通过channel可以实现并发控制，但是其他语言的开发者可能更习惯一些原子操作的库。当然Go语言也会提供这样的库，所以我们今天了解一下sync库。
接口防刷！利用redisson快速实现自定义限流注解
最新发布
架构师小吴的博客
07-18 823
如登录接口，当用户使用手机号+验证码登录时，一般我们会生成6位数的随机验证码，并将验证码有效期设置为1-3分钟，如果对登录接口不加以限制，理论上，通过技术手段，快速重试100000次，即可将验证码穷举出来。解决思路：对登录接口加上限流操作，如限制一分钟内最多登录5次，登录次数过多，就返回失败提示，或者将账号锁定一段时间。在日常开发中，一些重要的对外接口，需要加上访问频率限制，以免造成资��损失。ok，通过以上两步，即可完成我们的限流注解了，下面通过一个接口验证下效果。
day04：Redis和店铺营业状态设置
m0_69266818的博客
07-15 821
介绍了Redis命令和用java操作redis还有营业额状态接口的书写
【Java算法】前缀和 下
2302_79806056的博客
07-18 677
这段代码实现了一个寻找数组中具有相等数量的0和1的最长子数组长度的算法。具体来说，它使用了前缀和（prefix sum）的概念以及哈希映射（HashMap）来优化查找过程。初始化哈希映射：计算前缀和：检查相等数量的0和1：更新哈希映射：返回结果：这种方法的时间复杂度为O(n)，因为我们只遍历数组一次，并且对每个元素执行常数时间的操作。空间复杂度也是O(n)，最坏情况下需要存储n个前缀和值。 初始化阶段:开始遍历数组:继续
【JAVA】相关程序组件
qq_44077764的博客
07-15 149
【JAVA】相关程序组件
深入剖析 Java 中 Spring Bean 的生命周期
weixin_42545951的博客
07-12 698
在 Java 开发中，Spring 框架是广泛使用的企业级应用开发框架。理解 Spring Bean 的生命周期对于开发者来说至关重要，这也是面试中经常会被问到的重要知识点。
maven项目容器化运行之1-基于1Panel软件将docker镜像构建能力分享给局域网
qq_37372909的博客
07-15 507
docker核心功能包括镜像的构建和容器的运行，它可以开放端口将镜像构建的能力暴露。docker daeson就是docker的守护进程，开放能力是通过指定docker守护进程监听端口来实现的。后面开发人员就可以通过maven中docker插件来远程调用docker镜像构建能力了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值