零底子一篇打通Vue极速通关教程

拉不拉稀肚拉稀 · 昨天 08:56

写给零底子看的Vue极速掌握教程

第1章 Vue简介

1.1 Vue 概述

是一套用于构建用户界面的渐进式框架。与别的大型框架差别的是，Vue 被计划为可以自底向上逐层应用。Vue 的核心库只关注视图层，不但易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库联合使用时，Vue 也完万能够为复杂的单页应用提供驱动。

Vue.js 的目标是通过尽可能简朴的 API 实现响应的数据绑定以及组合视图组件。
Vue3官网：https://cn.vuejs.org/
Vue2官网：https://v2.cn.vuejs.org/
1.2 MVVM 模式

MVVM（Model-View-ViewModel）即：模子-视图-视图模子，是一种软件架构计划模式，常用于简化用户界面的开发。其核心在于将数据模子（Model）和视图（View）之间的交互抽象化，通过一个称为ViewModel的组件来实现。ViewModel负责将Model中的数据转换成视图可以使用的格式，并且袒露给视图操作的数据和下令。
ViewModel 必要做两件事情：
（1）必要监听Model的数据变化，将Model上的任何数据变化渲染到View上。
（2）必要监听View上的任何数据变化，将View上的任何变动写入Model中。

Model：后端响应的数据，前端将其使用Model接收（封装）
View：我们看到的各种HTML控件，负责使用HTML控件来渲染已经得到的数据。
ViewModel：将后端响应的数据（Model）绑定（渲染）到视图（View）中，其次，当视图控件进行数据修改时，VM能监听到数据的修改，将用户更新的数据直接更新到Model中。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel 负责毗连 View 和 Model，包管视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
我们可以回顾一下之前的原生JS/JQ代码是怎样渲染数据的：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="" id="depts"></select>
</body>
</html>
<script type="text/javascript">
$.get("/dept/findAll",function(res){ // res: 后端响应的数据(Model)
var deptHtml="";
for(var dept of res){
deptHtml+="<option value="+dept.id+">"+dept.name+"</option>";
}
// 更新视图(View)
$("#depts").html(deptHtml);
})
</script>

复制代码

1.3 WebStorm开发工具

1.3.1 WebStorm简介

WebStorm 是JetBrains 公司旗下一款 JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强盛的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继续了IntelliJ IDEA强盛的JS部分的功能。

1.3.2 集成Vue开发调试工具

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地进步我们的调试效率。在Edge欣赏器的地址栏上输入"edge://extensions/"，回车，进入Edge欣赏器全局设置页面，如图所示。

点击“获取 Microsoft Edge 扩展”，搜索“vue devtools”，如图所示。

编写一个Vue案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
</body>
<script>
new Vue({
el: "#app",
data: {
msg: "hello Vue!"
}
})
</script>
</html>

复制代码

按下F12，打开欣赏器的控制台，可以观察Vue插件。

发现多了一个Vue调试工具的菜单栏；
第2章 Vue的事件绑定

2.1 Vue基本使用

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。它提供了一套声明式的渲染数据到DOM的系统（其底层依靠于Vue提供的VM组件），以及组件化的开发模式。Vue.js 通过指令来扩展HTML的功能，使得开发者能够以声明式的方式将DOM的绑定至底层Vue实例的数据上。
2.1.1 插值表达式

Vue.js 中的插值表达式是一种简洁的方式，用来在模板中显示数据模子的变化。最常用的插值表达式是双大括号 {{ }}，它可以插入数据模子中变量的值。

使用示例：

当在模板中使用双大括号 {{ }} 包裹一段表达式时，Vue 会计算这段表达式的值，并将其转换为字符串然后插入到 DOM 中。比方：

<span>{{ message }}</span>

复制代码

如果 Vue 实例的数据（data）中有 message 属性，那么该属性的值将被渲染到页面上。
插值表达式中可以包罗任何有效的 JavaScript 表达式，包括变量引用、字符串毗连、算术运算等。
比方：

