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: valueaddNum: 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-for1.循环获取数据的内容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;}

CGB2103-day06相关推荐

js中while死循环语句_Java系列教程day06——循环语句
day06--循环语句提纲: 1.循环结构 2.while循环 3.do-while循环 4.for循环 5.break语句 6.continue语句 7.循环嵌套 8.作业一.循环结构 1.1 ...
Python菜鸟入门：day06元组与字典
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) 传送门: day01基础知识 day02知识分类 day03 ...
day06【后台】两套分配
day06[后台]两套分配 1.权限控制权限控制机制的本质就是"用钥匙开锁" 2.给Admin分配Role 2.1.思路通过页面操作把 Admin 和 Role 之间的关联关系 ...
PYTHON1.day06
day05回顾循环语句 for 语句 for 变量列表 in 可迭代对象: 语句块1 else: 语句块2 ...
Python自动化开发课堂笔记【Day06】 - Python基础（模块）
正则模块常用正则表达式列表(盗图一张:-P) 1 import re 2 3 print(re.findall('\w','abc123d_ef * | - =')) 4 print(re.find ...
day06 Elasticsearch搜索引擎2
day06 Elasticsearch搜索引擎2 1.DSL查询文档 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL(Domain Specific Language)来 ...
PAT甲级刷题记录-(AcWing)-(Day06树 8题)
PAT甲级刷题记录-(AcWing)-(Day06树 8题) 课程来源AcWing 其中AcWing中的题目为翻译好的中文题目今日刷题列表 1110 Complete Binary Tree 111 ...
day06数组-一维数组二维数组
数组: 数组到底是什么呢?有什么特点呢?通过上面的分析:我们可以得到如下两句话: 1.数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. ...
C语言学习基础(day06)(达内)
day06 while 循环和 do 循环 . 缓冲区 . 一维数每日英语: index:索引号,偏移量 array:数组 size:大小回顾: 1. 数据类型转换隐式转换:小转大,有转无,整转 ...
Python学校Day06
Python学习Day06 列表的加法和乘法 >>> #列表的加法 >>> s = [1,2,3] >>> t = [4,5,6] >> ...

CGB2103-day06