网站改不了分类,网站建设 天佩营销,wordpress页面打开404,潍坊网站建设哪家强文章目录 写给零基础看的Vue极速掌握教程第1章 Vue简介1.1 Vue 概述1.2 MVVM 模式1.3 WebStorm开发工具1.3.1 WebStorm简介1.3.2 集成Vue开发调试工具 第2章 Vue的事件绑定2.1 Vue基本使用2.1.1 插值表达式2.1.2 注意事项 2.2 Vue事件绑定2.1.1 点击事件2.2.2 键盘事件2.2.3 移… 文章目录 写给零基础看的Vue极速掌握教程第1章 Vue简介1.1 Vue 概述1.2 MVVM 模式1.3 WebStorm开发工具1.3.1 WebStorm简介1.3.2 集成Vue开发调试工具 第2章 Vue的事件绑定2.1 Vue基本使用2.1.1 插值表达式2.1.2 注意事项 2.2 Vue事件绑定2.1.1 点击事件2.2.2 键盘事件2.2.3 移动事件 2.3 按键修饰符2.3.1 默认的按键修饰符2.3.2 自定义按键修饰符2.3.3 自定义按键修饰符注意事项2.3.4 自定义别名 2.4 事件修饰符 第3章 Vue常用指令3.1 v-text与v-html3.2 v-for3.3 v-if与v-show3.4 MVVM双向绑定3.4.1 v-bind3.4.2 v-model 第4章 Vue的生命周期4.1 Vue的生命周期简介4.2 Vue的生命周期钩子4.2.1 beforeCreate/created4.2.2 beforeMount/mounted4.2.3 beforeUpdate/updated4.2.4 beforeDestory/destroyed 第5章 Vue的ajax5.1 vue-resource5.2 Promise5.2.1 回调地狱5.2.2 Promise的使用5.2.3 Promise改造Ajax请求 5.2 axios5.2.1 搭建WEB工程5.2.2 使用axios发送请求 5.3 axios配置5.4 axios拦截器 写给零基础看的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 模式
MVVMModel-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
htmlheadmeta charsetutf-8title/title/headbody!-- View: 视图 --select name iddepts/select/body/htmlscript typetext/javascript$.get(/dept/findAll,function(res){ // res: 后端响应的数据(Model)var deptHtml;for(var dept of res){ deptHtmloption valuedept.iddept.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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/vue.js/script/headbodydiv idapp{{msg}}/div/bodyscriptnew 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 }}/pp{{ 1 2 }}/pp{{ ok ? YES : NO }}/p
小练习
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlescript srcjs/vue.min.js typetext/javascript charsetutf-8/script/headbody!-- 准备一个容器 --div idboxh3number:{{number}}/h3h3message:{{message}}/h3h3flag:{{flag}}/h3h3car:{{car}}/h3h3season:{{season}}/h3/div/bodyscript typetext/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只能绑定一个组件即使选择器可以选择多个组件那么也不会生效
bodydiv classbox{{msg}}/divdiv classbox{{msg}}/divscript typetext/javascriptnew Vue({el: .box, // 通过class选择器选择组件data: {msg:Hello Vue!}})/script/body 当然我们也可以创建多个Vue实例来接管多个组件。
body
div idbox1{{msg}}
/divdiv idbox2{{msg}}
/divscript typetext/javascriptnew 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:clickdoSomething点击我/button
当用户点击按钮时将会调用 Vue 实例中的 methods 属性里定义的 doSomething 方法。
简写方式
为了简化书写Vue 还提供了一个简短的语法来代替完整的 v-on 写法。只需要使用 符号加上事件名即可。
button clickdoSomething点击我/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 idboxh3单击事件/h3pa hrefhttp://www.baidu.com v-on:clickfun1我是按钮1/a/ppa hrefhttp://www.baidu.com v-on:clickfun2(hello)我是按钮2/a/ppa hrefhttp://www.baidu.com v-on:clickfun3我是按钮3/a/p!-- v-on: 可以简写成 --!-- 如果event参数在后面,则必须显示的传递 --pa hrefhttp://www.baidu.com clickfun4(hello,$event)我是按钮4/a/ph3双击事件/h3pbutton v-on:dblclickfun5双击事件/button/p/divscript typetext/javascriptnew 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鼠标抬起事件
示例代码
bodydiv idboxinput typetext v-on:keydowndownbr !-- 键盘按下事件 --input typetext v-on:keyupup !-- 键盘抬起事件 --/divscript typetext/javascriptnew Vue({el: #box,data: {},methods: {down() { // 简写方式console.log(键盘按下了)},up(){console.log(键盘抬起了)}}})/script/body
2.2.3 移动事件
v-on:mouseover鼠标移入事件v-on:mouseout鼠标移出事件
示例代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/script/headbodydiv idbox stylewidth: 300px;height: 200px;background-color: gray; v-on:mousemoveinter v-on:mouseoutouter/divscript typetext/javascriptnew 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
示例代码
bodydiv idboxpinput typetext v-on:keyupfun1/ppinput typetext v-on:keyup.enterfun2enter/ppinput typetext v-on:keyup.deletefun3delete/ppinput typetext v-on:keyup.escfun4esc/ppinput typetext v-on:keydown.tabfun5tab/p/divscript typetext/javascriptnew 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
headmeta charsetutf-8title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/script/headbody
div idboxpinput typetext v-on:keyupfun1/ppinput typetext v-on:keyup.Controlfun2ctrl/p!-- 注意需要【短横线命名】--pinput typetext v-on:keyup.caps-lockfun3CapsLock/ppinput typetext v-on:keyup.deletefun4delete/p/divscript typetext/javascriptnew 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
htmlheadmeta charsetutf-8title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/script/headbodydiv idboxpinput typetext v-on:keyupfun1/ppinput typetext v-on:keyup.Controlfun2ctrl/p pinput typetext v-on:keyup.Altfun3alt/p !-- 监听keyup时需要按其他键才能触发事件 --pinput typetext v-on:keyup.Shiftfun4shift/p !-- 监听keyup时需要按其他键才能触发事件 --pinput typetext v-on:keyup.Metafun5meta/p !-- 监听keyup时需要按其他键才能触发事件 --pinput typetext v-on:keydown.0fun60/p !-- 只能监听数字0 --/divscript typetext/javascriptnew 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
htmlheadmeta charsetutf-8title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/script/headbodydiv idboxpinput typetext v-on:keyupfun1/ppinput typetext v-on:keyup.huichefun2回车/p pinput typetext v-on:keyup.konggefun3空格/p pinput typetext v-on:keyup.windowsfun4windows/p /divscript typetext/javascriptVue.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 idbox!--a标签的默认事件被阻止了,所以不会进行链接跳转--h3阻止默认事件/h3pa hrefhttp://www.baidu.com v-on:click.preventfun1百度一下/a/p/divscript typetext/javascriptnew Vue({el: #box,data: {},methods: {fun1() {alert(Hello Baidu)}}})
/script/body
2阻止冒泡事件。
body
div idbox!-- 先点击到blue,然后向上传递给上层的空间(red)--h3未阻止冒泡事件/h3div v-on:clickfun1 stylewidth: 150px;height: 150px;background-color: red;div v-on:clickfun2 stylewidth: 100px;height: 100px;background-color: blue;/div/div!--只有blue被触发时间了,不会向上传递事件,red不会触发点击事件--h3阻止冒泡事件/h3div v-on:clickfun1 stylewidth: 150px;height: 150px;background-color: red;div v-on:click.stopfun2 stylewidth: 100px;height: 100px;background-color: blue;/div/div/divscript typetext/javascriptnew Vue({el: #box,data: {},methods: {fun1() {console.log(red)},fun2() {console.log(blue)}}})
/script/body
3事件捕捉。
body
div idbox!--先blue(先捕捉到)再red--h3未进行事件捕捉/h3div v-on:clickfun1 stylewidth: 150px;height: 150px;background-color: red;div v-on:clickfun2 stylewidth: 100px;height: 100px;background-color: blue;/div/div!--先bred(先捕捉到)再blue--h3进行了事件捕捉/h3div v-on:click.capturefun1 stylewidth: 150px;height: 150px;background-color: red;div v-on:clickfun2 stylewidth: 100px;height: 100px;background-color: blue;/div/div/divscript typetext/javascriptnew Vue({el: #box,data: {},methods: {fun1() {console.log(red)},fun2() {console.log(blue)}}})
/script/body
4self修饰符。
body
div idbox!-- 默认情况下,点击了blue事件会进行冒泡传递给red,但是用户并非实际点击red,而是冒泡传递过去的 --h5没有使用self修饰符/h5div v-on:clickfun1 stylewidth: 150px;height: 150px;background-color: red;div v-on:clickfun2 stylewidth: 100px;height: 100px;background-color: blue;/div/divh5使用了self修饰符/h5!-- 只有真正的点击自己时才触发事件,不接收冒泡传递过来的事件 --div v-on:click.selffun1 stylewidth: 150px;height: 150px;background-color: red;div v-on:clickfun2 stylewidth: 100px;height: 100px;background-color: blue;/div/div/divscript typetext/javascriptnew Vue({el: #box,data: {},methods: {fun1(event) {console.log(event.target)},fun2(event) {console.log(event.target)}}})
/script/body
6左、右、中键点击事件。
body
div idboxh3单击事件/h3button v-on:click.leftfun1单击左键/buttonbutton v-on:click.rightfun2单击右键/buttonbutton v-on:click.middlefun3单击中键/button/divscript typetext/javascriptnew Vue({el: #box,data: {},methods: {fun1() {console.log(您点击了左键)},fun2(event) {console.log(您点击了右键)event.preventDefault() //阻止默认事件(浏览器右键菜单)},fun3() {console.log(您点击了中键)}}})
/script/body
!DOCTYPE html
html
headmeta charsetutf-8title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/scriptstyleli {height: 100px;}/style/headbody styleheight: 1000px;
div idboxh3阻止默认事件/h3pa hrefhttp://www.baidu.com v-on:click.preventfun1百度一下/a/ph3阻止事件冒泡/h3div v-on:clickfun2 stylewidth: 150px;height: 150px;background-color: red;div v-on:click.stopfun3 stylewidth: 100px;height: 100px;background-color: blue;/div/divh3只触发一次事件/h3pbutton v-on:click.oncefun4我是按钮/button/ph5事件捕获/h5!-- 默认情况下,先进行事件冒泡,再进行事件捕获capture: 先进行事件捕获,在进行事件冒泡--div v-on:click.capturefun5(red) stylewidth: 150px;height: 150px;background-color: red;div v-on:clickfun6(blue) stylewidth: 100px;height: 100px;background-color: blue;/div/divh5self修饰符/h5!-- 只有真正的点击自己时才触发事件(冒泡不能触发事件) --div v-on:click.selffun7 stylewidth: 150px;height: 150px;background-color: red;div v-on:clickfun8 stylewidth: 100px;height: 100px;background-color: blue;/div/divh5passvie/h5!-- 事件的默认行为立即执行无需等待事件回调执行完毕 --ul v-on:wheel.passviefun9 stylewidth: 200px;height: 200px;background-color: red;overflow: scroll;li1/lili2/lili3/lili4/li/ulh5.left/h5button v-on:click.leftfun10left/button/divscript typetext/javascriptnew 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 styleheight: 1000px;
div idboxdiv v-texttxt/divdiv v-htmltxt/div/divscript typetext/javascriptnew Vue({el: #box,data: {txt: h1Hello/h1}})
/script/body
3.2 v-for
v-for指令用于遍历使用
body
div idboxh3遍历数组/h3ulli v-for(city,index) in cities{{city}}---{{index}}/li/ulh3遍历对象/h3ulli v-for(val,key) in book{{key}}---{{val}}/li/ulh3遍历对象数组/h3ul!-- 遍历对象数组时,需要分配:key,取一个唯一且能标识这条记录的值(id) --li v-for(car,index) in cars :keycar.idh3index: {{index}}/h3pid:{{car.id}}/ppbrand:{{car.brand}}/ppname:{{car.name}}/p/li/ul/divscript typetext/javascriptnew 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 idappbutton clickfun1v-if效果/buttonbutton clickfun2v-show效果/buttonhr!-- v-if决定元素是否存在DOM中--span v-ifflag_if小灰/spanhr!-- v-show只是给元素添加了display:none样式元素仍然存在DOM中--span v-showflag_showxiaohui/span/divscriptnew 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 idappp v-bind:titletestTitle绑定titlte属性/p!-- v-bind:title可以简写成:title --p :titletestTitle :styletestStyle绑定title和sytle属性/pinput typetext :valuetestValuehra :hrefurl v-bind::colortestColor百度一下/ahr!--插入值写法--a v-bind{href:http://www.baidu.com?idid}百度一下/ahr
/divscriptnew 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
headmeta charsetutf-8title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/script/headbody
div idappinput typetext v-model:valuetestValue
/divscriptnew 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
beforeCreateVue生命周期的第一个函数在Vue对象创建之前执行初始化Vue自身的事件、注册Vue示例的生命周期函数等在该阶段props、data、method都处于不可用状态 1创建VUE对象之前执行2data中的数据还未初始化3el还未关联到对应的id还未挂载DOM4{{}}表达式中的内容还没更新真实DOM还未渲染 created创建VUE对象之后执行该阶段Vue示例已经被创建成功初始化了props、data、methods等功能但是Vue还未挂载dom元素还未进行绑定 1创建VUE对象之后执行2data中的数据已经初始化3el还未关联到对应的id4{{}}表达式中的内容还没更新真实DOM还未渲染
【示例代码1-观察dom的变化】
body
div idbox{{message}}
/divscriptnew Vue({el: #box,data: {message: Hello World},// 在beforeCreate阶段的Vue,数据未初始化、dom未挂载、dom也未渲染beforeCreate: function () {console.log(创建vue实例前【beforeCreate】);console.log(data 数据 this.message); // undefinedconsole.log(挂载的对象 this.$el); // undefinedconsole.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 Worldconsole.log(挂载的对象 this.$el); // undefinedconsole.log(真实dom结构 document.getElementById(box).innerHTML); // {{message}}console.log(------------------);}});
/script/body 【示例代码2-调用Vue数据】
body
div idbox{{message}}
/divscriptnew 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对象挂载之前执行2data中的数据已经初始化3el已经关联到对应对象挂载了DOM4{{}}表达式中的内容还没更新真实DOM还未渲染 mounted对象挂载之后执行,此时{{}}表达已经加载执行完mounted之后开始正常执行js代码 1对象挂载之后执行2data中的数据已经初始化3el已经关联到对应对象4{{}}表达式中的内容已经更新真实DOM已经渲染
【示例代码1-观察dom的变化】
body
div idbox{{message}}
/divscriptvar 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 Worldconsole.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 Worldconsole.log(挂载的对象 this.$el); // [object HTMLDivElement]console.log(真实dom结构 document.getElementById(box).innerHTML); // Hello Worldconsole.log(------------------);}});
/script/body 4.2.3 beforeUpdate/updated
当修改了Vue中的数据时将会触发beforeUpdate与updated方法。
beforeUpdateVue数据更新前执行此时data中的数据已经更新但是{{}}表达式中引用的还没有更新还未渲染到DOM上。updatedVue数据更新后执行{{}}表达式中引用也更新。
【示例代码-观察数据变更前后的值】
body
div idbox{{message}}brbutton v-on:clickfun1()改变数据/button/divscriptvar 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
beforeDestoryvue对象销毁前执行在该方法中Vue中注册的组件、侦听器、事件监听等都处于可用状态一般在此阶段释放其他资源destroyedvue对象销毁后执行在该方法中已经销毁了Vue中注册的组件、侦听器、事件监听等
【示例代码-观察Vue实例销毁前后的变化】
body
div idbox{{message}}hrbutton clickexit销毁VM/button/divscriptvar vm new Vue({el: #box,data: {message: Hello World},methods: {exit(){// 销毁vmthis.$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);elseresolve(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/axiosaxios官方文档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?ID12345).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工程
1pom.xml
parentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.0.1.RELEASE/version/parentdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependency/dependencies
2entity
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;
}3Controller
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);}};}PostMappingpublic 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);}};}GetMappingpublic Map findAll(){int i1/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 idboxbutton clicksavesave/buttonhrbutton clickdeleteById(10)deleteById/buttonhrbutton clickupdate(100)update/buttonhrbutton clickfindAllfindAll/buttonhr
/divscriptnew Vue({el: #box,data: {},methods: {save: function () { // saveaxios({url: /book,method: post,data: {id: 1,name: 《论语》,author: 孔子}}).then(function (response) {console.log(response);})},deleteById: function (id) { // deleteByIdaxios(/book/id,{method: delete}).then(function (response) {console.log(response);})},update: function (id) { // updateaxios.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 idboxbutton clicksavesave/buttonhrbutton clickdeleteById(10)deleteById/buttonhrbutton clickupdate(100)update/buttonhrbutton clickfindAllfindAll/buttonhr
/divscriptnew 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 idboxinput typefile idfilebutton clickupload上传文件/button/divscriptnew 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 是用于请求的服务器 URLurl: /user,// method 是创建请求时使用的方法method: get, // 默认值// baseURL 将自动加在 url 前面除非 url 是一个绝对 URL。// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URLbaseURL: https://some-domain.com/api/,// transformRequest 允许在向服务器发送前修改请求数据// 它只能用于 PUT, POST 和 PATCH 这几个请求方法// 数组中最后一个函数必须返回一个字符串 一个Buffer实例ArrayBufferFormData或 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, Bufferdata: {firstName: Fred},// 发送请求体数据的可选语法// 请求方式 post// 只有 value 会被发送key 则不会data: CountryBrasilCityBelo Horizonte,// timeout 指定请求超时的毫秒数。// 如果请求时间超过 timeout 的值则请求会被中断timeout: 1000, // 默认值是 0 (永不超时)// withCredentials 表示跨域请求时是否需要使用凭证withCredentials: false, // default// adapter 允许自定义处理请求这使测试更加容易。// 返回一个 promise 并提供一个有效的响应 参见 lib/adapters/README.md。adapter: function (config) {/* ... */},// auth HTTP Basic Authauth: {username: janedoe,password: s00pers3cret},// responseType 表示浏览器将要响应的数据类型// 选项包括: arraybuffer, document, json, text, stream// 浏览器专属blobresponseType: json, // 默认值// responseEncoding 表示用于解码响应的编码 (Node.js 专属)// 注意忽略 responseType 的值为 stream或者是客户端请求// Note: Ignored for responseType of stream or client-side requestsresponseEncoding: 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 为httpsproxy: {protocol: https,host: 127.0.0.1,port: 9000,auth: {username: mikeymike,password: rapunz3l}},// see https://axios-http.com/zh/docs/cancellationcancelToken: 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);
});