<p>{{ firstName + ' ' + lastName }}</p>
<p>{{ 1 + 2 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>

复制代码

小训练：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h3>number:{{number}}</h3>
<h3>message:{{message}}</h3>
<h3>flag:{{flag}}</h3>
<h3>car:{{car}}</h3>
<h3>season:{{season}}</h3>
</div>
</body>
<script type="text/javascript">
// 是否开启devtools调试工具(开发版本默认为true,生产版本默认为false)
Vue.config.devtools = true;
new Vue({ // 创建一个Vue实例
el: "#box", // 通过id选择器选择某个控件(代码Vue接管这片区域)
data: { // Vue中存放数据的地方(Model)
number: 100,
message: "Hello Vue!",
flag: true,
car: {
brand: "长安汽车",
name: "长安CS95",
price: 158000
},
season: ["Spring", "Summer", "Autumn", "Winter"]
}
})
</script>
</html>

复制代码

2.1.2 注意事项

一个Vue只能绑定一个组件，纵然选择器可以选择多个组件，那么也不会见效；

<body>
<div class="box">
{{msg}}
</div>
<div class="box">
{{msg}}
</div>
<script type="text/javascript">
new Vue({
el: ".box", // 通过class选择器选择组件
data: {
msg:"Hello Vue!"
}
})
</script>
</body>

复制代码

当然，我们也可以创建多个Vue实例来接管多个组件。

<body>
<div id="box1">
{{msg}}
</div>
<div id="box2">
{{msg}}
</div>
<script type="text/javascript">
new Vue({
el: "#box1", // 通过class选择器选择组件
data: {
msg:"Hello Vue!"
}
})
new Vue({
el: "#box2", // 通过class选择器选择组件
data: {
msg:"Hello Vue!"
}
})
</script>
</body>

复制代码

2.2 Vue事件绑定

在Vue中提供 v-on 下令用于监听 DOM 事件，并在事件触发时执行一些 JavaScript 代码。它可以在 Vue 模板中被用来响应用户操作，如点击按钮、输入文本等。可以直接在 HTML 元素上使用 v-on 指令来绑定一个事件监听器到这个元素上的某个事件上。最简朴的形式是将一个方法名（字符串）作为表达式传入 v-on 指令。

示例代码：

<button v-on:click="doSomething">点击我</button>

复制代码

当用户点击按钮时，将会调用 Vue 实例中的 methods 属性里界说的 doSomething 方法。

简写方式：

为了简化誊写，Vue 还提供了一个简短的语法来代替完整的 v-on 写法。只必要使用 @ 符号加上事件名即可。

<button @click="doSomething">点击我</button>

复制代码

vue提供的事件非常多，几乎支持全部的原生JS事件，采用v-on:的方式监听。常用的Vue事件如下。
事件范例描述click当用户点击鼠标按钮时调用。dblclick当用户双击鼠标按钮时调用。mousedown当用户按下鼠标按钮时调用。mouseup当用户释放鼠标按钮时调用。mouseover当用户将鼠标指针移到元素上时调用。mouseout当用户将鼠标指针从元素或其子元素移开时调用。mouseenter当用户将鼠标指针移到元素上时调用（不包括子元素）。mouseleave当用户将鼠标指针从元素或其子元素移开时调用。contextmenu当用户右击（或执行雷同操作）来打开上下文菜单时调用。keydown当用户按下键盘上的键时调用。keypress当用户按下一个或多个键并且产生字符值时调用。keyup当用户释放键盘上的键时调用。submit当表单提交时调用。focus当元素获得焦点时调用。blur当元素失去焦点时调用。change当域的内容被改变时调用。input每当输入字段发生变化时调用。reset当表单被重置时调用。select当用户选择一些文本或更改了对象的选择时调用。touchstart触摸开始时调用。touchmove触摸移动时调用。touchend触摸竣事时调用。touchcancel触摸被中断时调用。 2.1.1 点击事件

点击事件分为单机事件与双击事件，在Vue中分别采用click和dbclick来监听。

v-on:click：单机事件。
v-dbclick：双击事件。

示例代码：

<body>
<div id="box">
<h3>单击事件</h3>
<p><a href="http://www.baidu.com" v-on:click="fun1">我是按钮1</a></p>
<p><a href="http://www.baidu.com" v-on:click="fun2('hello')">我是按钮2</a></p>
<p><a href="http://www.baidu.com" v-on:click="fun3">我是按钮3</a></p>
<p><a href="http://www.baidu.com" @click="fun4('hello',$event)">我是按钮4</a></p>
<h3>双击事件</h3>
<p>
<button v-on:dblclick="fun5">双击事件</button>
</p>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
},
methods:{
fun1:function(){
alert(1)
},
fun2:function(msg){
alert(msg)
},
fun3:function(event){ // Vue中定义的方法默认会传递一个event事件
alert(event)
event.preventDefault(); // 阻止事件的默认行为(跳转页面)
},
fun4:function(msg,event){
alert(msg);
alert(event);
},
fun5:function(){
alert("双击事件！")
}
}
})
</script>
</body>

复制代码

2.2.2 键盘事件

v-on:keydown：鼠标按下事件
v-on:keyup：鼠标抬起事件

示例代码：

<body>
<div id="box">
<input type="text" v-on:keydown="down"><br>
<input type="text" v-on:keyup="up">
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
down() { // 简写方式
console.log("键盘按下了")
},
up(){
console.log("键盘抬起了")
}
}
})
</script>
</body>

复制代码

2.2.3 移动事件

v-on:mouseover：鼠标移入事件
v-on:mouseout：鼠标移失事件

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box" style="width: 300px;height: 200px;background-color: gray;"
v-on:mousemove="inter" v-on:mouseout="outer">
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
inter(){
console.log("鼠标移入了")
},
outer(){
console.log("鼠标移出了")
}
}
})
</script>
</body>
</html>

复制代码

2.3 按键修饰符

2.3.1 默认的按键修饰符

当进行键盘事件的监听时，我们可以通过event事件中的keyCode大概key来判断按下的是哪一个键，从而进行针对性的处理；同时Vue也为一些常用的按键分配了按键修饰符（相称于别名），这样就可以更加方便的来监听指定的按键，Vue中常用的按键别名如下：

回车 => enter
删除 => delete（捕获“删除”和“退格”键）
退出 => esc
空格 => space
换行 => tab（没有keyup事件，只有keydown事件）
上 => up
下 => down
左 => left
右 => right

示例代码：

<body>
<div id="box">
<p><input type="text" v-on:keyup="fun1"></p>
<p><input type="text" v-on:keyup.enter="fun2">enter</p>
<p><input type="text" v-on:keyup.delete="fun3">delete</p>
<p><input type="text" v-on:keyup.esc="fun4">esc</p>
<p><input type="text" v-on:keydown.tab="fun5">tab</p>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1(event){
console.log(event.keyCode,"---",event.key)
},
fun2(){
console.log("您按下了回车！")
},
fun3(){
console.log("您按下了delete！")
},
fun4(){
console.log("您按下了esc！")
},
fun5(){
console.log("您按下了tab！")
}
}
})
</script>
</body>

复制代码

2.3.2 自界说按键修饰符

针对于Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为短横线命名；
比方：CapsLock—>caps-lock

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<p><input type="text" v-on:keyup="fun1"></p>
<p><input type="text" v-on:keyup.Control="fun2">ctrl</p>
<p><input type="text" v-on:keyup.caps-lock="fun3">CapsLock</p>
<p><input type="text" v-on:keyup.delete="fun4">delete</p>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1(event) {
console.log(event.keyCode, "---", event.key)
},
fun2() {
console.log("您按下了ctrl!")
},
fun3() {
console.log("您按下了CapsLock!")
},
fun4() {
console.log("您按下了delete或backspace键!")
}
}
})
</script>
</body>
</html>

