VUE介绍以及入门案例

已于 2024-03-11 10:32:09 修改
阅读量95 收藏
点赞数
分类专栏： 三阶段转载笔记 文章标签： java
于 2021-09-28 23:05:52 首次发布
原文链接：https://blog.csdn.net/qq_16804847/article/details/119137377
版权

CGB2105-Day05

2021-07-27 11:01:57 3816 收藏 19
分类专栏： 2105 文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/qq_16804847/article/details/119137377
版权
2105 专栏收录该内容
17 篇文章 26 订阅
订阅专栏

1. Vue JS

1.1 VUE介绍

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

1.2 VUE组件说明

在这里插入图片描述

1.3 VUE基本语法

1.3.1 入门案例

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

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

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

1.4 数据显示

命令: v-text/v-html/v-once/v-pre 指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<!-- 特点: 如果页面没有渲染完成,则直接展现给用户
					   插值表达式需要直接显示
				 注意事项:  只有显示时采用,输入操作不可使用
				 1.v-text指令: 如果页面没有渲染完成,则不显示信息
			 -->
			 {{msg}}
			<h1 v-text="msg"></h1>

		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span>v<span class="token operator">-</span>html 直接渲染html标签 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span>html<span class="token operator">=</span><span class="token string">"h3Html"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">3.</span>v<span class="token operator">-</span>pre  跳过预编译 显示标签体本身 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span>pre<span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>msg<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">4.</span>v<span class="token operator">-</span>once 只渲染一次 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span>once<span class="token operator">&gt;</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>once<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		
		
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>  <span class="token operator">--</span><span class="token operator">&gt;</span>	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>导入JS文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">3.</span>创建VUE对象 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				msg<span class="token operator">:</span> <span class="token string">"您好VUE"</span><span class="token punctuation">,</span>
				h3Html<span class="token operator">:</span> <span class="token string">"&lt;h3&gt;我需要html渲染&lt;/h3&gt;"</span><span class="token punctuation">,</span>
				once<span class="token operator">:</span> <span class="token string">"我只能被渲染一次"</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

1.5 双向数据绑定

1.5.1 双向数据绑定代码

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

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

	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>导入JS文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">3.</span>创建VUE对象 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				msg<span class="token operator">:</span> <span class="token string">"数据随时修改"</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

1.5.2 MVVM设计思想

知识回顾: MVC模式 核心思想 减少代码的耦合性
M Model:封装的数据
V View 视图层: 数据的展现
C Contro 控制层 程序的流转的过程
衍生: 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 事件绑定

语法:

	v-on:click="函数/直接进行计算"

 
 

 
 
  • 1

具体代码:

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

	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>导入JS文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">3.</span>创建VUE对象 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				msg<span class="token operator">:</span> <span class="token string">"数据随时修改"</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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

			 需求<span class="token operator">:</span>用户通过输入 按特殊的键位触发函数 
			 要求<span class="token number">1.</span> 按钮实现加法操作 num <span class="token operator">=</span> num <span class="token operator">+</span> num2
			 要求<span class="token number">2.</span> 用户按回车按钮实现触发 
			 要求<span class="token number">3.</span> 用户按空格键实现触发 
		<span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>用户数据<span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>num<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> v<span class="token operator">-</span>on<span class="token operator">:</span>keyup<span class="token punctuation">.</span>enter<span class="token operator">=</span><span class="token string">"addNum"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"num2"</span> <span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> v<span class="token operator">-</span>on<span class="token operator">:</span>keyup<span class="token punctuation">.</span>space<span class="token operator">=</span><span class="token string">"addNum"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"num2"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"addNum"</span><span class="token operator">&gt;</span>计算<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		
		
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				num<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
				num2<span class="token operator">:</span> <span class="token number">0</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token function">addNum</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token comment">//this.num = this.num + this.num2</span>
					<span class="token comment">//将字符串转化为数值类型</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token operator">+=</span>   <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>num2<span class="token punctuation">)</span> 
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

