【java学习之路】(javaWeb篇)008.VUE
1. 学习目标
- 了解什么是框架
- 了解什么是Vue
- 掌握Vue的基本语法
- 了解Vue的生命周期
2. 内容讲解
2.1 什么是框架
任何编程语言在最初的时候都是没有框架的,后来随着在实际开发过程中不断总结『经验』,积累『最佳实践』,慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。
于是有人把成熟的『固定解决方案』收集起来,整合在一起,就成了『框架』。
在使用框架的过程中,我们往往只需要告诉框架『做什么(声明)』,而不需要关心框架『怎么做(编程)』。
对于Java程序来说,我们使用框架就是导入那些封装了『固定解决方案』的jar包,然后通过『配置文件』告诉框架做什么,就能够大大简化编码,提高开发效率。我们使用过的junit其实就是一款单元测试框架。
而对于JavaScript程序来说,我们使用框架就是导入那些封装了『固定解决方案』的『js文件』,然后在框架的基础上编码。
用洗衣服来类比框架:
典型应用场景:洗衣服
输入数据:衣服、洗衣液、水
不使用框架:手洗
使用框架:使用洗衣机,对人来说,只需要按键,具体操作是洗衣机完成的。人只是告诉洗衣机做什么,具体的操作是洗衣机完成的。
实际开发中使用框架时,我们也主要是告诉框架要做什么,具体操作是框架完成的。
2.2 Vue的简介
2.2.1 Vue的作者介绍
在为AngularJS工作之后,Vue的作者尤雨溪开Vue.js。他声称自己的思路是提取Angular中自己喜欢的部分,构建出一款相当轻量的框架。
Vue最早发布于2014年2月。作者在Hacker News、Echo JS与 Reddit的JavaScript版块发布了最早的版本。一天之内,Vue 就登上了这三个网站的首页。
Vue是Github上最受欢迎的开源项目之一。同时,在JavaScript框架/函数库中, Vue所获得的星标数已超过React,并高于Backbone.js、Angular 2、jQuery等项目。
2.2.2 Vue的官网介绍
Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
**官网地址:**https://cn.vuejs.org/
2.3 准备Vue.js环境
Vue框架的js文件获取
官网提供的下载地址:https://cdn.jsdelivr.net/npm/vue/dist/vue.js
创建空vue.js文件,将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中
2.4 Vue的入门案例
创建工程,导入vue.js文件放入工程的js文件夹中
创建demo01.html(引入vuejs,定义div,创建vue实例)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue的入门</title><script src="../js/vue.js"></script></head><body><div id="app"><div>{{message}}</div></div><!--
使用vue获取div中的内容,以及设置div中的内容
使用vue的具体步骤:
1. 指定一个区域,在该区域中使用vue
2. 在该区域下方编写一个script标签,在script标签中创建Vue对象
3. 以json格式给Vue对象传入需要传入的参数
1. "el" 表示哪块区域可以使用vue
2. "data" 表示你需要定义的数据模型
4. 将message这个数据模型绑定给div的标签体: 使用插值表达式进行绑定
--><script>var vue = new Vue({"el":"#app","data":{"message":"hello vue" //定义了一个数据模型,该数据模型的名字叫"message"}});</script></body>
</html>
2.5 声明式渲染
2.5.1 概念
2.5.1.1 声明式
『声明式』是相对于『编程式』而言的。
- 声明式:告诉框架做什么,具体操作由框架完成
- 编程式:自己编写代码完成具体操作
2.5.1.2 渲染
上图含义解释:
- 蓝色方框:HTML标签
- 红色圆形:动态、尚未确定的数据
- 蓝色圆形:经过程序运算以后,计算得到的具体的,可以直接在页面上显示的数据、
- 渲染:程序计算动态数据得到具体数据的过程
2.5.2 案例讲解
HTML代码
<!-- 使用{{}}格式,指定要被渲染的数据 --><div id="app">{{message}}</div>
vue代码
// 1.创建一个JSON对象,作为new Vue时要使用的参数
var argumentJson = {// el用于指定Vue对象要关联的HTML元素。el就是element的缩写// 通过id属性值指定HTML元素时,语法格式是:#id"el":"#app",// data属性设置了Vue对象中保存的数据"data":{"message":"Hello Vue!"}
};// 2.创建Vue对象,传入上面准备好的参数
var app = new Vue(argumentJson);
2.5.3 查看声明式渲染的响应式效果
通过验证Vue对象的『响应式』效果,我们看到Vue对象和页面上的HTML标签确实是始终保持着关联的关系,同时看到Vue在背后确实是做了大量的工作。
2.6 绑定元素属性
2.6.1 基本语法
v-bind:HTML标签的原始属性名
2.6.2 案例代码
HTML代码
<div id="app"><!-- v-bind:value表示将value属性交给Vue来进行管理,也就是绑定到Vue对象 --><!-- vueValue是一个用来渲染属性值的表达式,相当于标签体中加{{}}的表达式 --><input type="text" v-bind:value="vueValue" /><!-- 同样的表达式,在标签体内通过{{}}告诉Vue这里需要渲染; --><!-- 在HTML标签的属性中,通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 --><p>{{vueValue}}</p>
</div>
Vue代码
// 创建Vue对象,挂载#app这个div标签
var app = new Vue({"el":"#app","data":{"vueValue":"太阳当空照"}
});
扩展:
v-bind:属性名="属性值"可以简写成 :属性名=“属性值”
2.7 双向数据绑定
2.7.1 提出问题
而使用了双向绑定后,就可以实现:页面上数据被修改后,Vue对象中的数据属性也跟着被修改。
2.7.2 案例代码
HTML代码
<div id="app"><!-- v-bind:属性名 效果是从Vue对象渲染到页面 --><!-- v-model:属性名 效果不仅是从Vue对象渲染到页面,而且能够在页面上数据修改后反向修改Vue对象中的数据属性 --><input type="text" v-model:value="vueValue" /><p>{{vueValue}}</p>
</div>
Vue代码
// 创建Vue对象,挂载#app这个div标签
var app = new Vue({"el":"#app","data":{"vueValue":"太阳当空照"}
});
页面效果
p标签内的数据能够和文本框中的数据实现同步修改:
扩展:
v-model:value=“值” 可以简写成 v-model=“值”
trim修饰符
实际开发中,要考虑到用户在输入数据时,有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素,要去掉。在v-model后面加上.trim修饰符即可实现。
<input type="text" v-model.trim="vueValue" />
Vue会帮助我们在文本框失去焦点时自动去除前后空格。
2.8 条件渲染
根据Vue对象中,数据属性的值来判断是否对HTML页面内容进行渲染。
2.8.1 v-if
HTML代码
<div id="app"><h3>if</h3><img v-if="flag" src="/pro03-vue/images/one.jpg" /><img v-if="!flag" src="/pro03-vue/images/two.jpg" />
</div>
Vue代码
var app = new Vue({"el":"#app","data":{"flag":true}
});
2.8.2 v-if和v-else
HTML代码
<div id="app02"><h3>if/else</h3><img v-if="flag" src="/pro03-vue/images/one.jpg" /><img v-else="flag" src="/pro03-vue/images/two.jpg" />
</div>
Vue代码
var app02 = new Vue({"el":"#app02","data":{"flag":true}
});
2.8.3 v-show
HTML代码
<div id="app03"><h3>v-show</h3><img v-show="flag" src="/pro03-vue/images/mi.jpg" />
</div>
Vue代码
var app03 = new Vue({"el":"#app03","data":{"flag":true}
});
2.9 列表渲染
2.9.1 迭代一个简单的数组
HTML代码
<div id="app01"><ul><!-- 使用v-for语法遍历数组 --><!-- v-for的值是语法格式是:引用数组元素的变量名 in Vue对象中的数组属性名 --><!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 --><li v-for="fruit in fruitList">{{fruit}}</li></ul>
</div>
Vue代码
var app01 = new Vue({"el":"#app01","data":{"fruitList": ["apple","banana","orange","grape","dragonfruit"]}
});
2.9.2 迭代一个对象数组
HTML代码
<div id="app"><table><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th></tr><tr v-for="employee in employeeList"><td>{{employee.empId}}</td><td>{{employee.empName}}</td><td>{{employee.empAge}}</td><td>{{employee.empSubject}}</td></tr></table>
</div>
Vue代码
var app = new Vue({"el":"#app","data":{"employeeList":[{"empId":11,"empName":"tom","empAge":111,"empSubject":"java"},{"empId":22,"empName":"jerry","empAge":222,"empSubject":"php"},{"empId":33,"empName":"bob","empAge":333,"empSubject":"python"}]}
});
2.10 事件驱动
2.10.1 案例一: 字符串顺序反转
HTML代码
<div id="app"><p>{{message}}</p><!-- v-on:事件类型="事件响应函数的函数名" --><button v-on:click="reverseMessage">Click me,reverse message</button>
</div>
Vue代码
var app = new Vue({"el":"#app","data":{"message":"Hello Vue!" },"methods":{"reverseMessage":function(){this.message = this.message.split("").reverse().join("");}}
});
2.10.2 案例二:获取鼠标移动时的坐标信息
HTML代码
<div id="app"><div id="area" v-on:mousemove="recordPosition"></div><p id="showPosition">{{position}}</p>
</div>
Vue代码
var app = new Vue({"el":"#app","data":{"position":"暂时没有获取到鼠标的位置信息"},"methods":{"recordPosition":function(event){this.position = event.clientX + " " + event.clientY;}}
});
扩展:
v-on:事件名="函数"可以简写成@事件名=“函数”
2.10.3 取消控件的默认行为
2.10.3.1 控件默认行为
- 点超链接会跳转页面
- 点表单提交按钮会提交表单
本来控件的默认行为是天经地义就该如此的,但是如果我们希望点击之后根据我们判断的结果再看是否要跳转,此时默认行为无脑跳转的做法就不符合我们的预期了。
2.10.3.2 取消方式
调用事件对象的**preventDefault()**方法。
超链接举例
HTML代码:
<a id="anchor" href="http://www.baidu.com">超链接</a>
JavaScript代码:
document.getElementById("anchor").onclick = function() {console.log("我点击了一个超链接");//event.preventDefault();
}
表单提交按钮举例
HTML代码:
<form action="http://www.baidu.com" method="post"><button id="submitBtn" type="submit">提交表单</button>
</form>
JavaScript代码:
document.getElementById("submitBtn").onclick = function() {console.log("我点击了一个表单提交按钮");event.preventDefault();
}
2.10.4 阻止事件冒泡
图中的两个div,他们的HTML标签是:
<div id="outterDiv"><div id="innerDiv"></div>
</div>
点击里面的div同时也等于点击了外层的div,此时如果两个div上都绑定了单击响应函数那么就都会被触发:
document.getElementById("outterDiv").onclick = function() {console.log("外层div的事件触发了");
}document.getElementById("innerDiv").onclick = function() {console.log("内层div的事件触发了");
}
所以事件冒泡就是一个事件会不断向父元素传递,直到window对象。
如果这不是我们想要的效果那么可以使用事件对象的stopPropagation()函数阻止。
document.getElementById("innerDiv").onclick = function() {console.log("内层div的事件触发了");event.stopPropagation();
}
2.10.5 Vue事件修饰符
对于事件修饰符,Vue官网的描述是:
在事件处理程序中调用
event.preventDefault()
或event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
2.10.5.1 取消控件的默认行为
控件的默认行为指的是:
- 点击超链接跳转页面
- 点击表单提交按钮提交表单
实现这个需求使用的Vue事件修饰符是:.prevent
<a href="http://www.baidu.com" @click.prevent="clickAnchor">超链接</a><form action="http://www.baidu.com" method="post"><button type="submit" @click.prevent="clickSubmitBtn">提交表单</button>
</form>
2.10.5.2 取消事件冒泡
实现这个需求使用的Vue事件修饰符是:.stop
<div id="outterDiv" @click="clickOutterDiv"><div id="innerDiv" @click.stop="clickInnerDiv"></div>
</div>
2.11 侦听属性
2.11.1 提出需求
<div id="app"><p>尊姓:{{firstName}}</p><p>大名:{{lastName}}</p>尊姓:<input type="text" v-model="firstName" /><br/>大名:<input type="text" v-model="lastName" /><br/><p>全名:{{fullName}}</p>
</div>
在上面代码的基础上,我们希望firstName或lastName属性发生变化时,修改fullName属性。此时需要对firstName或lastName属性进行『侦听』。
具体来说,所谓『侦听』就是对message属性进行监控,当firstName或lastName属性的值发生变化时,调用我们准备好的函数。
2.11.2 Vue代码
在watch属性中声明对firstName和lastName属性进行『侦听』的函数:
var app = new Vue({"el":"#app","data":{"firstName":"jim","lastName":"green","fullName":"jim green"},"watch":{"firstName":function(inputValue){this.fullName = inputValue + " " + this.lastName;},"lastName":function(inputValue){this.fullName = this.firstName + " " + inputValue;}}
});
2.12 案例练习
2.12.1 功能效果演示
- 第一步:显示表格
- 第二步:显示四个文本框
- 第三步:创建一个p标签用来显示用户在文本框中实时输入的内容
- 第四步:点击添加记录按钮实现记录的添加
2.12.3 第一步:显示表格
HTML标签
<div id="app"><table border="1" cellspacing="0" width="500px"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th><th>操作</th></tr><tr v-for="(user,index) in userList"><td>{{user.empId}}</td><td>{{user.empName}}</td><td>{{user.empAge}}</td><td>{{user.empSubject}}</td><td><button>删除</button></td></tr></table>
</div>
Vue代码
var vue = new Vue({"el":"#app","data":{"userList":[{"empId":11,"empName":"张三","empAge":20,"empSubject":"Java"},{"empId":22,"empName":"李四","empAge":21,"empSubject":"PHP"},{"empId":33,"empName":"王五","empAge":22,"empSubject":"C++"}]}
});
</script>
2.12.4 第二步:显示四个文本框
HTML标签
<div id="app"><table border="1" cellspacing="0" width="500px"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th><th>操作</th></tr><tr v-for="(user,index) in userList"><td>{{user.empId}}</td><td>{{user.empName}}</td><td>{{user.empAge}}</td><td>{{user.empSubject}}</td><td><button>删除</button></td></tr></table><form action="https://www.baidu.com" method="post">编号<input type="text" v-model="user.empId" name="empId"/><br/>姓名<input type="text" v-model="user.empName" name="empName"/><br/>年龄<input type="text" v-model="user.empAge" name="empAge"/><br/>专业<input type="text" v-model="user.empSubject" name="empSubject"/><br/><input type="submit" value="添加数据"/></form>
</div>
Vue代码
<script>var vue = new Vue({"el":"#app","data":{"user":{},"userList":[{"empId":11,"empName":"张三","empAge":20,"empSubject":"Java"},{"empId":22,"empName":"李四","empAge":21,"empSubject":"PHP"},{"empId":33,"empName":"王五","empAge":22,"empSubject":"C++"}]}});
</script>
测试是否正确的方式是:在控制台尝试修改Vue对象的数据属性值:
2.12.5 第四步:点击添加记录按钮
往表格中添加数据其实就是将表单上输入的数据this.user
加入到数组this.userList
中
添加完之后清空表单数据,其实就是设置this.user = {}
HTML标签
<div id="app"><table border="1" cellspacing="0" width="500px"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th><th>操作</th></tr><tr v-for="(user,index) in userList"><td>{{user.empId}}</td><td>{{user.empName}}</td><td>{{user.empAge}}</td><td>{{user.empSubject}}</td><td><button>删除</button></td></tr></table><form action="https://www.baidu.com" method="post">编号<input type="text" v-model="user.empId" name="empId"/><br/>姓名<input type="text" v-model="user.empName" name="empName"/><br/>年龄<input type="text" v-model="user.empAge" name="empAge"/><br/>专业<input type="text" v-model="user.empSubject" name="empSubject"/><br/><input type="submit" value="添加数据" @click.prevent="addUser"/></form>
</div>
Vue代码
<script>var vue = new Vue({"el":"#app","data":{"user":{},"userList":[{"empId":11,"empName":"张三","empAge":20,"empSubject":"Java"},{"empId":22,"empName":"李四","empAge":21,"empSubject":"PHP"},{"empId":33,"empName":"王五","empAge":22,"empSubject":"C++"}]},"methods":{addUser(){//1. 获取输入框中的用户信息 就是this.user//2. 将用户信息加入到数组中this.userList.push(this.user)//添加完要清空表单内容this.user = {}}}});
</script>
2.12.6 第五步: 点击每行的删除按钮删除该行数据
删除该行数据其实就是根据下标从数组this.userList
中移除元素
HTML代码
<div id="app"><table border="1" cellspacing="0" width="500px"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th><th>操作</th></tr><tr v-for="(user,index) in userList"><td>{{user.empId}}</td><td>{{user.empName}}</td><td>{{user.empAge}}</td><td>{{user.empSubject}}</td><td><button @click="deleteUser(index)">删除</button></td></tr></table><form action="https://www.baidu.com" method="post">编号<input type="text" v-model="user.empId" name="empId"/><br/>姓名<input type="text" v-model="user.empName" name="empName"/><br/>年龄<input type="text" v-model="user.empAge" name="empAge"/><br/>专业<input type="text" v-model="user.empSubject" name="empSubject"/><br/><input type="submit" value="添加数据" @click.prevent="addUser"/></form>
</div>
Vue代码
<script>var vue = new Vue({"el":"#app","data":{"user":{},"userList":[{"empId":11,"empName":"张三","empAge":20,"empSubject":"Java"},{"empId":22,"empName":"李四","empAge":21,"empSubject":"PHP"},{"empId":33,"empName":"王五","empAge":22,"empSubject":"C++"}]},"methods":{addUser(){//1. 获取输入框中的用户信息 就是this.user//2. 将用户信息加入到数组中this.userList.push(this.user)//添加完要清空表单内容this.user = {}},deleteUser(i){//删除其实是从数组中根据下标移除一个元素//splice(i,num)表示从下标为i的地方开始删除,一共删除num个元素this.userList.splice(i,1)}}});
</script>
2.13 Vue的生命周期
2.13.1 概念
在我们各种语言的编程领域中,『生命周期』都是一个非常常见的概念。一个对象从创建、初始化、工作再到释放、清理和销毁,会经历很多环节的演变。比如我们在JavaSE阶段学习过线程的生命周期,今天学习Vue对象的生命周期,将来还要学习Servlet、Filter等Web组件的生命周期。
2.13.2 Vue对象的生命周期
2.13.3 生命周期钩子函数
Vue允许我们在特定的生命周期环节中通过钩子函数来加入我们的代码。
<div id="app"><p id="content">{{message}}</p><button @click="changeValue">点我</button>
</div>
new Vue({"el":"#app","data":{"message":"hello"},"methods":{"changeValue":function(){this.message = "new hello";}},// 1.实例创建之前"beforeCreate":function(){console.log("beforeCreate:"+this.message);},// 2.实例创建完成"created":function(){console.log("created:"+this.message);},// 3.数据挂载前"beforeMount":function(){console.log("beforeMount:"+document.getElementById("content").innerText);},// 4.数据已经挂载"mounted":function(){console.log("mounted:"+document.getElementById("content").innerText);},// 5.数据更新前"beforeUpdate":function(){console.log("beforeUpdate:"+document.getElementById("content").innerText);},// 6.数据更新之后"updated":function(){console.log("updated:"+document.getElementById("content").innerText);}
});
【java学习之路】(javaWeb篇)008.VUE相关推荐
- JAVA学习之路--基础篇三
目录 关于Java中从键盘输入的语句 nextxxx().next().nextLine()的区别 语句 if和if else语句 Switch语句 for语句 while和do..while bre ...
- Java学习之路---对象篇(Object)
什么是对象? Java是一种面向对象的语言,那么什么是对象呢?我们将问题空间中的元素及其在解空间中的表示称之为"对象". "万物皆对象":将对象视为一个变量,可 ...
- 个人开发经历--我的java学习之路(学校篇)
个人开发经历--我的java学习之路(学校篇) 个人介绍: 姓名: 不在这里说明 联系信息: 个人历程 jdbc阶段 sql生成器 一代代码生成器 servlet阶段 servlet项目中,sql生成 ...
- java学习之路目录(已完结)
java学习之路目录(持续更新中-) 第一阶段 javaSE(完结) 序号 标题 内容 001 java初识 java语言特点.体系结构.运行机制 002 java SE基础语法 注释.关键字.变量. ...
- 我的Java学习之路2009-11-17
-------------------------------2009年3月19日开始----------------------------- 下载JDK Myeclipse Netbeans JB ...
- Java学习之路02_选择方向_旺旺老师
提示:请您先阅读第一部分:Java学习之路01_软件江湖_旺旺老师 第二部分:帮派之争 就好像玩游戏要先选择角色种族,进入江湖要先选择帮派,那搞软件开发也要选择方向.个人总结的软件开发的方向:嵌入式开 ...
- 大数据学习之路 JUC篇
大数据学习之路 JUC篇(1) 前提说明 本人是一名学生,茫茫it行业的一名卑微的小白,这是我第一次写博客.其原因是学着学着知识发现回顾的时候差不多全忘记了!!为了总结.复习自己以往学到过的有关大数据 ...
- Java学习之路-预科
Java学习之路-预科 第一章 学习计算机的基本知识 文章目录 Java学习之路-预科 前言 一.什么是计算机? 二.硬件及冯诺依曼结构 1.计算机硬件 1.1 计算机硬件组成 1.2 什么是装机 1 ...
- java学习之路2--简单工厂模式实现饮料自动贩卖机
java学习之路2 用简单工厂模式实现饮料自动贩卖机 功能简介 具体实现 1.简单工厂模式 2.代码 总结 用简单工厂模式实现饮料自动贩卖机) 功能简介 接收用户输入的信息,选择购买的饮料. 可供选择 ...
- Java学习之路——接口
Java学习之路--接口 概述 总所周知,我们是父母的孩子.我们的身上既继承了爸爸的基因也继承了妈妈的基因.这就是多继承. 然而在 Java 程序中,是不支持多继承的.Java 仅仅支持单继承.但是接 ...
最新文章
- Typo域名测试工具urlcrazy大学霸IT达人
- java 奖xls转成csv_java - 在Java中将.csv转换为.xls - 堆栈内存溢出
- 【Android 属性动画】属性动画 Property Animation 与 视图动画 View Animation 区别
- 共赴CIO时代,永洪BI如何推动企业数字化转型与创新?
- win10下安装maven
- 深度学习中降低过拟合(OverFitting)的方法
- Teclast X80h安装linux,安装android-x86教程。(没法再贴吧发表,只有百度网盘在线阅读...
- h5打开APP,如果未下载跳转下载页,如果已下载唤醒APP
- c#与mysql教程_C#连接MySQL操作详细教程
- MATLAB中将数字转换成罗马数字
- 如何搭建WordPress个人博客网站?
- 英语口语收集(二十五)
- 全网首发国内联邦学习框架研究
- 数据可视化,看这一篇就够了
- 六脉连环大总结,教你干趴Docker
- 安焦删除贴 牛人纷纷出现(1)
- 计算机局域网的基本拓扑结构五种,计算机网络中局域网的拓扑结构有哪五种(图文)...
- Unity-简单的坦克大战的一些思路
- 从MapX到MapXtreme
- 测试基础-静态白盒测试(检查代码)