复制代码

2.3.3 自界说按键修饰符注意事项

Vue自界说的按键修饰符修饰系统修饰键（用法特别）时：（ctrl、alt、shift、meta），此中ctrl键除外；

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
配合keydown使用：正常触发事件。

另外，比方某些键监听不了；因此我们一般都使用Vue自身提供的按键修饰符大概采用keyCode/key来判断用户按下的键；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<p><input type="text" v-on:keyup="fun1"></p>
<p><input type="text" v-on:keyup.Control="fun2">ctrl</p>
<p><input type="text" v-on:keyup.Alt="fun3">alt</p>
<p><input type="text" v-on:keyup.Shift="fun4">shift</p>
<p><input type="text" v-on:keyup.Meta="fun5">meta</p>
<p><input type="text" v-on:keydown.0="fun6">0</p>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1(event){
console.log(event.keyCode,"---",event.key)
},
fun2(){
console.log("您按下了ctrl!")
},
fun3(){
console.log("您按下了alt!")
},
fun4(){
console.log("您按下了shift!")
},
fun5(){
console.log("您按下了windows!")
},
fun6(){
console.log("您按下了数字0!")
}
}
})
</script>
</body>
</html>

复制代码

2.3.4 自界说别名

Vue支持根据keyCode来扩展自界说的按键，扩展的自界说按键办理了系统按键必要搭配其他键才气触发的问题（也有部分按键可能会有问题）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<p><input type="text" v-on:keyup="fun1"></p>
<p><input type="text" v-on:keyup.huiche="fun2">回车</p>
<p><input type="text" v-on:keyup.kongge="fun3">空格</p>
<p><input type="text" v-on:keyup.windows="fun4">windows</p>
</div>
<script type="text/javascript">
Vue.config.keyCodes.huiche = 13
Vue.config.keyCodes.kongge = 32
Vue.config.keyCodes.windows = 91
new Vue({
el: "#box",
data: {},
methods: {
fun1(event){
console.log(event.keyCode,"---",event.key)
},
fun2(){
console.log("您按下了回车")
},
fun3(){
console.log("您按下了空格!")
},
fun4(){
console.log("您按下了windows!")
}
}
})
</script>
</body>
</html>

复制代码

2.4 事件修饰符

Vue中提供了简化了很多JS中的事件修饰符，Vue中的事件修饰符如下：
事件说明prevent阻止默认事件；stop阻止事件冒泡；capture使用事件的捕获模式；once事件只触发一次；self只有event.target是当前操作的元素时才触发事件；passive事件的默认行为立刻执行，无需等候事件回调执行完毕；left (2.2.0)只当点击鼠标左键时触发。right(2.2.0)只当点击鼠标右键时触发。middle(2.2.0)只当点击鼠标中键时触发。（1）阻止默认事件。

<body>
<div id="box">
<h3>阻止默认事件</h3>
<p><a href="http://www.baidu.com" v-on:click.prevent="fun1">百度一下</a></p>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1() {
alert("Hello Baidu")
}
}
})
</script>
</body>

复制代码

（2）阻止冒泡事件。

<body>
<div id="box">
<h3>未阻止冒泡事件</h3>
<div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<h3>阻止冒泡事件</h3>
<div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click.stop="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1() {
console.log("red")
},
fun2() {
console.log("blue")
}
}
})
</script>
</body>

复制代码

（3）事件捕捉。

<body>
<div id="box">
<h3>未进行事件捕捉</h3>
<div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<h3>进行了事件捕捉</h3>
<div v-on:click.capture="fun1" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1() {
console.log("red")
},
fun2() {
console.log("blue")
}
}
})
</script>
</body>

复制代码

（4）self修饰符。

<body>
<div id="box">
<h5>没有使用self修饰符</h5>
<div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<h5>使用了self修饰符</h5>
<div v-on:click.self="fun1" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1(event) {
console.log(event.target)
},
fun2(event) {
console.log(event.target)
}
}
})
</script>
</body>

复制代码

（6）左、右、中键点击事件。

<body>
<div id="box">
<h3>单击事件</h3>
<button v-on:click.left="fun1">单击左键</button>
<button v-on:click.right="fun2">单击右键</button>
<button v-on:click.middle="fun3">单击中键</button>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1() {
console.log("您点击了左键")
},
fun2(event) {
console.log("您点击了右键")
event.preventDefault() //阻止默认事件(浏览器右键菜单)
},
fun3() {
console.log("您点击了中键")
}
}
})
</script>
</body>

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
li {
height: 100px;
}
</style>
</head>
<body style="height: 1000px;">
<div id="box">
<h3>阻止默认事件</h3>
<p><a href="http://www.baidu.com" v-on:click.prevent="fun1">百度一下</a></p>
<h3>阻止事件冒泡</h3>
<div v-on:click="fun2" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click.stop="fun3" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<h3>只触发一次事件</h3>
<p>
<button v-on:click.once="fun4">我是按钮</button>
</p>
<h5>事件捕获</h5>
<!--
默认情况下,先进行事件冒泡,再进行事件捕获
capture: 先进行事件捕获,在进行事件冒泡
-->
<div v-on:click.capture="fun5('red')" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click="fun6('blue')" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<h5>self修饰符</h5>
<div v-on:click.self="fun7" style="width: 150px;height: 150px;background-color: red;">
<div v-on:click="fun8" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<h5>passvie</h5>
<ul v-on:wheel.passvie="fun9" style="width: 200px;height: 200px;background-color: red;overflow: scroll;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<h5>.left</h5>
<button v-on:click.left="fun10">left</button>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {},
methods: {
fun1() {
alert("Hello Baidu")
},
fun2() {
alert("点击了大的div")
},
fun3() {
alert("点击了小的div")
},
fun4() {
console.log("按钮点击了")
},
fun5(color) {
console.log(color)
},
fun6(color) {
console.log(color)
},
fun7(event) {
console.log(event.target)
},
fun8(event) {
console.log(event.target)
},
fun9() {
for (let i = 0; i < 100000; i++) {
console.log('aaa')
}
},
fun10() {
console.log("left")
}
}
})
</script>
</body>
</html>

