CGB2103-day06

1.安装VUE脚手架2 课堂案例练习2.1 事件操作<!DOCTYPE html><html><head><meta charset="utf-8"><title>VUE中事件学习</title></head><body><div id="app"><h1 v-text="num"&g

闪耀太阳

5903人浏览 · 2021-06-02 12:02:22

闪耀太阳 · 2021-06-02 12:02:22 发布

1.安装VUE脚手架

在这里插入图片描述

2 课堂案例练习

2.1 事件操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE中事件学习</title>
	</head>
	<body>
		<div id="app">
			<h1 v-text="num"></h1>
			<br>
			<button v-on:click="num++">自增</button>
			<!-- 简化操作 -->
			<button @click="num++">自增</button>
			<!-- VUE中调用函数方法 -->
			<button @click="addNum">方法自增</button>
			<button @click="addNum2">方法自增</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 1
				},
				methods: {
					//key: value
					addNum: function(){
						this.num++
					},
					//方法的简化操作
					addNum2(){
						this.num = this.num + 2
						//this.num += 2
					} 
				}
			})
		</script>
	</body>
</html>

2.2 按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
		<div id="app">
			
			<!-- 事件冒泡:
				如果事件有嵌套关系, 执行完成内部事件之后,执行
				外部事件.这种现象称之为事件冒泡.
				
				1.阻止事件冒泡:
				语法:
					1.v-on:click.stop="xxx"
					2.@click.stop
			 -->
			<div @click="addNum2">
				<h3>{{num}}</h3>
				<button @click.stop="addNum">增1</button>
			</div>
			
			<hr />
			<!-- 2.阻止默认行为 
				如果需要阻止标签的默认的行为 则添加 @click.prevent
			 -->
			<div>
				<h3>阻止默认行为</h3>
				<a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
			</div>
			
			<hr />
			
			<div>
				<h3>特殊按键字符说明</h3>
				<!-- 
					需求:要求用户按回车键出发 事件函数 
					.enter   .tab .delete (捕获“删除”和“退格”键)
					.esc   .space  .up  .down .left  .right
				-->
				回车键触发: <input  name="username" type="text" 
				v-on:keyup.enter="handler"/>  <br>
				删除键触发: <input  name="age" type="text"
				v-on:keyup.delete="handler"/> <br>
				space键触发: <input  name="sex" type="text"
				@keyup.space="handler"/>  <br>
				<!-- tab有效 使用keydown操作 -->
				tab键触发: <input  name="sex" type="text"
				@keydown.tab="handler"/>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 1
				},
				methods: {
					addNum(){
						this.num++
					},
					addNum2(){
						this.num = this.num + 2
					},
					baidu(){
						console.log("点击百度的按钮")
					},
					handler(){
						console.log("函数被执行")
					}
				}
			})
		</script>
	</body>
</html>

2.3 计算器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器练习</title>
	</head>
	<body>
		<div id="app">
			<!-- 要求:输入完B之后,回车键触发计算 加法操作 -->
			数据A: <input type="text" v-model="num1" />
			数据B: <input type="text" v-model="num2" 
			@keyup.enter="addNum"/>
			总数:  <span v-text="count"></span>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num1: '',
					num2: '',
					count: ''
				},
				methods: {
					addNum(){
						//parseInt() 将字符串转化为数值
						this.count = 
							parseInt(this.num1) + parseInt(this.num2) 
					}
				}
			})
		</script>
	</body>
</html>

2.4 属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定案例</title>
		
		<!-- 定义样式 -->
		<style>
			.red {
				background-color: chocolate;
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>v-bind学习</h3>
			<!-- 1.入门案例 -->
			<a href="http://www.baidu.com">百度</a><br>
			<!-- 属性绑定语法  -->
			<a v-bind:href="url">百度-vue1</a><br>
			<!-- 简化操作  -->
			<a :href="url">百度-vue2</a>
			
			<hr />
			
			<h3>类型绑定</h3>
			<!-- 需求: 控制red是否展现 -->
			<div class="red">aaaaaa</div>
			<!-- vue的语法: {red类型名称: 布尔类型数据}
				 {red: true} red样式展现
				 {red: false} red样式不展现
			 -->
			<div :class="{red: flag}">bbbbb</div>
			<!-- 在vue中可以进行简单的数据计算 -->
			<button @click="flag = !flag">切换</button>
			
			<!-- 小结:  v-on 事件处理 函数定义
						v-bind 事件绑定 class style
			 -->
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					flag: true
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

2.5 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 分支语法说明
				v-if 如果条件为真,则展现数据
				v-else-if  if与else中间的判断
				v-else  一般与v-if同时出现 v-else不能单独出现		 		 
			 -->	
			<h1>根据分数评级</h1>
			用户考试成绩: <input type="text" v-model="score"/><br>
			等级:
				<!-- 如果从多个数据中挑选一个时 使用v-if判断 -->
				<span v-if="score>=90">优秀</span>  
				<span v-else-if="score>=80">良</span>
				<span v-else-if="score>=70">中</span>
				<span v-else-if="score>=60">及格</span>
				<span v-else>不及格</span>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					score: 0
				},
				methods: {
				}
			})
		</script>
	</body>
