Vue介绍_day05

最新推荐文章于 2024-08-29 18:44:48 发布
最新推荐文章于 2024-08-29 18:44:48 发布
阅读量84 收藏
点赞数
分类专栏： SpringBoot学习笔记 文章标签： java spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qfbeqhbviq/article/details/119150548
版权

1.Vue JS

1.1 Vue介绍

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

1.2 Vue结构

1.3 Vue语法

1.3.1 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对象 指定渲染区域 动态调用
		 -->
		
		<!-- 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.3.1数据显示

数据显示命令：v-text、v-html、v-pre、v-once

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<div id="app">
			<!-- 特点: 如果页面没有渲染完成,则直接展现给用户
				插值表达式需要直接显示
				注意事项:  只有显示时采用,输入操作不可使用
				1.v-text指令: 如果页面没有渲染完成,则不显示信息
			-->
			{{msg}}
			<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>
		<script>
			const APP=new Vue({
				el:"#app",
				data:{
					msg:"Hello Vue",
					h3Html:"<tr>我需要h3Html的渲染</tr>",
					once:"我只能被渲染一次"
				}
			})
		</script>
	</body>
</html>

1.4 双向数据绑定

1.4 .1 双向数据绑定案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		<!-- 2.指定区域 -->
		<div id="app" >
			<!-- 双向数据绑定 v-model
			1.数据端---页面
			2.页面-----数据
			-->
			<input  name="msg" v-model="msg"/><br/>
	         数量:{{msg}}<br/>
			 <input name="msg2" v-model="msg" /> <br />
			 数量:{{msg}}
		</div>
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					msg: "您好VUE"
				}
			})
		</script>
		
	</body>
</html>

1.4.2 MVVM设计思想

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

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

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

1.4.3 事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<div id="app" >
			<!-- v-on: 事件绑定
			  1、语法： v-on:click=“函数、直接计算”
			  2、v-on:可以简化为@ 
			-->
			<h3>{{num}}</h3>
			<button v-on:click="num++">自增</button><br/>
			<button @click="num++">自增</button><br/>
			<button @click="addNum()">计算</button><br/>
			<button @click="addNum2()">减减</button>
			<!-- 如果没有参数（）可以省略 -->
		</div>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num : 100
				},
				methods:{
					// K:V  方法名:方法体
					addNum:function(){
						this.num++
					},
					addNum2(){//方法简化--JS脚本支持
						--this.num
					}
				}
			})
		</script>
		
	</body>
</html>

1.4.4 按键触发

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键触发</title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<div id="app" >
			<h1>用户数据:{{num}}</h1><br />
			<input  v-model="num2"/><br>
			<!-- 按钮实现触发-->
			<button @click="math">提交</button><br />
			<!-- 回车实现触发 
			@keydown 按下触发
			@keyup 弹起来触发
			@keypress 小键盘触发
			-->
			<input  v-model="num2"  @keyup.enter="math" /><br>
			<input  v-model="num2"  @keyup.space="math" /><br>
		</div>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num:100,
					num2:0
				},
				methods:{
					math(){
						this.num+=parseInt(this.num2) 
					}
				}
			})
		</script>
		
	</body>
</html>

1.4.5 计算器案例

在这里插入图片描述

<!DOCTYPE html>
<!-- 
   
 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<div id="app">
			 <h1>计算器</h1>
			 <h2>和:{{count}}</h2>
			 num1:
			 <input v-model="num1" type="number"/><br/><br/>
			 num2:
			 <input v-model="num2" type="number" @keyup.enter="addNum()"/><br/>
			 <button @click="addNum">计算和</button>

		</div>
		<script>
			const APP=new Vue({
				el:"#app",
				data:{
					count:0,
					num1:0,
					num2:0
				},
				methods:{
					addNum(){
						this.count=parseInt(this.num1)+parseInt(this.num2)
					}
				}
			})
		</script>
	</body>
</html>

1.4.6 按键修饰符