复制代码

第3章 Vue常用指令

3.1 v-text与v-html

v-text：不会渲染字符串里面的HTML内容
v-html：会渲染字符串里面的HTML内容

<body style="height: 1000px;">
<div id="box">
<div v-text="txt"></div>
<div v-html="txt"></div>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
txt: "<h1>Hello</h1>"
}
})
</script>
</body>

复制代码

3.2 v-for

v-for指令用于遍历使用；

<body>
<div id="box">
<h3>遍历数组</h3>
<ul>
<li v-for="(city,index) in cities">{{city}}---{{index}}</li>
</ul>
<h3>遍历对象</h3>
<ul>
<li v-for="(val,key) in book">{{key}}---{{val}}</li>
</ul>
<h3>遍历对象数组</h3>
<ul>
<li v-for="(car,index) in cars" :key="car.id">
<h3>index: {{index}}</h3>
<p>id:{{car.id}}</p>
<p>brand:{{car.brand}}</p>
<p>name:{{car.name}}</p>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
cities: ["广州","杭州","兰州","郑州","福州"],
book:{
id:1,
name:"《Java核心技术》",
price: 28.8
},
cars:[
{
id:1,
brand:"比亚迪",
name:"比亚迪F3"
},
{
id:2,
brand:"五菱",
name:"红菱宏光S3"
},
{
id:3,
brand:"长安",
name:"长安欧尚x7"
}
]
}
})
</script>
</body>

复制代码

3.3 v-if与v-show

v-if：根据表达式的值来决定是否渲染元素（存不存在）
v-show：是根据表达式的值来决定是否显示（display:none）

示例代码：

<body>
<div id="app">
<button @click="fun1">v-if效果</button>
<button @click="fun2">v-show效果</button>
<hr>
<span v-if="flag_if">小灰</span>
<hr>
<span v-show="flag_show">xiaohui</span>
</div>
<script>
new Vue({
el: "#app",
data: {
flag_if: false,
flag_show: false
},
methods: {
fun1: function() {
this.flag_if = !this.flag_if;
},
fun2: function() {
this.flag_show = !this.flag_show;
}
}
});
</script>
</body>

复制代码

3.4 MVVM双向绑定

双向绑定是MVVM模式中的一个紧张特性，它允许数据在Model和View之间自动同步。这意味着当Model中的数据改变时，这些变化会自动反映到视图上；同样地，当用户通过视图改变了数据，这些变化也会被同步到Model中。这种机制极大地减少了手动处理数据同步的代码量，并且使得应用程序更易于维护。
3.4.1 v-bind

v-bind 指令用于动态地将属性绑定到 Vue 实例的数据。当 Vue 实例的数据发生变化时，v-bind 会自动更新绑定的属性值。但是这种绑定是单向的，即 Vue 实例中的数据发生变化后能够纵然更新到UI组件上，但是当UI组件上的数据发生变化时，并不能够及时更新到Vue实例上。
它可以用来绑定任何 HTML 属性，包括 class、style 以及其他标准属性，如下：

v-bind:src 用于绑定图片的 src 属性。
v-bind:class 可以根据条件绑定类名。
v-bind:style 用于动态设置样式。

示例代码：

<body>
<div id="app">
<p v-bind:title="testTitle">
绑定titlte属性
</p>
<p :title="testTitle" :style="testStyle">
绑定title和sytle属性
</p>
<input type="text" :value="testValue">
<hr>
<a :href="url" v-bind::color="testColor">百度一下</a>
<hr>
<a v-bind={href:"http://www.baidu.com?id="+id}>百度一下</a>
<hr>
</div>
<script>
new Vue({
el: "#app",
data: {
testColor: "blue",
testTitle: "我是通过v-bind绑定的title",
testValue: "Hello",
url: "http://www.baidu.com",
id: 100,
// 如果存在 - 必须使用驼峰命名或者使用''
testStyle:{color:'red','font-weight':200}
}
});
</script>
</body>

复制代码

3.4.2 v-model

v-model指令用于将Vue中的数据与组件中的数据进行双向绑定，当Vue中的数据发生变化时，立马会渲染到组件上，当组件上的值发生变化时，会立马更新到Vue中；这使得用户输入能够直接反映到数据模子中，同时数据模子的变化也能立刻反映在表单输入上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model:value="testValue">
</div>
<script>
new Vue({
el: "#app",
data: {
testValue:"aaa"
}
});
</script>
</body>
</html>

复制代码

第4章 Vue的生命周期

4.1 Vue的生命周期简介

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

vue在生命周期中共有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destroyed8个状态；
4.2 Vue的生命周期钩子

4.2.1 beforeCreate/created

beforeCreate：Vue生命周期的第一个函数，在Vue对象创建之前执行，初始化Vue自身的事件、注册Vue示例的生命周期函数等，在该阶段props、data、method都处于不可用状态；
- 1）创建VUE对象之前执行
- 2）data中的数据还未初始化
- 3）el还未关联到对应的id（还未挂载DOM）
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）
created：创建VUE对象之后执行，该阶段Vue示例已经被创建乐成，初始化了props、data、methods等功能；但是Vue还未挂载dom元素（还未进行绑定）
- 1）创建VUE对象之后执行
- 2）data中的数据已经初始化
- 3）el还未关联到对应的id
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）