1.8 计算器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器案例</title>
	</head>
	<body>

	<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 要求
			<span class="token number">1.</span>准备两个文本输入框 num1<span class="token operator">/</span>num2
			<span class="token number">2.</span>要求准备一个按钮 <span class="token string">"计算"</span> 当点击按钮时实现
			  count<span class="token operator">=</span>num1<span class="token operator">+</span>num2
			  将得到的结果通过 总数输出count
			<span class="token number">3.</span>当输入num2时可以通过回车按键 计算<span class="token punctuation">.</span>
			注意事项<span class="token operator">:</span> input框默认是字符串
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		 
		 数值<span class="token number">1</span><span class="token operator">:</span> <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"num1"</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		 数值<span class="token number">2</span><span class="token operator">:</span> <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"num2"</span> 
			<span class="token annotation punctuation">@keyup.enter</span><span class="token operator">=</span><span class="token string">"addNum"</span>
		 <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		 总数<span class="token operator">:</span>  <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>count<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		 <span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"addNum"</span><span class="token operator">&gt;</span>计算<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				num1<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
				num2<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
				count<span class="token operator">:</span> <span class="token number">0</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token function">addNum</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">=</span> 
						<span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>num1<span class="token punctuation">)</span> <span class="token operator">+</span>  <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>num2<span class="token punctuation">)</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

1.9 按键修饰符

1.9.1 阻止冒泡 .stop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>

	<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 难点<span class="token operator">:</span> 元素可能需要嵌套<span class="token punctuation">,</span>事件可能嵌套
			 说明<span class="token operator">:</span> 如果事件嵌套则必然带来事件的冒泡<span class="token punctuation">.</span>
			 解决方案<span class="token operator">:</span> 阻止事件冒泡  <span class="token punctuation">.</span>stop属性
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		数值<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>num<span class="token punctuation">}</span><span class="token punctuation">}</span>
		<span class="token operator">&lt;</span>div <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"num++"</span><span class="token operator">&gt;</span>
			嵌套结构
			<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click.stop</span><span class="token operator">=</span><span class="token string">"num++"</span><span class="token operator">&gt;</span>计算<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				num<span class="token operator">:</span> <span class="token number">0</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

1.9.2 阻止默认行为 .prevent

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

		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 用途<span class="token operator">:</span> prevent阻止页面跳转  a标签<span class="token operator">/</span>form表单 action同步请求 <span class="token operator">--</span><span class="token operator">&gt;</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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 Servlet获取参数规则

 /**
     * 注意事项: 如果后端服务器没有匹配的方法,也会报跨域错误.
     * URL:http://localhost:8090/getUserById?id=1&age=18
     * 参数: id=1
     * 返回值: User对象
     * servlet特点:
     *  1.获取的数据都是String类型
     */
    @GetMapping("/getUserById")
    public User getUserById(Integer id){
       //1.SpringMVC框架通过Servlet中request对象,根据参数名称获取值
        // String id = request.getParameter("age");
        //2.SpringMVC根据已知的数据类型 自动的实现数据转化
        return null;
    }

<span class="token comment">/*@GetMapping("/getUserById")
public User getUserById(HttpServletRequest request,
                        HttpServletResponse response){
    //1.参数获取 每个参数都需要手动获取
    String id = request.getParameter("id");
    String age = request.getParameter("age");

    //2.数据类型转化
    int intId = Integer.parseInt(id);
    System.out.println("根据ID查询数据库~~~~~");

    return null;
}*/</span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

2.1 对象方式

2.1.1 页面对象封装

在这里插入图片描述

