node.js 遵循了 CommonJS 的模块化规范。其中:
模块化的好处:
大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用,利人利己。
在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。
但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!
ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
ES6 模块化规范中定义:
node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照如下两个步骤进行配置:
① 确保安装了 v14.15.1 或更高版本的 node.js
② 在 package.json 的根节点中添加 “type”: “module” 节点
ES6 的模块化主要包含如下 3 种用法:
① 默认导出与默认导入
② 按需导出与按需导入
③ 直接导入并执行模块中的代码
默认导出的语法: export default
默认导出的成员
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1D3419Gt-1650958972713)(D:\A_study\Vue\vue3_study_image\a1.png)]
默认导入的语法: import 接收名称 from '模块标识符'
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oIJfr8I-1650958972714)(D:\A_study\Vue\vue3_study_image\a2.png)]
每个模块中,只允许使用唯一的一次 export default,否则会报错!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t6vO6NM8-1650958972715)(D:\A_study\Vue\vue3_study_image\a3.png)]
默认导入时的接收名称可以任意名称,只要是合法的成员名称即可:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1VDU6VA-1650958972715)(D:\A_study\Vue\vue3_study_image\a4.png)]
按需导出的语法: export 按需导出的成员
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51gd3J15-1650958972716)(D:\A_study\Vue\vue3_study_image\a5.png)]
按需导入的语法: import { s1 } from '模块标识符'
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lSYoDKml-1650958972716)(D:\A_study\Vue\vue3_study_image\a6.png)]
① 每个模块中可以使用多次按需导出
② 按需导入的成员名称必须和按需导出的名称保持一致
③ 按需导入时,可以使用 as 关键字进行重命名
④ 按需导入可以和默认导入一起使用
如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导入并执行模块代码,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X6VXbEG7-1650958972717)(D:\A_study\Vue\vue3_study_image\a7.png)]
多层回调函数的相互嵌套,就形成了回调函数。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qu9ND88m-1650958972717)(D:\A_study\Vue\vue3_study_image\a8.png)]
为了解决回调函数的问题,ES6(ECMAScript 2015)中新增了 Promise 的概念。
① Promise 是一个构造函数
const p = new Promise()
② Promise.prototype 上包含一个 .then()
方法
p.then()
③ .then() 方法用来预先指定成功和失败的回调函数
p.then(result => { }, error => { })
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EBZF2uTy-1650958972718)(D:\A_study\Vue\vue3_study_image\a9.png)]
由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件,不支持 Promise 的调用方式。因此,需要先运行如下的命令,安装 then-fs 这个第三方包,从而支持我们基于 Promise 的方式读取文件的内容:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZJXwKvj-1650958972718)(D:\A_study\Vue\vue3_study_image\a10.png)]
调用 then-fs 提供的 readFile() 方法,可以异步地读取文件的内容,它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNdXVDWY-1650958972719)(D:\A_study\Vue\vue3_study_image\a11.png)]
注意:上述的代码无法保证文件的读取顺序,需要做进一步的改进!
import thenFs from 'then-fs'
thenFs.readFile('./files/1.txt','utf8').then((r1) => {console.log(r1)})
thenFs.readFile('./files/2.txt','utf8').then((r2) => {console.log(r2)})
thenFs.readFile('./files/3.txt','utf8').then((r3) => {console.log(r3)})
如果上一个 .then() 方法中返回了一个新的 Promise 实例对象,则可以通过下一个 .then()
继续进行处理。通过 .then()
方法的链式调用,就解决了回调地狱的问题
Promise 支持链式调用,从而来解决回调地狱的问题。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMQFuuCw-1650958972719)(D:\A_study\Vue\vue3_study_image\a12.png)]
在 Promise 的链式操作中如果发生了错误,可以使用 Promise.prototype.catch 方法进行捕获和处理:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MAGemzv4-1650958972719)(D:\A_study\Vue\vue3_study_image\a13.png)]
如果不希望前面的错误导致后续的 .then 无法正常执行,则可以将 .catch 的调用提前,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWGD8OkA-1650958972720)(D:\A_study\Vue\vue3_study_image\a14.png)]
Promise.all() 方法会发起并行的 Promise 异步操作,等所有的异步操作全部结束后才会执行下一步的.then
操作(等待机制)。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hyz87Iz-1650958972720)(D:\A_study\Vue\vue3_study_image\a15.png)]
注意:数组中 Promise 实例的顺序,就是最终结果的顺序!
Promise.race() 方法会发起并行的 Promise 异步操作,只要任何一个异步操作完成,就立即执行下一步的 .then 操作(赛跑机制)。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbZwfRnK-1650958972720)(D:\A_study\Vue\vue3_study_image\a16.png)]
方法的封装要求:
① 方法的名称要定义为 getFile
② 方法接收一个形参 fpath,表示要读取的文件的路径
③ 方法的返回值为 Promise 实例对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMAg7w0f-1650958972721)(D:\A_study\Vue\vue3_study_image\a17.png)]
注意:第 5 行代码中的 new Promise() 只是创建了一个形式上的异步操作
如果想要创建具体的异步操作,则需要在 new Promise() 构造函数期间,传递一个 function 函数,将具体的异步操作定义到 function 函数内部。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cERhHMRe-1650958972721)(D:\A_study\Vue\vue3_study_image\a18.png)]
通过 .then() 指定的成功和失败的回调函数,可以在 function 的形参中进行接收,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tFBObAN-1650958972722)(D:\A_study\Vue\vue3_study_image\a19.png)]
Promise 异步操作的结果,可以调用 resolve 或 reject 回调函数进行处理。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kipoZHkW-1650958972722)(D:\A_study\Vue\vue3_study_image\a20.png)]
async/await 是 ES8(ECMAScript 2017)引入的新语法,用来简化 Promise 异步操作。在async/await 出现之前,开发者只能通过链式 .then()
的方式处理 Promise 异步操作。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2eC4cca-1650958972722)(D:\A_study\Vue\vue3_study_image\a21.png)]
使用 async/await 简化 Promise 异步操作的示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyHw8cV6-1650958972723)(D:\A_study\Vue\vue3_study_image\a22.png)]
① 如果在 function 中使用了 await,则 function 必须被 async 修饰
② 在 async 方法中,第一个 await 之前的代码会同步执行,await 之后的代码会异步执行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SozW4wVQ-1650958972723)(D:\A_study\Vue\vue3_study_image\a23.png)]
JavaScript 是一门单线程执行的编程语言。也就是说,同一时间只能做一件事情。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dcC9kLm-1650958972723)(D:\A_study\Vue\vue3_study_image\a24.png)]
单线程执行任务队列的问题:
为了防止某个耗时任务导致程序假死的问题,JavaScript 把待执行的任务分为了两类:
① 同步任务(synchronous)
② 异步任务(asynchronous)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOHWtB0b-1650958972724)(D:\A_study\Vue\vue3_study_image\a25.png)]
① 同步任务由 JavaScript 主线程次序执行
② 异步任务委托给宿主环境执行
③ 已完成的异步任务对应的回调函数,会被
加入到任务队列中等待执行
④ JavaScript 主线程的执行栈被清空后,会
读取任务队列中的回调函数,次序执行
⑤ JavaScript 主线程不断重复上面的第 4 步
JavaScript 主线程从“任务队列”中读取异步任务的回调函数,放到执行栈中依次执行。这个过程是循环不断的,所以整个的这种运行机制又称为 EventLoop(事件循环)。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1JbV8lNo-1650958972724)(D:\A_study\Vue\vue3_study_image\a26.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7XniGMec-1650958972724)(D:\A_study\Vue\vue3_study_image\a27.png)]
正确的输出结果:ADCB。其中:
JavaScript 把异步任务又做了进一步的划分,异步任务又分为两类,分别是:
① 宏任务(macrotask)
② 微任务(microtask)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9L1fTOUL-1650958972725)(D:\A_study\Vue\vue3_study_image\a28.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O4xzS6Rw-1650958972725)(D:\A_study\Vue\vue3_study_image\a29.png)]
每一个宏任务执行完之后,都会检查是否存在待执行的微任务,如果有,则执行完所有微任务之后,再继续执行下一个宏任务。
① 小云和小腾去银行办业务。首先,需要取号之后进行排队
② 假设当前银行网点只有一个柜员,小云在办理存款业务时,小腾只能等待
③ 小云办完存款业务后,柜员询问他是否还想办理其它业务?
④ 小云告诉柜员:想要买理财产品、再办个信用卡、最后再兑换点马年纪念币?
⑤ 小云离开柜台后,柜员开始为小腾办理业务
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3IJ5LMxa-1650958972726)(D:\A_study\Vue\vue3_study_image\a30.png)]
请分析以下代码输出的顺序(代码较长,截取成了左中右 3 个部分)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1TxoMFD-1650958972726)(D:\A_study\Vue\vue3_study_image\a31.png)]
基于 MySQL 数据库 + Express 对外提供用户列表的 API 接口服务。用到的技术点如下:
① 搭建项目的基本结构
② 创建基本的服务器
③ 创建 db 数据库操作模块
④ 创建 user_ctrl 业务模块
⑤ 创建 user_router 路由模块
① 启用 ES6 模块化支持
② 安装第三方依赖包
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mg6NPm0t-1650958972726)(D:\A_study\Vue\vue3_study_image\a32.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFXRw3HA-1650958972727)(D:\A_study\Vue\vue3_study_image\a33.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZfEeJyao-1650958972727)(D:\A_study\Vue\vue3_study_image\a34.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hu9EoYb0-1650958972728)(D:\A_study\Vue\vue3_study_image\a35.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4gNdEz8A-1650958972728)(D:\A_study\Vue\vue3_study_image\a36.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W1k7TGI9-1650958972729)(D:\A_study\Vue\vue3_study_image\a37.png)]
① 能够知道如何使用 ES6 的模块化语法
② 能够知道如何使用 Promise 解决回调地狱问题
③ 能够使用 async/await 简化 Promise 的调用
④ 能够说出什么是 EventLoop
⑤ 能够说出宏任务和微任务的执行顺序
SPA 单页面应用程序最显著的 3 个优点如下:
① 良好的交互体验
② 良好的前后端工作分离模式
③ 减轻服务器的压力
任何一种技术都有自己的局限性,对于 SPA 单页面应用程序来说,主要的缺点有如下两个:
① 首屏加载慢
② 不利于 SEO
vue 官方提供了两种快速创建工程化的 SPA 项目的方式:
① 基于 vite 创建 SPA 项目
② 基于 vue-cli 创建 SPA 项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HXbv4c0h-1650958972729)(D:\A_study\Vue\vue3_study_image\b1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEL9JaBf-1650958972729)(D:\A_study\Vue\vue3_study_image\b37.png)]
按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AA8q6AAg-1650958972730)(D:\A_study\Vue\vue3_study_image\b2.png)]
使用 vite 创建的项目结构如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RkN6LmFz-1650958972730)(D:\A_study\Vue\vue3_study_image\b3.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tXfdZe5q-1650958972731)(D:\A_study\Vue\vue3_study_image\b4.png)]
在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。其中:
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
清空 App.vue 的默认内容,并书写如下的模板结构:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MI27r6Z4-1650958972731)(D:\A_study\Vue\vue3_study_image\b5.png)]
打开 index.html 页面,确认预留了 el 区域:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MurCSYMR-1650958972731)(D:\A_study\Vue\vue3_study_image\b6.png)]
按照 vue 3.x 的标准用法,把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BGtlFGx-1650958972732)(D:\A_study\Vue\vue3_study_image\b7.png)]
组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。
例如:http://www.ibootstrap.cn/ 所展示的效果,就契合了组件化开发的思想。用户可以通过拖拽组件的方式,快速生成一个页面的布局结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPBrMNFM-1650958972732)(D:\A_study\Vue\vue3_study_image\b8.png)]
前端组件化开发的好处主要体现在以下两方面:
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件
每个 .vue 组件都由 3 部分构成,分别是:
其中,每个组件中必须包含 template 模板结构,而 script 行为和style 样式是可选的组成部分。
vue 规定:每个组件对应的模板结构,需要定义到 节点中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlJxdRsa-1650958972732)(D:\A_study\Vue\vue3_study_image\b9.png)]
注意: 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素。
在组件的 节点中,支持使用前面所学的指令语法,来辅助开发者渲染当前组件的 DOM 结构。代码示例如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aEQC7UpV-1650958972733)(D:\A_study\Vue\vue3_study_image\b10.png)]
在 vue 2.x 的版本中, 节点内的 DOM 结构仅支持单个根节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DLQXthWh-1650958972733)(D:\A_study\Vue\vue3_study_image\b11.png)]
vue 规定:组件内的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ARlOXUOU-1650958972733)(D:\A_study\Vue\vue3_study_image\b12.png)]
可以通过 name 节点为当前组件定义一个名称
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wLs3qcak-1650958972734)(D:\A_study\Vue\vue3_study_image\b13.png)]
vue 组件渲染期间需要用到的数据,可以定义在 data 节点中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Imt2vOCt-1650958972734)(D:\A_study\Vue\vue3_study_image\b14.png)]
vue 规定:组件中的 data 必须是一个函数,不能直接指向一个数据对象。因此在组件中定义 data 数据节点时,下面的方式是错误的:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNe8UOMa-1650958972734)(D:\A_study\Vue\vue3_study_image\b15.png)]
组件中的事件处理函数,必须定义到 methods 节点中,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YlyOBe5t-1650958972735)(D:\A_study\Vue\vue3_study_image\b16.png)]
vue 规定:组件内的 节点是可选的,开发者可以在
节点中编写样式美化当前组件的 UI 结构。
节点的基本结构如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TQXbS8Tf-1650958972735)(D:\A_study\Vue\vue3_study_image\b17.png)]
其中 标签上的 lang=“css” 属性是可选的,它表示所使用的样式语言。默认只支持普通的 css 语法,可选值还有 less、scss 等。
如果希望使用 less 语法编写组件的 style 样式,可以按照如下两个步骤进行配置:
① 运行 npm install less -D 命令安装依赖包,从而提供 less 语法的编译支持
② 在 标签上添加 lang=“less” 属性,即可使用 less 语法编写组件的样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Cdcsj8x-1650958972735)(D:\A_study\Vue\vue3_study_image\b18.png)]
组件之间可以进行相互的引用,例如:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KENgcylA-1650958972736)(D:\A_study\Vue\vue3_study_image\b19.png)]
vue 中组件的引用原则:先注册后使用。
vue 中注册组件的方式分为“全局注册”和“局部注册”两种,其中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nAAOF7TW-1650958972736)(D:\A_study\Vue\vue3_study_image\b20.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jgQuRUpP-1650958972736)(D:\A_study\Vue\vue3_study_image\b21.png)]
使用 app.component()
方法注册的全局组件,直接以标签的形式进行使用即可,例如:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHdeA7nH-1650958972737)(D:\A_study\Vue\vue3_study_image\b22.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mWd2Orbe-1650958972737)(D:\A_study\Vue\vue3_study_image\b23.png)]
应用场景:
如果某些组件在开发期间的使用频率很高,推荐进行全局注册;
如果某些组件只在特定的情况下会被用到,推荐进行局部注册。
在进行组件的注册时,定义组件注册名称的方式有两种:
① 使用 kebab-case 命名法(俗称短横线命名法,例如 my-swiper 和 my-search)
② 使用 PascalCase 命名法(俗称帕斯卡命名法或大驼峰命名法,例如 MySwiper 和 MySearch)
短横线命名法的特点:
必须严格按照短横线名称进行使用帕斯卡命名法的特点:
既可以严格按照帕斯卡名称进行使用,又可以转化为短横线名称进行使用
注意:在实际开发中,推荐使用帕斯卡命名法为组件注册名称,因为它的适用性更强。
在注册组件期间,除了可以直接提供组件的注册名称之外,还可以把组件的 name 属性作为注册后组件的名称,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LoidYHCK-1650958972737)(D:\A_study\Vue\vue3_study_image\b24.png)]
默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素
为每个组件分配唯一的自定义属性,在编写组件样式时,通过属 性选择器来控制样式的作用域,示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bpZJDbUA-1650958972738)(D:\A_study\Vue\vue3_study_image\b25.png)]
为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwZ14GLp-1650958972738)(D:\A_study\Vue\vue3_study_image\b26.png)]
如果给当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,可以使用 /deep/ 深度选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1pKkEvZ-1650958972738)(D:\A_study\Vue\vue3_study_image\b27.png)]
注意:/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。
为了提高组件的复用性,在封装 vue 组件时需要遵守如下的原则:
为了方便使用者为组件提供要展示的数据,vue 组件提供了 props 的概念。
props 是组件的自定义属性,组件的使用者可以通过 props 把数据传递到子组件内部,供子组件内部进行使用。代码示例如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-05P7myGC-1650958972739)(D:\A_study\Vue\vue3_study_image\b28.png)]
props 的作用:父组件通过 props 向子组件传递要展示的数据。
props 的好处:提高了组件的复用性。
在封装 vue 组件时,可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4bajkW0V-1650958972739)(D:\A_study\Vue\vue3_study_image\b29.png)]
如果父组件给子组件传递了未声明的 props 属性,则这些属性会被忽略,无法被子组件使用,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jjgCmCC-1650958972740)(D:\A_study\Vue\vue3_study_image\b30.png)]
可以使用 v-bind 属性绑定的形式,为组件动态绑定 props 的值,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2jNUZ7j-1650958972740)(D:\A_study\Vue\vue3_study_image\b31.png)]
组件中如果使用“camelCase (驼峰命名法)”声明了 props 属性的名称,则有两种方式为其绑定属性的值:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6CdVnK6-1650958972740)(D:\A_study\Vue\vue3_study_image\b32.png)]
在实际开发中经常会遇到动态操作元素样式的需求。因此,vue 允许开发者通过 v-bind 属性绑定指令,为元素动态绑定 class 属性的值和行内的 style 样式
可以通过三元表达式,动态的为元素绑定 class 的类名。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rEdnf9iM-1650958972741)(D:\A_study\Vue\vue3_study_image\b33.png)]
如果元素需要动态绑定多个 class 的类名,此时可以使用数组的语法格式:
!b33](D:\A_study\Vue\vue3_study_image\b33.png)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qi6vk7Zz-1650958972741)(D:\A_study\Vue\vue3_study_image\b34.png)]
使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5GOmpK1Z-1650958972741)(D:\A_study\Vue\vue3_study_image\b35.png)]
:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PqosxXIX-1650958972742)(D:\A_study\Vue\vue3_study_image\b36.png)]
① 能够说出什么是单页面应用程序及组件化开发
② 能够说出 .vue 单文件组件的组成部分
③ 能够知道如何注册 vue 的组件
④ 能够知道如何声明组件的 props 属性
④ 能够知道如何在组件中进行样式绑定
指的是:在封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cIOPa8Y8-1650958972742)(D:\A_study\Vue\vue3_study_image\c1.png)]
使用数组类型的 props 节点的缺点:无法为每个 prop 指定具体的数据类型。
使用对象类型的 props 节点,可以对每个 prop 进行数据类型的校验,示意图如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f7mmNl9Q-1650958972742)(D:\A_study\Vue\vue3_study_image\c2.png)]
对象类型的 props 节点提供了多种数据验证方案,例如:
① 基础的类型检查
② 多个可能的类型
③ 必填项校验
④ 属性默认值
⑤ 自定义验证函数
可以直接为组件的 prop 属性指定基础的校验类型,从而防止组件的使用者为其绑定错误类型的数据:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cdh1E7xV-1650958972743)(D:\A_study\Vue\vue3_study_image\c3.png)]
如果某个 prop 属性值的类型不唯一,此时可以通过数组的形式,为其指定多个可能的类型,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8X2nP5Z-1650958972743)(D:\A_study\Vue\vue3_study_image\c4.png)]
required 属性
如果组件的某个 prop 属性是必填项,必须让组件的使用者为其传递属性的值。此时,可以通过如下的方式将其设置为必填项:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kSNvNyHA-1650958972743)(D:\A_study\Vue\vue3_study_image\c5.png)]
在封装组件时,可以为某个 prop 属性指定默认值。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KrYnULPo-1650958972744)(D:\A_study\Vue\vue3_study_image\c6.png)]
在封装组件时,可以为 prop 属性指定自定义的验证函数,从而对 prop 属性的值进行更加精确的控制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KuUERvYQ-1650958972744)(D:\A_study\Vue\vue3_study_image\c7.png)]
计算属性本质上就是一个 function 函数,它可以实时监听 data 中数据的变化,并 return 一个计算后的新值,供组件渲染 DOM 时使用
计算属性需要以 function 函数的形式声明到组件的 computed 选项中,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaOKimj8-1650958972744)(D:\A_study\Vue\vue3_study_image\c8.png)]
注意:计算属性侧重于得到一个计算的结果,因此计算属性中必须有 return 返回值!
① 计算属性必须定义在 computed 节点中
② 计算属性必须是一个 function 函数
③ 计算属性必须有返回值
④ 计算属性必须当做普通属性使用
相对于方法来说,计算属性会缓存计算的结果,只有计算属性的依赖项发生变化时,才会重新进行运算。因此计算属性的性能更好:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u7euOqX5-1650958972745)(D:\A_study\Vue\vue3_study_image\c9.png)]
在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,此时需要用到组件的自定义事件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iagFMacA-1650958972745)(D:\A_study\Vue\vue3_study_image\c10.png)]
在封装组件时:
① 声明自定义事件
② 触发自定义事件
在使用组件时:
③ 监听自定义事件
开发者为自定义组件封装的自定义事件,必须事先在 emits 节点中声明,示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Tx9fBCP-1650958972745)(D:\A_study\Vue\vue3_study_image\c11.png)]
在 emits 节点下声明的自定义事件,可以通过 this.$emit('自定义事件的名称')
方法进行触发,示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E4BTjs2b-1650958972746)(D:\A_study\Vue\vue3_study_image\c12.png)]
在使用自定义的组件时,可以通过v-on
的形式监听自定义事件。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uz61tMC6-1650958972746)(D:\A_study\Vue\vue3_study_image\c13.png)]
在调用 this.$emit()
方法触发自定义事件时,可以通过第 2 个参数为自定义事件传参,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMqHQRAI-1650958972747)(D:\A_study\Vue\vue3_study_image\c14.png)]
v-model 是双向数据绑定指令,当需要维护组件内外数据的同步时,可以在组件上使用 v-model 指令。示意图如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0InPyiV-1650958972747)(D:\A_study\Vue\vue3_study_image\c15.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9iBY4z2a-1650958972747)(D:\A_study\Vue\vue3_study_image\c16.png)]
① 能够知道如何对 props 进行验证
② 能够知道如何使用计算属性
③ 能够知道如何为组件绑定自定义事件
④ 能够知道如何在组件上使用 v-model
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。
例如,监视用户名的变化并发起请求,判断用户名是否可用。
开发者需要在 watch 节点下,定义自己的侦听器。实例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bi1IsO45-1650958972748)(D:\A_study\Vue\vue3_study_image\d1.png)]
监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6xIPkgL-1650958972748)(D:\A_study\Vue\vue3_study_image\d2.png)]
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项。实例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bd9Tlu2n-1650958972748)(D:\A_study\Vue\vue3_study_image\d3.png)]
当 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选项,代码示例如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m4z4ymOF-1650958972749)(D:\A_study\Vue\vue3_study_image\d4.png)]
如果只想监听对象中单个属性的变化,则可以按照如下的方式定义 watch 侦听器:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLwl3JnD-1650958972749)(D:\A_study\Vue\vue3_study_image\d5.png)]
计算属性和侦听器侧重的应用场景不同:
计算属性侧重于监听多个值的变化,最终计算并返回一个新值
侦听器侧重于监听单个数据的变化,最终执行特定的业务处理,不需要有任何返回值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpxoGxXp-1650958972749)(D:\A_study\Vue\vue3_study_image\d6.png)]
组件的生命周期指的是:组件从创建 -> 运行(渲染) -> 销毁的整个过程,强调的是一个时间段。
vue 框架为组件内置了不同时刻的生命周期函数,生命周期函数会伴随着组件的运行而自动调用。例如:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0tzPYJkE-1650958972750)(D:\A_study\Vue\vue3_study_image\d6.png)]
① 当组件在内存中被创建完毕之后,会自动调用 created 函数
② 当组件被成功的渲染到页面上之后,会自动调用 mounted 函数
③ 当组件被销毁完毕之后,会自动调用 unmounted 函数
data 数据发生改变就触发 unpdated 声明周期函数
当组件的 data 数据更新之后,vue 会自动重新渲染组件的 DOM 结构,从而保证 View 视图展示的数据和Model 数据源保持一致。
当组件被重新渲染完毕之后,会自动调用 updated 生命周期函数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlkqwkYK-1650958972750)(D:\A_study\Vue\vue3_study_image\d7.png)]
注意:在实际开发中,created 是最常用的生命周期函数!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-loyFp9Pw-1650958972750)(D:\A_study\Vue\vue3_study_image\d8.png)]
可以参考 vue 官方文档给出的“生命周期图示”,进一步理解组件生命周期执行的过程:https://www.vue3js.cn/docs/zh/guide/instance.html#生命周期图示
在项目开发中,组件之间的关系分为如下 3 种:
① 父子关系
② 兄弟关系
③ 后代关系
父子组件之间的数据共享又分为:
① 父 -> 子共享数据
② 子 -> 父共享数据
③ 父 <-> 子双向数据同步
父组件通过 v-bind 属性绑定向子组件共享数据。同时,子组件需要使用 props 接收数据。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Y3UiryU-1650958972750)(D:\A_study\Vue\vue3_study_image\d9.png)]
子组件通过自定义事件的方式向父组件共享数据。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFWa0FzE-1650958972751)(D:\A_study\Vue\vue3_study_image\d10.png)]
父组件在使用子组件期间,可以使用 v-model 指令维护组件内外数据的双向同步:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7dd3Q7P-1650958972751)(D:\A_study\Vue\vue3_study_image\d11.png)]
兄弟组件之间实现数据共享的方案是 EventBus。可以借助于第三方的包 mitt 来创建 eventBus 对象,从而实现兄弟组件之间的数据共享。示意图如
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PajivIHW-1650958972751)(D:\A_study\Vue\vue3_study_image\d12.png)]
在项目中运行如下的命令,安装 mitt 依赖包:
npm install mitt@2.1.0
在项目中创建公共的 eventBus 模块如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2XEujZ5t-1650958972752)(D:\A_study\Vue\vue3_study_image\d13.png)]
在数据接收方,调用 bus.on('事件名称', 事件处理函数)
方法注册一个自定义事件。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzoup0K3-1650958972752)(D:\A_study\Vue\vue3_study_image\d14.png)]
在数据发送方,调用 bus.emit('事件名称', 要发送的数据)
方法触发自定义事件。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4CmSAdFk-1650958972752)(D:\A_study\Vue\vue3_study_image\d15.png)]
后代关系组件之间共享数据,指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂,可以使用 provide 和 inject 实现后代关系组件之间的数据共享。
父节点的组件可以通过 provide 方法,对其子孙组件共享数据:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CxXyCY6h-1650958972753)(D:\A_study\Vue\vue3_study_image\d16.png)]
子孙节点可以使用 inject 数组,接收父级节点向下共享的数据。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNw6IKeP-1650958972753)(D:\A_study\Vue\vue3_study_image\d17.png)]
父节点使用 provide 向下共享数据时,可以结合 computed 函数向下共享响应式的数据。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f25a9bUD-1650958972754)(D:\A_study\Vue\vue3_study_image\d18.png)]
如果父级节点共享的是响应式的数据,则子孙节点必须以 .value 的形式进行使用。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rkrZtn0r-1650958972754)(D:\A_study\Vue\vue3_study_image\d19.png)]
vuex 是终极的组件之间的数据共享方案。在企业级的 vue 项目开发中,vuex 可以让组件之间的数据共享变得高 效、清晰、且易于维护。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mU19O4dG-1650958972754)(D:\A_study\Vue\vue3_study_image\d20.png)]
① 父 -> 子 属性绑定
② 子 -> 父 事件绑定
③ 父 <-> 子 组件上的 v-model
④ EventBus
⑤ provide & inject
⑥ vuex
在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题:
① 每个组件中都需要导入 axios(代码臃肿)
② 每次发请求都需要填写完整的请求路径(不利于后期的维护)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jxq6eCmD-1650958972755)(D:\A_study\Vue\vue3_study_image\d21.png)]
在 main.js 入口文件中,通过 app.config.globalProperties 全局挂载 axios,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sg6Kkg2U-1650958972755)(D:\A_study\Vue\vue3_study_image\d22.png)]
// main.js
import axios from 'axios'
const app = createApp(App)
axios.defaults.baseURL = 'https://www.escook.cn'
app.config.globalProperties.$http = axios
① 能够掌握 watch 侦听器的基本使用
② 能够知道 vue 中常用的生命周期函数
③ 能够知道如何实现组件之间的数据共享
④ 能够知道如何在 vue3 的项目中全局配置 axios
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。
每个 vue 的组件实例上,都包含一个 $refs
对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的 $refs
指向一个空对象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dc8gbrV3-1650958972755)(D:\A_study\Vue\vue3_study_image\e1.png)]
如果想要使用 ref 引用页面上的 DOM 元素,则可以按照如下的方式进行操作:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IRhA5pgG-1650958972756)(D:\A_study\Vue\vue3_study_image\e2.png)]
如果想要使用 ref 引用页面上的组件实例,则可以按照如下的方式进行操作:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-14u4dmlF-1650958972756)(D:\A_study\Vue\vue3_study_image\e3.png)]
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bDM7Xyx2-1650958972756)(D:\A_study\Vue\vue3_study_image\e4.png)]
当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的.focus() 方法即可。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KVthsqFC-1650958972757)(D:\A_study\Vue\vue3_study_image\e5.png)]
组件的$nextTick(cb)
方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的DOM 异步地重新渲染完成后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DsPmqtgA-1650958972757)(D:\A_study\Vue\vue3_study_image\e6.png)]
动态组件指的是动态切换组件的显示与隐藏。vue 提供了一个内置的 组件,专门用来实现组件
的动态渲染。
①
是组件的占位符
② 通过 is 属性动态指定要渲染的组件名称
③
示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oyJRzluy-1650958972758)(D:\A_study\Vue\vue3_study_image\e7.png)]
默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的
组件保持动态组件的状态。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t94qdS0K-1650958972758)(D:\A_study\Vue\vue3_study_image\e8.png)]
插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽
可以把插槽认为是组件封装期间,为用户预留的内容的占位符。
在封装组件时,可以通过 元素定义插槽,从而为用户预留内容占位符。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4IVXdMWw-1650958972759)(D:\A_study\Vue\vue3_study_image\e9.png)]
如果在封装组件时没有预留任何 插槽,则用户提供的任何自定义内容都会被丢弃。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSSxyXtt-1650958972759)(D:\A_study\Vue\vue3_study_image\e10.png)]
封装组件时,可以为预留的 插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何内容,则后备内容会生效。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsrLZRR3-1650958972760)(D:\A_study\Vue\vue3_study_image\e11.png)]
在一个 元素上使用 v-slot :Header指令,可以缩写成#Header
如果在封装组件时需要预留多个插槽节点,则需要为每个
插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SWTgj3Qr-1650958972760)(D:\A_study\Vue\vue3_study_image\e12.png)]
注意:没有指定 name 名称的插槽,会有隐含的名称叫做 “default”。
在封装组件的过程中,可以为预留的
插槽绑定 props 数据,这种带有 props 数据的
叫做“作用域插槽”。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvO5rRhP-1650958972761)(D:\A_study\Vue\vue3_study_image\e13.png)]
作用域插槽对外提供的数据对象,可以使用解构赋值简化数据的接收过程。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ICfgD4OJ-1650958972761)(D:\A_study\Vue\vue3_study_image\e14.png)]
在封装 MyTable 组件的过程中,可以通过作用域插槽把表格每一行的数据传递给组件的使用者。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYGAcV90-1650958972762)(D:\A_study\Vue\vue3_study_image\e15.png)]
在使用 MyTable 组件时,自定义单元格的渲染方式,并接收作用域插槽对外提供的数据。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQSvtzxt-1650958972762)(D:\A_study\Vue\vue3_study_image\e16.png)]
声明自定义指令在 directives 节点下
vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。
vue 中的自定义指令分为两类,分别是:
私有自定义指令
全局自定义指令
在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yc4qM4XA-1650958972763)(D:\A_study\Vue\vue3_study_image\e17.png)]
在使用自定义指令时,需要加上 v- 前缀。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vphAqwYb-1650958972763)(D:\A_study\Vue\vue3_study_image\e18.png)]
全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WaFJ3spt-1650958972763)(D:\A_study\Vue\vue3_study_image\e19.png)]
mounted 函数只在元素第一次插入 DOM 时被调用,当 DOM 更新时 mounted 函数不会被触发。 updated 函数会在每次 DOM 更新完成后被调用。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UwHpEQ2a-1650958972764)(D:\A_study\Vue\vue3_study_image\e20.png)]
注意:在 vue2 的项目中使用自定义指令时,【 mounted -> bind 】【 updated -> update 】
如果 mounted 和updated 函数中的逻辑完全相同,则可以简写成如下格式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-siM5ixqF-1650958972764)(D:\A_study\Vue\vue3_study_image\e21.png)]
在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MLvvwNv4-1650958972765)(D:\A_study\Vue\vue3_study_image\e22.png)]
① 能够知道如何使用 ref 引用 DOM 和组件实例
② 能够知道 $nextTick 的调用时机
③ 能够说出 keep-alive 元素的作用
④ 能够掌握插槽的基本用法
标签、具名插槽、作用域插槽、v-slot: 简写为 #⑤ 能够知道如何自定义指令
路由(英文:router)就是对应关系。路由分为两大类:
① 后端路由
② 前端路由
后端路由指的是:请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 课程中,express 路由的基本用法如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sGr5YNpp-1650958972765)(D:\A_study\Vue\vue3_study_image\f1.png)]
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。此时,不同组件之间的切换需要通过前端路由来实现。
结论:在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!
通俗易懂的概念:Hash 地址与组件之间的对应关系。
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
步骤1:导入并注册 MyHome、MyMovie、MyAbout 三个组件。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dXTTph3C-1650958972765)(D:\A_study\Vue\vue3_study_image\f2.png)]
步骤2:通过
标签的 is 属性,动态切换要显示的组件。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4HkIYCY-1650958972766)(D:\A_study\Vue\vue3_study_image\f3.png)]
步骤3:在组件的结构中声明如下 3 个 链接,通过点击不同的 链接,切换浏览器地址栏中的 Hash 值:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFIUTYSL-1650958972766)(D:\A_study\Vue\vue3_study_image\f4.png)]
步骤4:在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化,动态切换要展示的组件的名称:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E59emDeo-1650958972766)(D:\A_study\Vue\vue3_study_image\f5.png)]
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换
vue-router 目前有 3.x 的版本和 4.x 的版本。其中:
vue-router 3.x 的官方文档地址:https://router.vuejs.org/zh/
vue-router 4.x 的官方文档地址:https://next.router.vuejs.org/
① 在项目中安装 vue-router
② 定义路由组件
③ 声明路由链接和占位符
④ 创建路由模块
⑤ 导入并挂载路由模块
在 vue3 的项目中,只能安装并使用 vue-router 4.x。安装的命令如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEbPO4QF-1650958972767)(D:\A_study\Vue\vue3_study_image\f6.png)]
在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件,将来要使用 vue-router 来控制它们的展示与切换:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahpZoadj-1650958972767)(D:\A_study\Vue\vue3_study_image\f7.png)]
可以使用
标签来声明路由链接,并使用
标签来声明路由占位符。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YgYTyGhC-1650958972768)(D:\A_study\Vue\vue3_study_image\f8.png)]
在项目中创建 router.js 路由模块,在其中按照如下 4 个步骤创建并得到路由的实例对象:
① 从 vue-router 中按需导入两个方法
② 导入需要使用路由控制的组件
③ 创建路由实例对象
④ 向外共享路由实例对象
⑤ 在 main.js 中导入并挂载路由模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SRFGWaDn-1650958972768)(D:\A_study\Vue\vue3_study_image\f9.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XYkd9KLx-1650958972768)(D:\A_study\Vue\vue3_study_image\f10.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UhxhV9Gp-1650958972769)(D:\A_study\Vue\vue3_study_image\f11.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W9jhxd7w-1650958972769)(D:\A_study\Vue\vue3_study_image\f12.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-43G2rzuB-1650958972769)(D:\A_study\Vue\vue3_study_image\f13.png)]
路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vqlppz5M-1650958972770)(D:\A_study\Vue\vue3_study_image\f14.png)]
可以通过如下的两种方式,将激活的路由链接进行高亮显示:
① 使用默认的高亮 class 类
② 自定义路由高亮的 class 类
被激活的路由链接,默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器,为激活的路由链接设置高亮的样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JRXgk6ew-1650958972770)(D:\A_study\Vue\vue3_study_image\f15.png)]
在创建路由的实例对象时,开发者可以基于 linkActiveClass 属性,自定义路由链接被激活时所应用的类名:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMbkIaN4-1650958972770)(D:\A_study\Vue\vue3_study_image\f16.png)]
通过路由实现组件的嵌套展示,叫做嵌套路由。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WY27ZIGZ-1650958972771)(D:\A_study\Vue\vue3_study_image\f17.png)]
① 声明子路由链接和子路由占位符
② 在父路由规则中,通过 children 属性嵌套声明子路由规则
在 About.vue 组件中,声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PqiBpiCa-1650958972771)(D:\A_study\Vue\vue3_study_image\f18.png)]
注意:子路由规则的 path 不要以 / 开头!
在 router.js 路由模块中,导入需要的组件,并使用 children 属性声明子路由规则。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svGfFsif-1650958972771)(D:\A_study\Vue\vue3_study_image\f19.png)]
动态路由指的是:把 Hash 地址中可变的部分定义为参数项,从而提高路由规则的复用性。在 vue-router 中使用英文的冒号 :
来定义路由的参数项。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwJHUmor-1650958972772)(D:\A_study\Vue\vue3_study_image\f20.png)]
通过动态路由匹配的方式渲染出来的组件中,可以使用 $route.params 对象访问到动态匹配的参数值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bECEa3dO-1650958972772)(D:\A_study\Vue\vue3_study_image\f21.png)]
为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZjEpXx0-1650958972772)(D:\A_study\Vue\vue3_study_image\f22.png)]
通过调用 API 实现导航的方式,叫做编程式导航。与之对应的,通过点击链接实现导航的方式,叫做声明式导航。例如:
vue-router 提供了许多编程式导航的 API,其中最常用的两个 API 分别是:
① this.$router.push(‘hash 地址’)
② this.$router.go(数值 n)
调用 this.$router.push() 方法,可以跳转到指定的 hash 地址,从而展示对应的组件页面。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0bGmeVd-1650958972773)(D:\A_study\Vue\vue3_study_image\f23.png)]
调用 this.$router.go() 方法,可以在浏览历史中进行前进和后退。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qyIG0lNw-1650958972773)(D:\A_study\Vue\vue3_study_image\f24.png)]
注意:命名路由的 name 值不能重复,必须保证唯一性!
通过 name 属性为路由规则定义名称的方式,叫做命名路由。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gNd4t6q-1650958972773)(D:\A_study\Vue\vue3_study_image\f25.png)]
为
标签动态绑定 to 属性的值,并通过 name 属性指定要跳转到的路由规则。期间还可以用params 属性指定跳转期间要携带的路由参数。示例代码 如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6DybnYC6-1650958972774)(D:\A_study\Vue\vue3_study_image\f26.png)]
调用 push 函数期间指定一个配置对象,name 是要跳转到的路由规则、params 是携带的路由参数:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnrwX8EA-1650958972774)(D:\A_study\Vue\vue3_study_image\f27.png)]
导航守卫可以控制路由的访问权限。示意图如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZfDmspj-1650958972774)(D:\A_study\Vue\vue3_study_image\f28.png)]
全局导航守卫会拦截每个路由规则,从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahye9v6S-1650958972775)(D:\A_study\Vue\vue3_study_image\f29.png)]
全局导航守卫的守卫方法中接收 3 个形参,格式为:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AFgFPRSH-1650958972775)(D:\A_study\Vue\vue3_study_image\f30.png)]
注意:
① 在守卫方法中如果不声明 next 形参,则默认允许用户访问每一个路由!
② 在守卫方法中如果声明了 next 形参,则必须调用 next() 函数,否则不允许用户访问任何一个路由!
参考示意图,分析 next 函数的 3 种调用方式最终导致的结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SfyOVwC9-1650958972776)(D:\A_study\Vue\vue3_study_image\f31.png)]
直接放行:next()
强制其停留在当前页面:next(false)
强制其跳转到登录页面:next(‘/login’)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPbNd2zl-1650958972776)(D:\A_study\Vue\vue3_study_image\f32.png)]
① 能够知道如何在 vue 中配置路由
② 能够知道如何使用嵌套路由
③ 能够知道如何实现动态路由匹配
④ 能够知道如何使用编程式导航
this.$router.push
、this.$router.go(-1)
⑤ 能够知道如何使用全局导航守卫
vue-cli(俗称:vue 脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。
特点:
① 开箱即用
② 基于 webpack
③ 功能丰富且易于扩展
④ 支持创建 vue2 和 vue3 的项目
vue-cli 的中文官网首页:https://cli.vuejs.org/zh/
vue-cli 是基于 Node.js 开发出来的工具,因此需要使用 npm 将它安装为全局可用的工具:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2iAb1jrc-1650958972777)(D:\A_study\Vue\vue3_study_image\g1.png)]
默认情况下,在PowerShell 中执行 vue --version 命令会提示如下的错误消息:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yj584ca4-1650958972777)(D:\A_study\Vue\vue3_study_image\g2.png)]
vue-cli 提供了创建项目的两种方式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tzKwinMA-1650958972777)(D:\A_study\Vue\vue3_study_image\g3.png)]
在终端下运行 vue ui 命令,自动在浏览器中打开创建项目的可视化面板:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4STrv0AZ-1650958972778)(D:\A_study\Vue\vue3_study_image\g4.png)]
在详情页面填写项目名称:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0wHfY7H-1650958972778)(D:\A_study\Vue\vue3_study_image\g5.png)]
在预设页面选择手动配置项目:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9rvP8g1-1650958972778)(D:\A_study\Vue\vue3_study_image\g6.png)]
在功能页面勾选需要安装的功能(Choose Vue Version、Babel、CSS 预处理器、使用配置文件):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oqIgz7Cx-1650958972779)(D:\A_study\Vue\vue3_study_image\g7.png)]
在配置页面勾选 vue 的版本和需要的预处理器:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hgt8eN75-1650958972779)(D:\A_study\Vue\vue3_study_image\g8.png)]
将刚才所有的配置保存为预设(模板),方便下一次创建项目时直接复用之前的配置:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FDvLIMG-1650958972780)(D:\A_study\Vue\vue3_study_image\g9.png)]
创建项目并自动安装依赖包:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qAkUTx7Y-1650958972780)(D:\A_study\Vue\vue3_study_image\g10.png)]
通过可视化的面板采集到用户的配置信息后,在后台基于命令行的方式自动初始化项目:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3zM6Emk-1650958972780)(D:\A_study\Vue\vue3_study_image\g11.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gmvROCTS-1650958972781)(D:\A_study\Vue\vue3_study_image\g12.png)]
步骤1:在终端下运行 vue create demo2 命令,基于交互式的命令行创建 vue 的项目:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jy2CaR17-1650958972781)(D:\A_study\Vue\vue3_study_image\g13.png)]
步骤2:选择要安装的功能:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FNNKGjvl-1650958972781)(D:\A_study\Vue\vue3_study_image\g14.png)]
步骤3:使用上下箭头选择 vue 的版本,并使用回车键确认选择:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KPPJcjGS-1650958972782)(D:\A_study\Vue\vue3_study_image\g15.png)]
步骤4:使用上下箭头选择要使用的 css 预处理器,并使用回车键确认选择:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQ2J491Z-1650958972782)(D:\A_study\Vue\vue3_study_image\g16.png)]
步骤5:使用上下箭头选择如何存储插件的配置信息,并使用回车键确认选择:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ticpdF5P-1650958972782)(D:\A_study\Vue\vue3_study_image\g17.png)]
步骤6:是否将刚才的配置保存为预设:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdZQvjxs-1650958972783)(D:\A_study\Vue\vue3_study_image\g18.png)]
步骤7:选择如何安装项目中的依赖包:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofUxfLKW-1650958972783)(D:\A_study\Vue\vue3_study_image\g19.png)]
步骤8:开始创建项目并自动安装依赖包:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6p54hEaL-1650958972783)(D:\A_study\Vue\vue3_study_image\g20.png)]
步骤9:项目创建完成:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IVo3O5bi-1650958972784)(D:\A_study\Vue\vue3_study_image\g21.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vvg21lFc-1650958972784)(D:\A_study\Vue\vue3_study_image\g22.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pn2dZK7f-1650958972784)(D:\A_study\Vue\vue3_study_image\g23.png)]
在 vue2 的项目中,只能安装并使用 3.x 版本的 vue-router。
版本 3 和版本 4 的路由最主要的区别:创建路由模块的方式不同!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hY7D4ttC-1650958972785)(D:\A_study\Vue\vue3_study_image\g24.png)]
步骤1:在 vue2 的项目中安装 3.x 版本的路由:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P0Gdsceo-1650958972785)(D:\A_study\Vue\vue3_study_image\g25.png)]
步骤2:在 src -> components 目录下,创建需要使用路由切换的组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NLT44iDE-1650958972785)(D:\A_study\Vue\vue3_study_image\g26.png)]
步骤3:在 src 目录下创建 router -> index.js 路由模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s7SP354s-1650958972786)(D:\A_study\Vue\vue3_study_image\g27.png)]
步骤4:在 main.js 中导入路由模块,并通过 router 属性进行挂载
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iAkwXDSK-1650958972786)(D:\A_study\Vue\vue3_study_image\g28.png)]
步骤5:在 App.vue 根组件中,使用 声明路由的占位符:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7qb529i-1650958972787)(D:\A_study\Vue\vue3_study_image\g29.png)]
在实际开发中,前端开发者可以把自己封装的 .vue 组件整理、打包、并发布为 npm 的包,从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件,就叫做 vue 组件库。
二者之间存在本质的区别:
① PC 端
② 移动端
Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vue2 和 vue3 的项目中使用:
运行如下的终端命令
npm i element-ui -S
开发者可以一次性完整引入所有的 element-ui 组件,或是根据需求,只按需引入用到的 element-ui 组件:
在 main.js 中写入以下内容:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JAiHsbbM-1650958972787)(D:\A_study\Vue\vue3_study_image\g31.png)]
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
步骤1,安装 babel-plugin-component:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KuXNc92P-1650958972787)(D:\A_study\Vue\vue3_study_image\g32.png)]
步骤2,修改根目录下的 babel.config.js 配置文件,新增 plugins 节点如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcsfSOFX-1650958972788)(D:\A_study\Vue\vue3_study_image\g33.png)]
步骤3,如果你只希望引入部分组件,比如 Button,那么需要在 main.js 中写入以下内容:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9T4C8vM-1650958972788)(D:\A_study\Vue\vue3_study_image\g34.png)]
在 src 目录下新建 element-ui/index.js 模块,并声明如下的代码:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bHXnQ8t-1650958972788)(D:\A_study\Vue\vue3_study_image\g35.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAzTuC1c-1650958972789)(D:\A_study\Vue\vue3_study_image\g36.png)]
需要在 main.js 入口文件中,通过 Vue 构造函数的 prototype 原型对象全局配置 axios:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aGc2r6jV-1650958972789)(D:\A_study\Vue\vue3_study_image\g37.png)]
拦截器(英文:Interceptors)会在每次发起 ajax 请求和得到响应的时候自动被触发。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XKwZDwd7-1650958972789)(D:\A_study\Vue\vue3_study_image\g38.png)]
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCQejQEX-1650958972790)(D:\A_study\Vue\vue3_study_image\g39.png)]
注意:失败的回调函数可以被省略!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sMA5Or86-1650958972790)(D:\A_study\Vue\vue3_study_image\g40.png)]
借助于 element ui 提供的 Loading 效果组件(https://element.eleme.cn/#/zh-CN/component/loading)可以方便的实现 Loading 效果的展示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ODOTFHT-1650958972791)(D:\A_study\Vue\vue3_study_image\g41.png)]
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9u2k76b-1650958972791)(D:\A_study\Vue\vue3_study_image\g42.png)]
注意:失败的回调函数可以被省略!
调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-REybLtIC-1650958972791)(D:\A_study\Vue\vue3_study_image\g43.png)]
vue 项目运行的地址:http://localhost:8080/
API 接口运行的地址:https://www.escook.cn/api/users
由于当前的 API 接口没有开启 CORS 跨域资源共享,因此默认情况下,上面的接口无法请求成功!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InLkpW9k-1650958972792)(D:\A_study\Vue\vue3_study_image\g44.png)]
通过 vue-cli 创建的项目在遇到接口跨域问题时,可以通过代理的方式来解决:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESa5CEwR-1650958972792)(D:\A_study\Vue\vue3_study_image\g45.png)]
① 把 axios 的请求根路径设置为 vue 项目的运行地址(接口请求不再跨域)
② vue 项目发现请求的接口不存在,把请求转交给 proxy 代理
③ 代理把请求根路径替换为 devServer.proxy 属性的值,发起真正的数据请求
④ 代理把请求到的数据,转发给 axios
步骤1,在 main.js 入口文件中,把 axios 的请求根路径改造为当前 web 项目的根路径:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cR7AiVkq-1650958972792)(D:\A_study\Vue\vue3_study_image\g46.png)]
步骤2,在项目根目录下创建 vue.config.js 的配置文件,并声明如下的配置:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BTHBdvsM-1650958972793)(D:\A_study\Vue\vue3_study_image\g47.png)]
注意:
① devServer.proxy 提供的代理功能,仅在开发调试阶段生效
② 项目上线发布时,依旧需要 API 接口服务器开启 CORS 跨域资源共享
① 能够知道如何使用 vue-cli 创建项目
② 能够知道如何在项目中安装和配置 element-ui
③ 能够知道 element-ui 中常见组件的用法
④ 能够知道如何使用 axios 拦截器
⑤ 能够知道如何配置 proxy 代理
在 vue3 的项目中全局配置 axios
[外链图片转存中…(img-DAzTuC1c-1650958972789)]
需要在 main.js 入口文件中,通过 Vue 构造函数的 prototype 原型对象全局配置 axios:
[外链图片转存中…(img-aGc2r6jV-1650958972789)]
拦截器(英文:Interceptors)会在每次发起 ajax 请求和得到响应的时候自动被触发。
[外链图片转存中…(img-XKwZDwd7-1650958972789)]
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下:
[外链图片转存中…(img-XCQejQEX-1650958972790)]
注意:失败的回调函数可以被省略!
[外链图片转存中…(img-sMA5Or86-1650958972790)]
借助于 element ui 提供的 Loading 效果组件(https://element.eleme.cn/#/zh-CN/component/loading)可以方便的实现 Loading 效果的展示:
[外链图片转存中…(img-9ODOTFHT-1650958972791)]
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下:
[外链图片转存中…(img-l9u2k76b-1650958972791)]
注意:失败的回调函数可以被省略!
调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果,示例代码如下:
[外链图片转存中…(img-REybLtIC-1650958972791)]
vue 项目运行的地址:http://localhost:8080/
API 接口运行的地址:https://www.escook.cn/api/users
由于当前的 API 接口没有开启 CORS 跨域资源共享,因此默认情况下,上面的接口无法请求成功!
[外链图片转存中…(img-InLkpW9k-1650958972792)]
通过 vue-cli 创建的项目在遇到接口跨域问题时,可以通过代理的方式来解决:
[外链图片转存中…(img-ESa5CEwR-1650958972792)]
① 把 axios 的请求根路径设置为 vue 项目的运行地址(接口请求不再跨域)
② vue 项目发现请求的接口不存在,把请求转交给 proxy 代理
③ 代理把请求根路径替换为 devServer.proxy 属性的值,发起真正的数据请求
④ 代理把请求到的数据,转发给 axios
步骤1,在 main.js 入口文件中,把 axios 的请求根路径改造为当前 web 项目的根路径:
[外链图片转存中…(img-cR7AiVkq-1650958972792)]
步骤2,在项目根目录下创建 vue.config.js 的配置文件,并声明如下的配置:
[外链图片转存中…(img-BTHBdvsM-1650958972793)]
注意:
① devServer.proxy 提供的代理功能,仅在开发调试阶段生效
② 项目上线发布时,依旧需要 API 接口服务器开启 CORS 跨域资源共享
① 能够知道如何使用 vue-cli 创建项目
② 能够知道如何在项目中安装和配置 element-ui
③ 能够知道 element-ui 中常见组件的用法
④ 能够知道如何使用 axios 拦截器
⑤ 能够知道如何配置 proxy 代理