【示例代码1-观察dom的变化】

<body>
<div id="box">
{{message}}
</div>
<script>
new Vue({
el: "#box",
data: {
message: 'Hello World'
},
// 在beforeCreate阶段的Vue,数据未初始化、dom未挂载、dom也未渲染
beforeCreate: function () {
console.log('创建vue实例前【beforeCreate】');
console.log('data 数据：' + this.message); // undefined
console.log('挂载的对象：' + this.$el); // undefined
console.log('真实dom结构：' + document.getElementById('box').innerHTML); // {{message}}
console.log('------------------');
},
// 在created阶段的Vue,数据已经初始化、但dom未挂载、dom也未渲染
created: function () {
console.log('创建vue实例后【created】');
console.log('data 数据：' + this.message); // Hello World
console.log('挂载的对象：' + this.$el); // undefined
console.log('真实dom结构：' + document.getElementById('box').innerHTML); // {{message}}
console.log('------------------');
}
});
</script>
</body>

复制代码

【示例代码2-调用Vue数据】

<body>
<div id="box">
{{message}}
</div>
<script>
new Vue({
el: "#box",
data: {
message: 'Hello World'
},
methods: {
method() {
console.log("method running...");
}
},
beforeCreate: function () {
console.log('创建vue实例前【beforeCreate】');
// Vue实例还未创建成功,不能调用
this.method();
// Vue实例还未创建成功,不能访问数据(undefined)
console.log(this.message);
console.log('------------------');
},
created: function () {
console.log('创建vue实例后【created】');
// Vue实例已经创建成功,可以调用Vue方法
this.method();
// Vue实例已经创建成功,可以访问数据
console.log(this.message);
console.log('------------------');
}
});
</script>
</body>

复制代码

4.2.2 beforeMount/mounted

beforeMount：对象挂载之前执行，此时el已经关联到对应对象，但{{}}表达式还未加载（挂载了，但还没完全挂载）
- 1）对象挂载之前执行
- 2）data中的数据已经初始化
- 3）el已经关联到对应对象（挂载了DOM）
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）
mounted：对象挂载之后执行,此时{{}}表达已经加载，执行完mounted之后开始正常执行js代码
- 1）对象挂载之后执行
- 2）data中的数据已经初始化
- 3）el已经关联到对应对象
- 4）{{}}表达式中的内容已经更新（真实DOM已经渲染）

【示例代码1-观察dom的变化】

<body>
<div id="box">
{{message}}
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
message: 'Hello World'
},
// 在beforeMount阶段的Vue,数据已经初始化、dom已经挂载、但dom未渲染
beforeMount: function () {
console.log('挂载到dom前【beforeMount】');
console.log('data 数据：' + this.message); // Hello World
console.log('挂载的对象：' + this.$el); // [object HTMLDivElement]
console.log('真实dom结构：' + document.getElementById('box').innerHTML); // {{message}}
console.log('------------------');
},
// 在mounted阶段的Vue,数据已经初始化、dom已经挂载、dom也已经渲染
mounted: function () {
console.log('挂载到dom后【mounted】');
console.log('data 数据：' + this.message); // Hello World
console.log('挂载的对象：' + this.$el); // [object HTMLDivElement]
console.log('真实dom结构：' + document.getElementById('box').innerHTML); // Hello World
console.log('------------------');
}
});
</script>
</body>

复制代码

4.2.3 beforeUpdate/updated

当修改了Vue中的数据时将会触发beforeUpdate与updated方法。

beforeUpdate：Vue数据更新前执行，此时data中的数据已经更新，但是{{}}表达式中引用的还没有更新（还未渲染到DOM上）。
updated：Vue数据更新后执行，{{}}表达式中引用也更新。

【示例代码-观察数据变更前后的值】

<body>
<div id="box">
{{message}}
<br>
<button v-on:click="fun1()">改变数据</button>
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
message: 'Hello World'
},
methods: {
fun1() {
this.message = Math.random();
}
},
// 当修改了Vue中的数据时,beforeUpdate方法中的dom还是为渲染之前的,但Vue中的数据已经修改
beforeUpdate: function () {
console.log('数据变化更新前【beforeUpdate】');
console.log('data 数据：' + this.message);
console.log('挂载的对象：' + this.$el);
console.log('真实dom结构：' + document.getElementById('box').innerHTML);
console.log('------------------');
},
// 当修改了Vue中的数据时,updated方法中的dom已经更新为最新的数据
updated: function () {
console.log('数据变化更新后【updated】');
console.log('data 数据：' + this.message);
console.log('挂载的对象：' + this.$el);
console.log('真实dom结构：' + document.getElementById('box').innerHTML);
console.log('------------------');
}
});
</script>
</body>

复制代码

4.2.4 beforeDestory/destroyed

beforeDestory：vue对象销毁前执行，在该方法中，Vue中注册的组件、侦听器、事件监听等都处于可用状态，一般在此阶段释放其他资源
destroyed：vue对象销毁后执行，在该方法中，已经销毁了Vue中注册的组件、侦听器、事件监听等；

【示例代码-观察Vue实例销毁前后的变化】

<body>
<div id="box">
{{message}}
<hr>
<button @click="exit">销毁VM</button>
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
message: 'Hello World'
},
methods: {
exit(){
// 销毁vm
this.$destroy()
}
},
beforeDestroy: function () {
console.log('--------beforeDestroy----------');
},
destroyed: function () {
console.log('--------destroyed----------');
}
});
</script>
</body>

复制代码

第5章 Vue的ajax

5.1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。曾经是 Vue 社区广泛使用的库之一，用于发送 AJAX 请求和处理响应。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，并且 Vue 官方保举使用其他更现代的库来处理 HTTP 请求，如 Axios 大概原生的 Fetch API等。
5.2 Promise