2.1.2 后端参数接收问题

 /**
     * URL: http://localhost:8090/getUserByUser
     * 参数: user对象的数据
     * 返回值: User
     */
    @GetMapping("/getUserByUser")
    public User getUserByUser(User user){
        //1.SpringMVC如果解析到参数是对象 先获取其中的Get方法
        // getId()/getName()......
        //2.将方法get去除首字母小写~~~id1111/name/age/sex
        //3.实例化一个User对象之后调用setxxx()方法实现赋值
        //4.最终方法中获取一个实例化的User对象
        //String id = request.getParameter("id");
        return user;
    }

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
程序员 阿酷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue小案例（一）
SAKURAjinx的博客
10-18 561
那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。6、计算总分、平均分。
VUE框架 详解入门
热门推荐
晴天的博客
03-19 2万+
vue框架快速入门到实操
Vue-详解+案例，你赶紧学会吧
最新发布
2401_84139924的博客
04-11 826
大家好！一起看下Vue.js 吧！提示：以下是本篇文章正文内容，下面案例可供参考一、vue是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。二、使用步骤1.声明和渲染代码如下（第一个vue应用）：el元素命中的内部建议使用id选择器 其他类 标签 选择器也可以。
Vue 实例
顺其自然~专栏
09-27 5881
创建一个 Vue 实例 每个 Vue 应用都是通过用Vue函数创建一个新的Vue 实例开始的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。 当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在API 文档中浏览完整的选项列表。 ...
vue框架快速入门
Java学不会的博客
05-06 1796
MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。
vue项目案例（Vue3）
u013083465的专栏
05-30 7586
VUE3 + vite 案例
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1572
一文带你从HelloWorld认识Vue框架，深刻理解！
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
Vue全家桶入门案例
01-24
Vue全家桶入门案例,
SpringBoot+Vue的实战入门案例
08-02
SpringBoot+Vue的实战入门案例
vue入门级案例
06-12
vue全家桶入门，购物车案例，属于入门级，资源齐全可参考
vue实战案例
11-23
vue实战案例,仿商城，很适合新手学习的例子。 大家一起进步，加油
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
Vue简单入门及案例
qq_54605990的博客
04-27 1771
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 8371
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
用vue做一个静态网页包含注册登陆首页详情页（仅用于学习参考）
m0_68913934的博客
05-14 1679
组件设置为Vue实例的模板，这样就可以根据当前URL的不同，自动渲染对应的组件了。最后，需要将各个组件、路由和Vue实例导出，在浏览器中打开。在Vue实例中，我们将。
Vue 框架入门介绍
qq_40120946的博客
05-02 917
前端时间工作任务没有那么忙，在技术总监沟通中他认为我自己花点时间做技术扩展，由于项目中用到前端部分功能，框架用的是Vue，本身项目中和前端同时接触比较多，而且公司有现成的项目可以供我去练习，所以决定去花时间去学习VUE框架。目前，主要是浏览介绍和学习极客时间上唐金州老师。接下来主要从三个点来谈谈自己初步了解Vue框架的心得。
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 4485
Vue 入门基础篇
webRTC vue案例
04-05
作为AI助手，我需要先声明一下：WebRTC技术是一种实时通信的技术，用于浏览器之间的音视频通话、屏幕共享等场景。而Vue是一种前端框架，用于构建用户界面。 因此，WebRTC和Vue并不是一种直接相关的技术，但是可以通过Vue来构建WebRTC应用的用户界面。 下面是一个简单的WebRTC Vue案例： 1. 安装Vue和WebRTC相关的库 ``` npm install vue webrtc-adapter vue-webrtc ``` 2. 在Vue组件中引入WebRTC组件 ```html <template> <div> <video ref="localVideo" autoplay muted></video> <video ref="remoteVideo" autoplay></video> <button @click="startCall">Start Call</button> <button @click="endCall">End Call</button> </div> </template> <script> import VueWebRTC from 'vue-webrtc' export default { name: 'WebRTCComponent', components: { VueWebRTC }, data () { return { localStream: null, remoteStream: null, isCalling: false } }, methods: { async startCall () { this.isCalling = true this.localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }) this.$refs.localVideo.srcObject = this.localStream const rtcPeerConnection = new RTCPeerConnection({ iceServers: [ { urls: 'stun:stun.stunprotocol.org' } ] }) this.localStream.getTracks().forEach(track => rtcPeerConnection.addTrack(track, this.localStream)) rtcPeerConnection.addEventListener('icecandidate', event => { if (event.candidate) { // send ice candidate to remote peer } }) rtcPeerConnection.addEventListener('track', event => { this.remoteStream = event.streams[0] this.$refs.remoteVideo.srcObject = this.remoteStream }) // create offer and set local description const offer = await rtcPeerConnection.createOffer() await rtcPeerConnection.setLocalDescription(offer) // send offer to remote peer }, endCall () { // close peer connection and release stream resources this.isCalling = false this.localStream.getTracks().forEach(track => track.stop()) this.remoteStream.getTracks().forEach(track => track.stop()) const rtcPeerConnection = this.$refs.vueWebRTC.rtcPeerConnection if (rtcPeerConnection) { rtcPeerConnection.close() } } } } </script> ``` 3. 在Vue实例中使用WebRTC组件 ```js import Vue from 'vue' import WebRTCComponent from './WebRTCComponent.vue' new Vue({ el: '#app', components: { WebRTCComponent }, template: '<WebRTCComponent/>' }) ``` 在这个案例中，我们使用了vue-webrtc组件来简化WebRTC的使用。具体来说，我们在startCall方法中使用getUserMedia获取本地音视频流，创建RTCPeerConnection实例，并将本地流添加到peer connection中。然后，我们使用createOffer方法创建一个offer并将其设置为本地的SDP（Session Description Protocol）。最后，我们将offer发送给远程peer，并等待远程peer的answer。在answer到达之后，我们将其设置为远程SDP，并完成peer connection的建立。 需要注意的是，在实际应用中，我们需要处理各种事件，例如网络中断、peer connection失败等等。同时，我们还需要考虑如何安全地传输音视频流以及如何支持多人通话等场景。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值