</html>

2.6 循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- vue中的循环 v-for
				1.循环获取数据的内容
				2.可以循环复制标签
				参数说明:
					item: 变量名称  名称任意
					in:	  关键字   固定写法
					array: 要遍历的数据
			 -->
			<h1 v-for="item in array">{{item}}</h1>
			
			<hr />
			<!-- v-for语法2:  获取数据/下标  -->
			<h1 v-for="(item,index) in array">{{item}}++++++{{index}}</h1>
			
			<hr />
			<!-- 循环遍历集合信息 -->
			<div v-for="item in userList">
				<p>ID号:{{item.id}}</p>
				<p>名称:{{item.name}}</p>
			</div>
			<hr />
			<!-- 如果直接遍历对象,则输出的value值 
				参数说明:  1.value 对象的值   2.对象的key  3.数据的下标
			-->
			<div v-for="(value,key,index) in user">
					<span v-text="key"></span>
					---
					<span v-text="value"></span>
					---
					<span v-text="index"></span>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: ["安琪拉","孙悟空","诸葛亮"],
					userList: [{
						id: 100,
						name: "鲁班七号"
					},{
						id: 200,
						name: "铠"
					},{
						id: 300,
						name: "瑶"
					}],
					//定义user对象
					user: {
						id: 200,
						name: "貂蝉",
						age: 18
					}
				},
				methods: {
				}
			})
		</script>
	</body>
</html>

2.7 表单数据提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.定义表单 练习form标签与vue对象形成数据绑定-->
			<form action="http://www.baidu.com">
				用户名: <input type="text" v-model="user.username"/><br>
				用户详情: <textarea v-model="user.info"></textarea><br>
				
				<!-- 定义下拉框 -->
				<select name="book" v-model="user.book">
					<option value="java编程思想">java编程思想</option>
					<option value="java疯狂讲义">java疯狂讲义</option>
					<option value="java技术卷">java技术卷</option>
				</select><br>
				
				<!-- 单选框练习 name名称相同 -->
				性别: <input type="radio" value="男" name="gender" 
						v-model="user.gender"/> 男
					  <input type="radio" value="女" name="gender"
						v-model="user.gender"/> 女
				<br>
				<!-- 多选框练习 值有多个 数组接收 -->
				爱好: 
					<input  type="checkbox" name="hobby" value="吃"
						v-model="user.hobby"/>吃
					<input  type="checkbox" name="hobby" value="喝"
					    v-model="user.hobby" />喝
				
				<!-- 阻止标签的默认行为 采用其他方式提交 -->
				<input type="submit" value="提交" @click.prevent="addForm"/>
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					user: {
						username: '',
						info: '',
						book: 'java技术卷',
						gender: '女',
						hobby:	["吃"]
					}
				},
				methods: {
					addForm(){
						console.log("input标签:"+this.user.username)
						console.log("文本域标签:"+this.user.info)
					}
				}
			})
		</script>
	</body>
</html>

3.知识点串讲

3.1 this关键字

JS中的this与java中的this不要对比. 各自管理各自的.
VUE中的语法规范,先记忆会使用.this代表当前的Vue对象.

3.2 框架分工

1.SpringBoot 框架的框架(框架的工具API)
2.SpringMVC 负责实现前后端交互的框架 1.接收用户请求参数,2.响应用户服务器数据.
3.Spring 整合其他的主流框架,使得程序调用浑然一体.
4.Mybatis 实现数据持久化操作的.
在这里插入图片描述

3.3 VUE执行顺序

加载vue.js 将VUE中的API导入浏览器内存中.(先声明)
实例化VUE对象
el: “#app”, 告知VUE对象操作的页面元素是谁 (定义)
data: 解析data关键字将数据导入vue对象 (实例化对象)
将含有插值表达式的操作进行渲染. (vue对象开始工作)

3.4 关于servlet说明

3.4.1 servlet介绍

Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，用Java编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互式地浏览和生成数据，生成动态Web内容。
记录: servlet是java专门针对用户请求而开发的一套传输机制.

3.4.2 核心对象

  /**
     * URL: http://localhost:8090/servlet?id=100&name=tomcat
     * @return
     * request: 用户提交请求时的请求头信息.
     * response: 服务器响应用户的数据封装的对象
     */
    @RequestMapping("/servlet")
    public String servlet(HttpServletRequest request, HttpServletResponse response){
        //servlet动态接收参数 所有的数据都是String数据类型
        String id = request.getParameter("id");
        int idInt = Integer.parseInt(id);
        String name = request.getParameter("name");
        //SpringMVC将上述的操作封装
        return null;
    }
    @RequestMapping("/servlet")
    public String servlet(Integer id,String name){

        return null;
    }