Promise 是 JavaScript 中的一种编程模式，用于处理异步操作。它提供了一种更加优雅的方式来组织异步代码，避免了回调地狱（callback hell）的问题，并且使得错误处理更加一致。Promise 对象代表了一个最终会在未来完成（或失败）的异步操作，以是在 Promise 返回给调用者的时间，操作往往还没有完成，并且其效果值未知。
5.2.1 回调地狱

回调函数：当一个函数作为参数传入另一个参数中，并且它不会立刻执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。我们熟悉的定时器和Ajax中就存在有回调函数：

//function(){console.log('执行了回调函数')}就是回调函数，它只有在3秒后才会执行
setTimeout(function(){
console.log('执行了回调函数');
},3000) //3000毫秒

复制代码

异步任务：与之相对应的概念是“同步任务”，同步任务在主线程上排队执行，只有前一个任务执行完毕，才气执行下一个任务。异步任务不进入主线程，而是进入异步队列，前一个任务是否执行完毕不影响下一个任务的执行。同样，还拿定时器作为异步任务举例：

setTimeout(function(){
console.log('执行了回调函数');
},3000)
console.log('111');

复制代码

上述代码的现实输出顺序为：“111”、“执行了回调函数”。

回调地狱：

根据前面我们可以得出一个结论：存在异步任务的代码，不能包管能按照顺序执行，那如果我们非要代码顺序执行呢？比如我必要先输出“First”，再输出“Second”，再输出“Third”。我必须要这样操作，才气包管顺序正确：

setTimeout(function () {
console.log("First");
setTimeout(function () {
console.log("Second");
setTimeout(function () {
console.log("Third");
}, 3000);
}, 4000);
}, 1000);

复制代码

可以看到，代码中的回调函数套回调函数，居然套了3层，这种回调函数中嵌套回调函数的情况就叫做回调地狱。现实上，回调地狱的场景还是挺多见的，我们经常必要先发送一段请求查询到某些数据以当做参数通报给下一个请求，这样下一个请求就必须等上一个请求完毕后才气执行。
5.2.2 Promise的使用

Promise 构造函数接受一个函数作为参数，该函数会被立刻执行，以是我们称之为起始函数。起始函数包罗两个函数 resolve 和 reject，分别表示 Promise 乐成和失败的状态。
起始函数执行乐成时，它应该调用 resolve 函数并通报乐成的效果。当起始函数执行失败时，它应该调用 reject 函数并通报失败的原因。
Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

then：用于处理 Promise 乐成状态的回调函数。
catch：用于处理 Promise 失败状态的回调函数。
finally：无论 Promise 是乐成还是失败，都会执行的回调函数。

示例代码：

// 创建一个 Promise 对象
const promise = new Promise(function(resolve, reject) {
// 进行异步操作,该setTimeout函数在创建Promise对象时就已经执行
setTimeout(() => {
// 随机生成成功或失败
if (Math.random() < 0.5) {
// 如果成功(then)执行resolve方法
console.log('准备执行resolve');
resolve('success');
} else {
// 如果失败(catch)执行reject方法
console.log('准备执行reject');
reject('error');
}
}, 1000);
});
// 注册成功和失败的回调函数
promise.then(function (result){
// result的值为resolve方法传入的值
console.log(result);
}).catch(function (error){
// error的值为reject方法传入的值
console.log(error);
}).finally(function (){
// 无论成功或失败都会执行
console.log('Promise对象执行完毕');
})
console.log('程序执行完毕'); // 因为Promise对象是异步的，所以先输出

复制代码

执行情况：

示例代码：

new Promise(function (resolve, reject) {
var a = 0;
var b = 0;
if (b == 0)
reject("除数不能为0");
else
resolve(a / b);
}).then(function (value) {
console.log("a / b = " + value);
}).catch(function (err) {
console.log(err);
}).finally(function () {
console.log("End");
});
console.log('程序执行完毕'); // 因为Promise对象是异步的，所以先输出

复制代码

执行情况：

有了Promise，接下来我们可以改造一下回调地狱中的代码了：

function print(delay, message) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(message);
resolve();
}, delay);
});
}
print(2000, "First").then(function () {
return print(4000, "Second");
}).then(function () {
print(3000, "Third");
});

复制代码

Promise 对象一旦 Promise 被创建，它的状态会在“待定”（pending）、“兑现”（fulfilled）和“拒绝”（rejected）之间转变。状态一旦转变，就不会再变回之前的状态。

待定状态（pedding）：调用promise时（创建Promise对象时），一开始就出现出等候状态，碰到resolve大概reject之前，都处于这个状态。
兑近况态（fulfilled）：在执行了resolve后，promise则会从待定状态酿成兑近况态，后续会进入.then 的回调函数中。
拒绝状态（rejected）在执行了reject后，promise状态会从待定状态酿成拒绝状态，后续会进入.catch 的回调函数中。

5.2.3 Promise改造Ajax请求

Promise可以封装一个异步操作，不壅闭当前任务的执行，使用这个特点我们可以用来封装ajax请求，示例代码如下：

const promise = new Promise((resolve, reject) => {
// 执行异步操作(该方法在创建Promise对象时就已经执行)
if (/* 异步操作是否成功 */) {
resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果(其实就是调用then方法)
} else {
reject(error);// 调用 reject，代表 Promise 会返回失败结果(其实就是调用catch方法)
}
});

复制代码

示例：

let getRequest = function (url) {
// 使用Promise对象封装一个ajax请求
return new Promise((resolve, reject) => {
$.ajax({
url: url,
type: "GET",
success(result) {
// 调用Promise的resolve方法
resolve(result);
},
error(error) {
// 调用Promise的reject方法
reject(error);
}
});
})
}
// 模拟一个请求地址
var url = "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json";
getRequest(url).then(function (result){
console.log(result);
}).catch(function (error){
console.log(error);
})
console.log("程序执行完毕");