1.4.6.1 阻止冒泡 .stop / 阻止默认事件 .prevent
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<div id="app" @click="num++">
			    <!--停止冒泡：@click.stop=""-->
				<h1>数值{{num}}</h1><br/>
				<button @click.stop="num++">提交</button>  
				 <hr/>
				 <!-- 要求：点击标签不跳转，同时触发事件@click.prevent="" -->
				 <a href="http://baidu.com" @click.prevent="num">百度</a>
		</div>
		<script>
			const APP=new Vue({
				el:"#app",
				data:{
				 num:100
				},
				methods:{

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

2.SpringMVC参数取值详细说明

2.2 对象方式

2.2.1 前端页面对象封装

<!DOCTYPE html>
               <!--  ajax参数传递 ：
				1、简单传递:根据id=1 查询传递
				 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>springMVC参数传递</title>
		<script src=../jquery-2.0.0.min.js></script>
	     
		<!-- 请求类型：
		get
		post
		put
		delete -->
	
		<script>
	// 		$(function(){
	// 			let url="http://localhost:8090/run/test3"
	// 	         let user={
	// 				 id:1,
	// 				 name:"黑熊精",
	// 				 age:200,
	// 				 sex:"男"
	// 			 }
	// 			$.get(url,user,
	// 			function(result){//回调函数
	// 				console.log(result);
	// 			})
	
	// 		})
			$(function(){
				let url="http://localhost:8090/run/test2"
			     let data={
					id:6
				 }
				$.get(url,data,
				function(result){//回调函数
					console.log(result);
				})
				
			})
		</script>
	</head>
	<body>
	</body>
</html>

2.2.1后端参数接收

@GetMapping("test2")
    public User test2(Integer id)
    {
        User user = userService.selectById(id);
        return user;
    }

    @GetMapping("test3")
    public User test3(User user){
        System.out.println(user);
        return user;
    }
博客新生儿~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门(1)
weixin_44206148的博客
11-15 418
Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。如何理解Vue渐进式--自底相上逐层应用。例如简单的应用只需一个轻量小巧的核心库，而复杂的应用可以通过引入各式各样的Vue插件来实现。Vue可以由轻量应用逐渐递进到复杂应用。 前端工程师：在合
VUE day_01(7.15) vue的入门---使用vue脚本可以实现的一些功能
m0_70328115的博客
07-22 862
插值语法、属性绑定语法、事件绑定语法、计数器、事件参数、显示与隐藏、html与text、v-once、v-if、v-for、安装脚手架并生成项目包
vue的学习
l10711097061的博客
04-09 685
vue的学习
day05-vue入门
hu_zhi_chao的博客
06-22 1209
vue入门学习目标0.前言1.认识Vue2.Node和NPM2.1.下载Node.js2.2.NPM3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.2.3.推荐npm安装3.3.vue入门案例3.3.1.HTML模板3.3.2.vue声明式渲染3.3.3.双向绑定3.3.4.事件处理4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this5.指令5.1.插值表达式
day05_vue2基础教程
与海
06-15 740
简写并渲染app组件 效果 显示隐藏的配置信息 ref属性 Vue 中的 ref 属性详解vue中组件的props属性（详）
vue day05 error
qq_50527371的博客
04-22 1412
最近没有记录，是因为都是一些小错误，想来想去还是给大家提个醒吧 例如： ReferenceError: item is not defined 我搜的时候居然有人说：这就是item没找到，可以看看是不是忘记在（）写参数了 再例如 Module build failed (from ./node_modules/babel-loader/lib/index.js) 有人说又得降xxx版本，但很有可能就是你单词写错了，在与老师版本相同的时候，建议慎重更改版本，因为大概率就是你什么单词写错了，写点
vue面试题（day05）
weixin_59763367的博客
03-17 720
vue面试题
day05--vue登录页面shop_vue
一个保安的自由之路
07-28 289
登录/退出功能 1.visual studio code下载 https://pc.qq.com/detail/16/detail_22856.html 2.使用visual studio code开发工具 PS D:\projects\项目实战day01\code\vue_shop> git status On branch master Your branch is up to date with 'origin/master'. nothing to commit, working tree
Vue2学习day05—Todo-list案例
Happy_change的博客
03-14 2482
文章目录Vue2学习day05—— Vue2学习day05—— Todo-list案例
Vue 配置vue环境，创建实例_day1
人生苦短，何妨一试
12-16 829
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>初认Vue</title> <!--引用vue--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> ...
vue-component_day04_03.zip
07-02
本教程将深入探讨在“vue-component_day04_03”项目中，如何拆分静态组件并实现它们在页面加载时的正确初始化显示。 首先，让我们了解组件的基本概念。在Vue中，组件可以看作是自包含的独立单元，具有自己的视图和...
vue-component_day04_04_交互添加.zip
03-13
在"vue-component_day04_04_交互添加.zip"这个资源中，我们可以推测这是关于Vue组件交互性增强的一个教程，特别是针对第四天课程的第四个主题。在这个阶段，你可能将学习如何在Vue应用中添加用户交互功能，如事件...
vue-component_day04_02_静态页面拆分.zip
03-12
"vue-component_day04_02_静态页面拆分.zip"这个压缩包文件显然与Vue组件的拆分有关，特别是针对静态页面的拆分。在这个教程或者项目中，我们将探讨如何将一个大的静态HTML页面拆分为多个独立的Vue组件，以提高代码...
Day04_vue组件_组件通信_todo案例(1).pdf
05-03
Vue 组件和组件通信 在本节中，我们将学习 Vue 组件的概念和作用，并了解如何封装组件和实现组件之间的通信。同时，我们还将通过一个 Todo 案例来了解组件的实践应用。 一、Vue 组件概念和作用 在 Vue 中，组件...
Day02_vue脚手架_基础API(1).pdf
05-03
Vue.js 是一个流行的渐进式JavaScript框架，它旨在让开发者能以更少的代码实现更多的功能，提升开发效率。Vue的核心库专注于视图层，易于上手，同时也能与现有库或项目无缝集成。它的设计理念使得它在构建用户界面时...
启动Application 报错：no mapping for GET /（已解决）
qq_3512323979的博客
08-26 2886
no mapping for GET /因为我使用的是框架嘛，然后生成了一个SpringBoot项目后，resources下面就会有一个static的类，用于存放静态资源类，后面我把静态资源放在里面，但是启动启动类后，报错一直匹配不到。： 正常的话，我们使用SpringBoot框架，他会给我们提供许多便利，包括静态资源的自动服务，默认的话，他会去。报这个错可能还有其他原因，我的是因为这个，大家可以根据日志信息一步步检查，肯定可以解决的！类并覆盖其方法时，就会失去静态资源的自动服务
[C++规范] 访问类成员变量的方式：直接访问还是通过成员函数访问？
Loewen丶的小窝
08-26 2783
在面向对象编程（OOP）中，通过成员函数（如`ME_HardwareTypeEnum Type() const;` 和 `int Id() const;`）来访问类的私有或受保护成员（如`m_hardwareType` 和 `m_id`），而不是直接通过公共成员访问，是一种更好的做法。
《深入理解 Java 中的适配器模式》
最新发布
面团到油条的成长日记
08-29 1408
在软件开发的广阔领域中，不同接口之间不匹配的问题时常像个棘手的难题困扰着开发者。而适配器模式就像是一位得力的助手，专门用来解决这类问题。它的关键作用在于把一个类的接口有效地转化为客户端所期望的另一种接口，让原本因接口不相符而不能一起工作的两个类可以共同协作，学习本文希望你能有所收获
linux上datax 安装以及使用
寂夜了无痕的博客
08-24 3271
linux上datax 安装以及使用
vue打卡日历_vue 日历签到
05-19
Vue可以通过使用第三方组件库或自己编写组件来实现日历签到功能。 1. 使用第三方组件库 例如，使用Element UI中的DatePicker组件，可以实现选择日期的功能。在选中日期后，可以将签到状态保存到后端数据库中，再在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值