第二章 Vue
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>
<!--
在js中框架:其实就是一个外部的js文件
我们要使用它的话,就需要在我们的HTML页面中使用script标签的src属性将其引入
-->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
目标:使用vue,将数据模型和视图(div)进行绑定
实现步骤:
1. 要指定一个区域,作为vue的模板(使用区域)
2. 在该区域的下面(外面)编写一个script标签,在script标签中编写vue代码
2.1 var vue = new Vue()
2.2 通过json设置vue的内容
1. el: 用id选择器表示指定哪块区域能使用vue
2. data: 表示我们要声明的数据模型,就都写在data里面
2.3 使用插值表达式将数据模型和视图进行绑定
-->
<div id="app">
<div>{{city}}</div>
</div>
<script>
var vue = new Vue({
"el":"#app",
"data":{
"city":"武汉"
}
})
</script>
</body>
</html>
2.5 声明式渲染
2.5.1 概念
2.5.1.1 声明式
『声明式』是相对于『编程式』而言的。
- 声明式:告诉框架做什么,具体操作由框架完成
- 编程式:自己编写代码完成具体操作
2.5.1.2 渲染
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.6 绑定文本
2.6.1 基本语法
v-text=“要绑定的数据模型”
2.6.2 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue绑定文本</title>
<!--
在js中框架:其实就是一个外部的js文件
我们要使用它的话,就需要在我们的HTML页面中使用script标签的src属性将其引入
-->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
目标:使用vue,将数据模型和视图(div)进行绑定
实现步骤:
1. 要指定一个区域,作为vue的模板(使用区域)
2. 在该区域的下面(外面)编写一个script标签,在script标签中编写vue代码
2.1 var vue = new Vue()
2.2 通过json设置vue的内容
1. el: 用id选择器表示指定哪块区域能使用vue
2. data: 表示我们要声明的数据模型,就都写在data里面
2.3 使用插值表达式将数据模型和视图进行绑定
-->
<div id="app">
<!--
v-text其实就是将数据模型的值绑定在标签体内
-->
<div v-text="city"></div>
</div>
<script>
var vue = new Vue({
"el":"#app",
"data":{
"city":"武汉"
}
})
</script>
</body>
</html>
2.7 绑定元素属性
2.7.1 基本语法
v-bind:HTML标签的原始属性名
2.7.2 案例代码
HTML代码
<div id="app">
<!--
绑定属性:
v-bind:属性名="数据模型"
简写:
:属性名="数据模型"
-->
<input type="text" :id="idValue" :value="inputValue"/>
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"inputValue":"张三疯",
"idValue":1
}
});
扩展:
v-bind:属性名="属性值"可以简写成 :属性名=“属性值”
2.8 双向数据绑定
HTML代码
<div id="app">
<!--
双向绑定,针对的是表单项的value属性,我们使用v-model:value="数据模型"
双向绑定的作用: 便于用户可以通过数据模型获取表单项的内容(value)
双向绑定的简写:
v-model="数据模型"
-->
<input type="text" v-model="inputValue"/>
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"inputValue":"张三疯"
}
});
页面效果
p标签内的数据能够和文本框中的数据实现同步修改:
扩展:
-
v-model:value=“值” 可以简写成 v-model=“值”
-
trim修饰符
实际开发中,要考虑到用户在输入数据时,有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素,要去掉。在v-model后面加上.trim修饰符即可实现。
<input type="text" v-model.trim="vueValue" />
Vue会帮助我们在文本框失去焦点时自动去除前后空格。
2.9 条件渲染
根据Vue对象中,数据属性的值来判断是否对HTML页面内容进行渲染。
2.9.1 v-if
HTML代码
<div id="app">
<!--
目标是:isShow为true则显示图片,isShow为false则隐藏图片
实现方案: 使用Vue的条件渲染
1. v-if="数据模型"
-->
<img v-if="isShow" src="../img/mm.jpg" width="409" height="292"/>
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"isShow":false
}
});
2.9.2 v-if和v-else
HTML代码
<div id="app">
<!--
目标是:isShow为true则显示图片,isShow为false则隐藏图片
实现方案: 使用Vue的条件渲染
1. v-if="数据模型"
v-else="数据模型"
目标: 如果isShow为true则显示mm.jpg,如果为false则显示girl.jpg
-->
<img v-if="isShow" src="../img/mm.jpg" width="409" height="292"/>
<img v-else="isShow" src="../img/girl.jpg">
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"isShow":true
}
});
2.9.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.10 列表渲染
2.10.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.10.2 迭代一个对象数组
HTML代码
<style type="text/css">
/*设置样式*/
table,th,td {
border-collapse: collapse;
border: 1px solid black;
padding: 5px;
}
</style>
<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.11 事件驱动
2.11.1 案例一: 字符串顺序反转
HTML代码
<div id="app">
<div v-text="message"></div>
<!--
给按钮绑定点击事件: v-on:事件名="函数"
事件绑定的简写: @事件名="函数"
-->
<button type="button" @click="fn1()">按钮</button>
<button type="button" @click="reverseMessage()">反转字符串</button>
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"message":"Hello world"
},
"methods":{
//vue的函数都是声明在methods里面的
fn1(){
alert("我被点击了...")
},
reverseMessage(){
//将div中的内容进行反转,也就是将message反转
//1. 将message通过空字符串切割成一个数组
//this.message
var arr = this.message.split(""); //["H","e","l","l","o"," ","w","o","r","l","d"]
//2. 将数组反转
var reverseArr = arr.reverse(); //["d","l","r","o","w"," ","o","l","l","e","H"]
//3. 通过空字符串将数组拼接成一个字符串
this.message = reverseArr.join("")
}
}
});
2.11.2 案例二:获取鼠标移动时的坐标信息
HTML代码
<!--样式-->
<style>
#area{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
<div id="app">
<!--
绑定鼠标移动事件,鼠标移动事件触发的时候就获取鼠标的坐标
-->
<div id="area" @mousemove="recordPosition()"></div>
<!--
显示当前鼠标所在位置的坐标
-->
<p v-text="pointPosition"></p>
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"pointPosition":"还未获取到鼠标的坐标"
},
"methods":{
recordPosition(){
//在这里就要获取鼠标的坐标
//event表示当前事件
this.pointPosition = event.clientX+","+event.clientY
}
}
});
扩展:
v-on:事件名="函数"可以简写成@事件名=“函数”
2.11.3 取消控件的默认行为
2.10.3.1 控件默认行为
- 点超链接会跳转页面
- 点表单提交按钮会提交表单
本来控件的默认行为是天经地义就该如此的,但是如果我们希望点击之后根据我们判断的结果再看是否要跳转,此时默认行为无脑跳转的做法就不符合我们的预期了。
2.11.3.2 取消方式
调用**事件对象(event)的preventDefault()**方法。
超链接举例
HTML代码:
<div id="app">
<a href="https://www.baidu.com" @click="fn1()">跳转到百度</a>
</div>
Vue代码:
var vue = new Vue({
"el":"#app",
"data":{
},
"methods":{
fn1(){
console.log("hello world...")
//阻止控件的默认行为
event.preventDefault()
}
}
});
表单提交按钮举例
HTML代码:
<div id="app">
<form action="https://www.baidu.com" method="get">
用户名<input type="text" name="username"/><br/>
<button type="submit" @click="fn2()">提交按钮</button>
</form>
</div>
JavaScript代码:
var vue = new Vue({
"el":"#app",
"data":{
},
"methods":{
fn2(){
console.log("点击了表单的提交按钮...")
event.preventDefault()
}
}
});
2.11.4 阻止事件冒泡
图中的两个div,他们的HTML标签是:
<!--样式-->
<style>
#outer{
width: 400px;
height: 400px;
background-color: lightskyblue;
}
#inner{
width: 200px;
height: 200px;
background-color: lightgreen;
}
</style>
<div id="app">
<div id="outer" @click="fn1()">
<div id="inner" @click="fn2()"></div>
</div>
</div>
点击里面的div同时也等于点击了外层的div,此时如果两个div上都绑定了单击响应函数那么就都会被触发:
所以事件冒泡就是一个事件会不断向父元素传递,直到window对象。
如果这不是我们想要的效果那么可以使用事件对象的stopPropagation()函数阻止。
var vue = new Vue({
"el":"#app",
"methods":{
fn1(){
console.log("外层的div被点击了...")
},
fn2(){
console.log("内层的div被点击了...")
//点击内层的div,只会让内层div触发事件,而不会传递到外层,这就是阻止事件的冒泡
event.stopPropagation()
}
}
})
2.11.5 Vue事件修饰符
对于事件修饰符,Vue官网的描述是:
在事件处理程序中调用
event.preventDefault()
或event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
2.11.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.12 侦听属性
2.12.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.12.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.13 案例练习
2.13.1 功能效果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3yOhfPBg-1636982049628)(images/img009.png)]
2.13.2 任务拆解
- 第一步:显示表格
- 第二步:显示四个文本框
- 第三步:创建一个p标签用来显示用户在文本框中实时输入的内容
- 第四步:点击添加记录按钮实现记录的添加
2.13.3 第一步:显示表格
HTML标签
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
<th>操作</th>
</tr>
<tr v-for="(emp,index) in employeeList">
<td v-text="emp.empId"></td>
<td v-text="emp.empName"></td>
<td v-text="emp.empAge"></td>
<td v-text="emp.empSubject"></td>
<td>
<button type="button">删除</button>
</td>
</tr>
</table>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"employeeList":[
{
"empId":"1",
"empName":"张三",
"empAge":20,
"empSubject":"Java"
},
{
"empId":"2",
"empName":"李四",
"empAge":21,
"empSubject":"PHP"
},
{
"empId":"3",
"empName":"王五",
"empAge":22,
"empSubject":"C++"
}
]
}
});
2.13.4 第二步:点击删除按钮删除员工信息
HTML标签
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
<th>操作</th>
</tr>
<tr v-for="(emp,index) in employeeList">
<td v-text="emp.empId"></td>
<td v-text="emp.empName"></td>
<td v-text="emp.empAge"></td>
<td v-text="emp.empSubject"></td>
<td>
<button type="button" @click="deleteEmployee(index)">删除</button>
</td>
</tr>
</table>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"employeeList":[
{
"empId":"1",
"empName":"张三",
"empAge":20,
"empSubject":"Java"
},
{
"empId":"2",
"empName":"李四",
"empAge":21,
"empSubject":"PHP"
},
{
"empId":"3",
"empName":"王五",
"empAge":22,
"empSubject":"C++"
}
]
},
"methods":{
deleteEmployee(i){
//删除当前按钮所在的那一行:其实就是删除employeeList中对应的那一个元素
//在employeeList数组中要根据下标删除
this.employeeList.splice(i,1)
}
}
});
2.13.5 第三步:绑定表单和员工信息
HTML标签
<div id="app">
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
<th>操作</th>
</tr>
<tr v-for="(emp,index) in employeeList">
<td v-text="emp.empId"></td>
<td v-text="emp.empName"></td>
<td v-text="emp.empAge"></td>
<td v-text="emp.empSubject"></td>
<td>
<button type="button" @click="deleteEmployee(index)">删除</button>
</td>
</tr>
</table>
<form>
编号<input v-model="employee.empId" type="text"/><br/>
姓名<input v-model="employee.empName" type="text"/><br/>
年龄<input v-model="employee.empAge" type="text"/><br/>
专业<input v-model="employee.empSubject" type="text"/><br/>
<button type="button">添加员工信息</button>
</form>
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"employeeList":[
{
"empId":"1",
"empName":"张三",
"empAge":20,
"empSubject":"Java"
},
{
"empId":"2",
"empName":"李四",
"empAge":21,
"empSubject":"PHP"
},
{
"empId":"3",
"empName":"王五",
"empAge":22,
"empSubject":"C++"
}
],
//数据模型绑定各个表单项的内容
"employee":{
"empId":"4",
"empName":"赵六",
"empAge":23,
"empSubject":"Kotlin"
}
},
"methods":{
deleteEmployee(i){
//删除当前按钮所在的那一行:其实就是删除employeeList中对应的那一个元素
//在employeeList数组中要根据下标删除
this.employeeList.splice(i,1)
}
}
});
测试是否正确的方式是:在控制台尝试修改Vue对象的数据属性值:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-730uIjjg-1636982049630)(images/img010.png)]
2.13.6 点击添加记录按钮
往表格中添加数据其实就是将表单上输入的数据this.employee
加入到数组this.employeeList
中
添加完之后清空表单数据,其实就是设置this.employee= {}
HTML标签
<div id="app">
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
<th>操作</th>
</tr>
<tr v-for="(emp,index) in employeeList">
<td v-text="emp.empId"></td>
<td v-text="emp.empName"></td>
<td v-text="emp.empAge"></td>
<td v-text="emp.empSubject"></td>
<td>
<button type="button" @click="deleteEmployee(index)">删除</button>
</td>
</tr>
</table>
<form>
编号<input v-model="employee.empId" type="text"/><br/>
姓名<input v-model="employee.empName" type="text"/><br/>
年龄<input v-model="employee.empAge" type="text"/><br/>
专业<input v-model="employee.empSubject" type="text"/><br/>
<button type="button" @click="insertEmployee()">添加员工信息</button>
</form>
</div>
Vue代码
var vue = new Vue({
"el":"#app",
"data":{
"employeeList":[
{
"empId":"1",
"empName":"张三",
"empAge":20,
"empSubject":"Java"
},
{
"empId":"2",
"empName":"李四",
"empAge":21,
"empSubject":"PHP"
},
{
"empId":"3",
"empName":"王五",
"empAge":22,
"empSubject":"C++"
}
],
//数据模型绑定各个表单项的内容
"employee":{
"empId":"4",
"empName":"赵六",
"empAge":23,
"empSubject":"Kotlin"
}
},
"methods":{
deleteEmployee(i){
//删除当前按钮所在的那一行:其实就是删除employeeList中对应的那一个元素
//在employeeList数组中要根据下标删除
this.employeeList.splice(i,1)
},
insertEmployee(){
//1. 将表单的内容作为一行添加到表格中:就是将当前表单的数据加入到数组中作为employeeList数组的最后一个元素
this.employeeList.push(this.employee)
//2. 清空表单内容
this.employee = {}
}
}
});
2.14 Vue的生命周期(了解)
2.14.3 生命周期钩子函数
Vue允许我们在特定的生命周期环节中通过钩子函数来加入我们的代码。
<div id="app">
<div id="d1">{{city}}</div>
</div>
var vue = new Vue({
"el":"#app",
"data":{
"city":"武汉"
},
//Vue的钩子函数,其实就是可以让我们在Vue的生命周期的特定阶段执行一些代码
beforeCreate(){
//输出数据模型city的值
console.log("在beforeCreate钩子函数中获取city:"+this.city)
},
created(){
//输出数据模型city的值
console.log("在created钩子函数中获取city:"+this.city)
},
beforeMount(){
//执行在虚拟视图替换真实视图之前,所以此时真实视图里面不会显示数据模型的数据
console.log("在beforeMount钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
},
mounted(){
//执行在虚拟视图替换真实视图之后,所以此时真实视图里面会显示数据模型的数据
console.log("在mounted钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
}
})