复制代码

5.2 axios

axios 是一个基于 promise 的 HTTP 客户端，用于欣赏器和 node.js。它提供了一种现代化的方式来进行 HTTP 请求和接收响应，支持诸如拦截请求和响应、转换请求和响应数据、取消请求等功能。axios 的计划使其易于使用，并且它已经成为许多前端和后端开发者的首选库之一。

axios的github地址：https://github.com/axios/axios
axios官方文档：https://axios.nodejs.cn/docs/api_intro

axios的语法如表所示。
语法说明axios(config)使用axios发送ajax请求axios(url[, config])使用axios发送ajax请求axios.request(config)使用axios发送ajax请求axios.get(url[, config])发送get请求axios.delete(url[, config])发送delete请求axios.head(url[, config])发送head请求axios.options(url[, config])发送options请求axios.post(url[, data[, config]])发送post请求axios.put(url[, data[, config]])发送put请求axios.patch(url[, data[, config]])发送patch请求axios.postForm(url[, data[, config]])使用 multipart/form-data 范例发起 post 请求axios.putForm(url[, data[, config]])使用 multipart/form-data 范例发起 put 请求axios.patchForm(url[, data[, config]])使用 multipart/form-data 范例发起 patch 请求

示例代码：

使用axois发送一个普通请求：

// 发起一个 GET 请求 (默认请求方式)
axios('/user/12345');
// 发起一个 GET 请求 (默认请求方式)
axios('/user/12345');
// 发起一个 GET 请求 (默认请求方式)
axios('/user/12345');

复制代码

执行GET请求：

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.finally(function () {
// 总是会执行
});

复制代码

携带参数：

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// 总是会执行
});

复制代码

axios的响应数据如下：

{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 是服务器响应头
// 所有的 header 名称都是小写，而且可以使用方括号语法访问
// 例如: `response.headers['content-type']`
headers: {},
// `config` 是 `axios` 请求的配置信息
config: {},
// `request` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects)，
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
}

复制代码

5.2.1 搭建WEB工程

1）pom.xml：

<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.1.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
</dependencies>

复制代码

2）entity：

package com.dfbz.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* @author lscl
* @version 1.0
* @intro:
*/
@AllArgsConstructor
@NoArgsConstructor
@Data
public class Book {
private Integer id;
private String name;
private String author;
}

复制代码

3）Controller：

package com.dfbz.controller;
import com.dfbz.entity.Book;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
/**
* @author lscl
* @version 1.0
* @intro:
*/
@RestController
@RequestMapping("/book")
public class BookController {
@PostMapping("/upload")
public Map save(MultipartFile pic, HttpServletRequest request) throws Exception{
String realPath = "D:/000";
// 前端上传的文件名称
String fileName = pic.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf("."));
String newFileName = System.currentTimeMillis() + suffix;
pic.transferTo(new File(realPath + "/" + newFileName));
String url = "http://localhost:8080/upload/" + newFileName;
return new HashMap(){{
put("flag",true);
put("message","图片上传成功");
put("statusCode","200");
put("picUrl",url);
}};
}
@PostMapping
public Map save(@RequestBody Book book){
return new HashMap(){{
put("flag",true);
put("message","新增成功");
put("book", book);
put("statusCode","200");
}};
}
@DeleteMapping("{id}")
public Map delete(@PathVariable Integer id){
return new HashMap(){{
put("flag",true);
put("message","删除成功");
put("id", id);
put("statusCode","200");
}};
}
@PutMapping("{id}")
public Map update(@PathVariable Integer id,@RequestBody Book book){
return new HashMap(){{
put("flag",true);
put("message","修改成功");
put("id", id);
put("book", book);
put("statusCode","200");
}};
}
@GetMapping
public Map findAll(){
int i=1/0;
return new HashMap(){{
put("flag",true);
put("message","查询成功");
put("BookList",
Arrays.asList(
new Book(1,"《大学》","曾子"),
new Book(2,"《庄子》","庄子"),
new Book(2,"《道德经》","老子")
)
);
put("statusCode","200");
}};
}
}

复制代码

5.2.2 使用axios发送请求

demo01.html：

<body>
<div id="box">
<button @click="save">save</button>
<hr>
<button @click="deleteById('10')">deleteById</button>
<hr>
<button @click="update('100')">update</button>
<hr>
<button @click="findAll">findAll</button>
<hr>
</div>
<script>
new Vue({
el: "#box",
data: {},
methods: {
save: function () { // save
axios({
url: "/book",
method: "post",
data: {
id: 1,
name: "《论语》",
author: "孔子"
}
}).then(function (response) {
console.log(response);
})
},
deleteById: function (id) { // deleteById
axios("/book/"+id,{
method: "delete"
}).then(function (response) {
console.log(response);
})
},
update: function (id) { // update
axios.request({
url: "/book/"+id,
method: "put",
data: {
id: 2,
name: "《孟子》",
author: "孟子"
}
}).then(function (response) {
console.log(response);
})
},
findAll: function () { // findAll
// 默认发送GET请求
axios("/book").then(function (response) {
console.log(response);
})
}
}
})
</script>
</body>

复制代码

demo02.html

