step03day05学习笔记_定义id名为num1和num2两个文本输入框-CSDN博客

#1.Vue JS

###1.9.2 阻止默认行为 .prevent

#1.Vue JS

##1.1何为Vue.js

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

##1.2 vue的特点

易用:在学习完html和js的一些简单语法后，就可以使用vue

灵活::灵活使用,具有弹性

高效:虚拟DOM,预编译

##1.3 vue基本语法

1，导入和创建对象

	<!-- 入门案例步骤:
				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 特点:没有作用域
					*java有作用域,在一个方法中不能调用另一个方法中的元素
					* */
					const APP=new Vue({
						//1.指定区域
						el:"#app",
						//2。定义属性
						data:{
							//key:value
							msg:"您好 VUE"
						}
					})

2.v-text v-once v-html v-pre的语法


	<!--1.V-text指令:如果页面没有渲染完成,页面不会显示-->
        <!-- 特点：如果页面没有渲染完成，则直接展现给用户
						插值表达式需要直接显示
					注意事项:只有显示时采用,输入操作不可使用-->
	<h2 v-text="msg"></h2>

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

##1.4 MVVM设计思想

知识回顾MvC

MVVM思想说明：

M：Model 封装的数据.数据层

V：view 视图的展示视图层

VM ：viewModel 数据视图的控制层控制数据流转

MVVM设计思想是前端模拟后端的一种耦合结构

##1.5 双向数据绑定原理

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

##1.6 事件绑定

语法:

	v-on:click="函数/直接进行计算"
   //事件绑定可以有简写写法,具体如下
    <!--如果没有参数 ()可以省略 -->
	<!--<button @click="addNum()"></button>  -->
	<button @click="addNum">计算</button>

具体案例:

<div id="app">
			<!-- 需求：实现数据自增操作
			 语法：V-on：click="函数/直接计算"
			 简化语法 v-on:可以简化为@-->
			<h3>数值：{{num}}</h3><br/>
			<button v-on:click="num++">自增</button>
			<button @click="num--">自减</button>
		</div>
<script src="../vue.js"></script>
		
		<script>
			const App=new Vue({
				el:"#app",
				data:{
					num:100
				}
			})
		</script>

##1.7 按键触发机制

语法:

<!--             语法:	
					1.v-on:keydown="" 按下触发
					2.v-on:keyup=""   弹起来触发
					3.v-on:keypress="" 小键盘触发
				 按键支持:
					.enter  .tab
					.delete (捕获“删除”和“退格”键)
					.esc   .space
					.up .down .left .right       -->

具体案例

		<div id="app">
			<!--需求： 用户通过特殊的键位 输入对应的值
				要求1：按钮实现加法操作
				要求2：用户按回车按钮实现触发
				-->
            <h3>用户属性:{{num}}</h3></br>
			<input type="text" v-model="num2"  v-on:keyup.space="addNum"/>
			<button @click="addNum">计算</button>
        </div>
		<script src="../vue.js"></script>
		<script>
			const App=new Vue({
				el:"#app",
				data:{
					num:100,
					num2:0
				},
				methods:{
					addNum(){
						this.num+=parseInt(this.num2)
					}
				}
			})
		</script>

##1.8 计算器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器作业</title>
	</head>
	<body>
		<div id="app">
			<!--要求
				1.准备两个文本输入框num1/num2
				2.要求准备一个按钮"计算" 当点击按钮时实现
				count=num+num2
				将得到的结果通过总数输出count
				3.当输入num2时可以通过回车按键 计算.-->
			<h1>计算器小测试:{{count}}</h1></br>
			<input type="text" v-model="num" />+
			<input type="text" v-model="num2" v-on:keyup.enter="addNum()"/>
			=<input type="text" v-model="count" />
			<button @click="addNum()">计算</button><br>
			<input type="text" v-model="num" />*
			<input type="text" v-model="num2" v-on:keyup.enter="pluNum()"/>
			=<input type="text" v-model="count" />
			<button @click="addNum()">计算</button><br>
			
		</div>
		<script src="../vue.js"></script>
		<script>
			const App=new Vue({
				el:"#app",
				data:{
					num:0,num01:0,
					num2:0,num02:0,
					count:0,count2:0
				},
				methods:{
					addNum(){
						this.count=parseInt(this.num)+parseInt(this.num2)
					},
					pluNum(){
						this.count2=parseInt(this.num01)*parseInt(this.num02)
					}
				}
			})
		</script>
	</body>
</html>

##1.9 按键修饰符

###1.9.1 阻止冒泡 .stop

<div id="app">
			<!-- 难点: 元素可能需要嵌套,事件可能嵌套
				 说明: 如果事件嵌套则必然带来事件的冒泡.
				 解决方案: 阻止事件冒泡  .stop属性
			 -->
			数值: {{num}}
			<div @click="num++">
				嵌套结构
				<button @click.stop="num++">计算</button>
			</div>

###1.9.2 阻止默认行为 .prevent

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

#2.SpringMVC前端交互复习

##2.1servelt

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

##2.2 servelt获取参数规则???

 /**
     * 注意事项: 如果后端服务器没有匹配的方法,也会报跨域错误.
     * 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;
    }



    /*@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;
    }*/

##2.3对象方式

###2.3.1 页面对象封装

#2.3.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;
    }