CGB2105-Day05
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"><</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">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token generics"><span class="token punctuation"><</span>h1<span class="token punctuation">></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"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></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"><</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">></span> <span class="token operator"><</span>div v<span class="token operator">-</span>html<span class="token operator">=</span><span class="token string">"h3Html"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>div v<span class="token operator">-</span>pre<span class="token operator">></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"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>div v<span class="token operator">-</span>once<span class="token operator">></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"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></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">"<h3>我需要html渲染</h3>"</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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></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"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></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"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></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">></span> <span class="token generics"><span class="token punctuation"><</span>h3<span class="token punctuation">></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"><</span><span class="token operator">/</span>h3<span class="token operator">></span><span class="token generics"><span class="token punctuation"><</span>br<span class="token punctuation">></span></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator"><</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">></span> <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</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">></span> <span class="token operator"><</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"addNum"</span><span class="token operator">></span>计算<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></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"><</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span> <span class="token operator"><</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">></span> 数值<span class="token number">1</span><span class="token operator">:</span> <span class="token operator"><</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">></span><span class="token generics"><span class="token punctuation"><</span>br<span class="token punctuation">></span></span> 数值<span class="token number">2</span><span class="token operator">:</span> <span class="token operator"><</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">></span><span class="token generics"><span class="token punctuation"><</span>br<span class="token punctuation">></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"><</span>br<span class="token punctuation">></span></span> <span class="token operator"><</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"addNum"</span><span class="token operator">></span>计算<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></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"><</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span> <span class="token operator"><</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">></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"><</span>div <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"num++"</span><span class="token operator">></span> 嵌套结构 <span class="token operator"><</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">></span>计算<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></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"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></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"><</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">></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