<body>
<div id="box">
<button @click="save">save</button>
<hr>
<button @click="deleteById('10')">deleteById</button>
<hr>
<button @click="update('100')">update</button>
<hr>
<button @click="findAll">findAll</button>
<hr>
</div>
<script>
new Vue({
el: "#box",
data: {},
methods: {
save() {
axios.post("/book", {id: 10, name: "《永乐大典》", author: "解缙"}).then(function (res) {
// data是服务端响应的数据
console.log(res.data)
}).catch(function (err) {
console.log(err);
});
},
deleteById(id) {
axios.delete("/book/" + id).then(function (res) {
console.log(res.data)
}).catch(function (err) {
console.log(err);
});
},
update(id) {
axios.put("/book/" + id, {id: 10, name: "《天工开物》", author: "宋应星"}).then(function (res) {
console.log(res.data)
}).catch(function (err) {
console.log(err);
});
},
findAll() {
axios.get("/book").then(function (res) {
console.log(res.data)
}).catch(function (err) {
console.log(err); // 异常信息
});
}
}
})
</script>
</body>

复制代码

demo03.html

<body>
<div id="box">
<input type="file" id="file">
<button @click="upload">上传文件</button>
</div>
<script>
new Vue({
el: "#box",
data: {},
methods: {
upload() {
// 构建一个multipart/form-data的请求，用于上传文件
axios.postForm("http://localhost:8080/book/upload",
// 上传的文件对象，需要用FormData包装一下
{
pic: document.getElementById("file").files[0]
}
).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>

复制代码

5.3 axios配置

我们可以指定axios的默认配置，这些配置将作用于每个axios请求。配置如下：

// 创建一个axios实例
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
//可用的配置项如下：
{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get', // 默认值
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 数组中最后一个函数必须返回一个字符串，一个Buffer实例，ArrayBuffer，FormData，或 Stream
// 你可以修改请求头。
transformRequest: [function (data, headers) {
// 对发送的 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对接收的 data 进行任意转换处理
return data;
}],
// 自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是与请求一起发送的 URL 参数
// 必须是一个简单对象或 URLSearchParams 对象
params: {
ID: 12345
},
// `paramsSerializer`是可选方法，主要用于序列化`params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作为请求体被发送的数据
// 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
// 在没有设置 `transformRequest` 时，则必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属: FormData, File, Blob
// - Node 专属: Stream, Buffer
data: {
firstName: 'Fred'
},
// 发送请求体数据的可选语法
// 请求方式 post
// 只有 value 会被发送，key 则不会
data: 'Country=Brasil&City=Belo Horizonte',
// `timeout` 指定请求超时的毫秒数。
// 如果请求时间超过 `timeout` 的值，则请求会被中断
timeout: 1000, // 默认值是 `0` (永不超时)
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // default
// `adapter` 允许自定义处理请求，这使测试更加容易。
// 返回一个 promise 并提供一个有效的响应（参见 lib/adapters/README.md）。
adapter: function (config) {
/* ... */
},
// `auth` HTTP Basic Auth
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示浏览器将要响应的数据类型
// 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
// 浏览器专属：'blob'
responseType: 'json', // 默认值
// `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
// 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // 默认值
// `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
xsrfCookieName: 'XSRF-TOKEN', // 默认值
// `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
// `onUploadProgress` 允许为上传处理进度事件
// 浏览器专属
onUploadProgress: function (progressEvent) {
// 处理原生进度事件
},
// `onDownloadProgress` 允许为下载处理进度事件
// 浏览器专属
onDownloadProgress: function (progressEvent) {
// 处理原生进度事件
},
// `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
maxContentLength: 2000,
// `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
maxBodyLength: 2000,
// `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
// 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
// 则promise 将会 resolved，否则是 rejected。
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认值
},
// `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
// 如果设置为0，则不会进行重定向
maxRedirects: 5, // 默认值
// `socketPath` 定义了在node.js中使用的UNIX套接字。
// e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
// 只能指定 `socketPath` 或 `proxy` 。
// 若都指定，这使用 `socketPath` 。
socketPath: null, // default
// `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
// and https requests, respectively, in node.js. This allows options to be added like
// `keepAlive` that are not enabled by default.
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// `proxy` 定义了代理服务器的主机名，端口和协议。
// 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
// 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
// `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
// 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
// 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
proxy: {
protocol: 'https',
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// see https://axios-http.com/zh/docs/cancellation
cancelToken: new CancelToken(function (cancel) {
}),
// `decompress` indicates whether or not the response body should be decompressed
// automatically. If set to `true` will also remove the 'content-encoding' header
// from the responses objects of all decompressed responses
// - Node only (XHR cannot turn off decompression)
decompress: true // 默认值
}

复制代码

配置axios参数：

// 创建一个axios实例,设置该实例的配置
const instance = axios.create({
// 请求地址
baseURL: 'http://localhost:8080/',
// 请求超时时间
timeout: 1000,
// 自定义请求头
headers: {'X-Custom-Header-Username': 'xiaohui',"X-Custom-Header-Password":"admin"}
});
// 设置全局的axios默认配置
axios.defaults.baseURL = 'http://localhost:8080/';
axios.defaults.headers['X-Custom-Header-Username'] = "xiaolan";
axios.defaults.headers['X-Custom-Header-Password'] = "123456";

复制代码

5.4 axios拦截器

axios 拦截器允许在请求被发送之前或响应被处理之后执行某些操作。拦截器可以用来添加全局的行为，比方在每个请求中自动加入认证信息、处理错误响应、重试失败的请求等。通过使用拦截器，可以将一些通用的操作抽象出来，从而避免在每个请求中重复雷同的代码。
请求拦截器：

/**
* 添加请求拦截器
* config: 请求的配置对象
*/
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log("请求拦截器执行...", config);
// 添加自定义的请求头信息
config.headers["x-custom-header-username"] = "xiaohui";
config.headers["x-custom-header-password"] = "admin";
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

复制代码

响应拦截器：

/**
* 添加响应拦截器
* response: 响应对象
*/
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
// 2xx 范围内的状态码都会触发该函数。
console.log("响应拦截器执行...", response);
response.data.msg = "我是响应拦截器返回的消息";
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

零底子一篇打通Vue极速通关教程

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云