vue2学习笔记

---

Vue基础

前置储备

必备前提

• HTML + CSS + JavaScript
• WebAPI(DOM + BOM)
• Ajax

可选前提

• Node.js

1. 前端工程化

1.1 前端开发

• 模块化（js 的模块化、css 的模块化、资源的模块化）
• 组件化（复用现有的 UI 结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
• 自动化（自动化构建、自动部署、自动化测试）

1.2 前端工程化概念

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、

标准化。

企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。

好处：前端开发自成体系，有一套标准的开发方案和流程。

1.3 前端工程化解决方案

早期的前端工程化解决方案：

• grunt（ https://www.gruntjs.net/ ）
• gulp（ https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解决方案：

• webpack（ https://www.webpackjs.com/ ）
• parcel（ https://zh.parceljs.org/ ）

2. webpack使用

2.1 概念

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性

能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。

2.2 创建列表隔行变色项目

① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json

② 新建 src 源代码目录

③ 新建 src -> index.html 首页和 src -> index.js 脚本文件

④ 初始化首页基本的结构

⑤ 运行 npm install jquery –S 命令，安装 jQuery

⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

2.3 在项目中安装 webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

npm install [email protected] [email protected] -D 

• -S(–save) ：存放在dependencies中，开发和上线后都会使用的包
• -D(–save -dev)：存放在devDependencies中，只在开发中使用

2.4 在项目中配置 webpack

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

// 使用Node.js 中的语法，向外导出一个 webpack 对象
module.exports = {
    // 代表 webpack 运行模式，可选值有两个 development 和 production
    mode: 'development'
}

② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
    "dev": "webpack"
}

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

2.5 mode 的可选值

mode 节点的可选值有两个，分别是：

① development

• 开发环境
• 不会对打包生成的文件进行代码压缩和性能优化
• 打包速度快，适合在开发阶段使用

② production

• 生产环境
• 会对打包生成的文件进行代码压缩和性能优化
• 打包速度很慢，仅适合在项目发布阶段使用

2.6 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，

从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关

的语法和模块进行 webpack 的个性化配置。

2.7 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

​ ① 默认的打包入口文件为 src -> index.js

​ ② 默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

2.7 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

示例代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BAueYxA1-1650958920151)(D:\A_study\Vue\study_image\3.3自定义打包的入口与出口.png)]

3. webpack中的插件

3.1 webpack 插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的

webpack 插件有如下两个：

① webpack-dev-server

• 类似于 node.js 阶段用到的 nodemon 工具
• 每当修改了源代码，webpack 会自动进行项目的打包和构建

② html-webpack-plugin

• webpack 中的 HTML 插件（类似于一个模板引擎插件）
• 可以通过此插件自定制 index.html 页面的内容

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

3.2 安装 webpack-dev-server

运行如下的命令，即可在项目中安装此插件：

npm install [email protected] -D

3.3 配置 webpack-dev-server

① 修改 package.json -> scripts 中的 dev 命令如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iRPdDlhJ-1650958920153)(D:\A_study\Vue\study_image\2. 配置webpack-server.png)]

② 再次运行 npm run dev 命令，重新进行项目的打包

③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：webpack-dev-server 会启动一实时打包的 http 服务器，webpack-cli的版本一定要@4.9.0，太低无法运行

3.4 打包生成的文件哪儿去了？

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上

• 严格遵守开发者在 webpack.config.js 中指定配置
• 根据 output 节点指定路径进行存放

② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

• 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
• 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

3.5 生成到内存中的文件该如何访问？

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

• 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
• 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

3.6 html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份

3.7 安装 html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：

npm install [email protected] -D

3.8 配置 html-webpack-plugin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X0eaucBQ-1650958920153)(D:\A_study\Vue\study_image\3. 配置 html-webpack-plugin.png)]

// 导入html-webpack-plugin插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定赋值出来的文件名和存放路径
    filename: './index.html'
})

// 使用Node.js 中的语法，向外导出一个 webpack 对象
module.exports = {
    // 插件的数组，将来 webpack 在运行时，会加载并调用这个插件
    plugins: [htmlPlugin]
}

3.9 解惑 html-webpack-plugin

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中

② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

3.10 devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，

示例代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pw0SqaDz-1650958920154)(D:\A_study\Vue\study_image\4. devServer 节点.png)]

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服

务器，否则最新的配置文件无法生效！

4. webpack 中的 loader

4.1 loader 概述

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，

webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

• css-loader 可以打包处理 .css 相关的文件
• less-loader 可以打包处理 .less 相关的文件
• babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

4.2 打包处理 css 文件

① 运行 npm i [email protected] [email protected] -D 命令，安装处理 css 文件的 loader

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTA3d7pK-1650958920154)(D:\A_study\Vue\study_image\5. 打包处理 css 文件.png)]

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

• use 数组中指定的 loader 顺序是固定的
• 多个 loader 的调用顺序是：从后往前调用

4.3 打包处理 less 文件

① 运行 npm i [email protected] [email protected] -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1RKdB2W-1650958920155)(D:\A_study\Vue\study_image\6.打包处理 less 文件.png)]

4.4 打包处理样式表中与 url 路径相关的文件

① 运行 npm i [email protected] [email protected] -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3eWuFW2q-1650958920155)(D:\A_study\Vue\study_image\7.打包处理样式表中与 url 路径相关的文件.png)]

其中 ? 之后的是 loader 的参数项：

• limit 用来指定图片的大小，单位是字节（byte）
• 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

4.5 打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借

助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BnF2bO2l-1650958920156)(D:\A_study\Vue\study_image\8.打包处理 js 文件中的高级语法.png)]

4.6 安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：

npm i [email protected] @babel/[email protected] @babel/[email protected] -D

在 webpack.config.js 的 module -> rules 数组中

4.7 配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exprots = {
  plugins: [['@babel/plugin-proposal-decorators ',{ legacy: true }]]
}

5. 打包发送

5.1 为什么要打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

5.2 配置 webpack 的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mb3nVJX2-1650958920156)(D:\A_study\Vue\study_image\9.配置 webpack 的打包发布.png)]

–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件

进行代码压缩和性能优化。

注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

5.3 把 JavaScript 文件统一生成到 js 目录中

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vgsBivJ9-1650958920157)(D:\A_study\Vue\study_image\10.把 JavaScript 文件统一生成到 js 目录中.png)]

5.4 把图片文件统一生成到 image 目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ihzQTxb-1650958920157)(D:\A_study\Vue\study_image\11.把图片文件统一生成到 image 目录中.png)]

5.5 自动清理 dist 目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQZgIurQ-1650958920158)(D:\A_study\Vue\study_image\12.自动清理 dist 目录下的旧文件.png)]

6. Source Map

6.1 概念

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的

代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

6.2 webpack 开发环境下的 Source Map

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行

数不一致的问题。示意图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLqwRswC-1650958920158)(D:\A_study\Vue\study_image\13.默认 Source Map 的问题.png)]

6.3 解决默认 Source Map 的问题

开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数

保持一致：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2VsA40rX-1650958920158)(D:\A_study\Vue\study_image\14.解决默认 Source Map 的问题.png)]

6.4 webpack 生产环境下的 Source Map

在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通

过 Source Map 的形式暴露给别有所图之人。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pc7l6IEq-1650958920159)(D:\A_study\Vue\study_image\15.webpack 生产环境下的 Source Map.png)]

6.5 只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为

nosources-source-map。实际效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-erMdoouS-1650958920159)(D:\A_study\Vue\study_image\16. 只定位行数不暴露源码.png)]

6.6 定位行数且暴露源码

在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为

source-map。实际效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cy9W01EW-1650958920160)(D:\A_study\Vue\study_image\17.定位行数且暴露源码.png)]

采用此选项后：你应该将你的服务器配置为，不允许普通用户访问 source map 文件！

6.7 Source Map 的最佳实践

① 开发环境下：

• 建议把 devtool 的值设置为 eval-source-map
• 好处：可以精准定位到具体的错误行

② 生产环境下：

• 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
• 好处：防止源码泄露，提高网站的安全性

7. 总结

① 能够掌握 webpack 的基本使用

• 安装、webpack.config.js、修改打包入口

② 了解常用的 plugin 的基本使用

• webpack-dev-server、html-webpack-plugin

③ 了解常用的 loader 的基本使用

• loader 的作用、loader 的调用过程

④ 能够说出 Source Map 的作用

• 精准定位到错误行并显示对应的源码
• 方便开发者调试源码中的错误

Vue基础入门

1. 简介

1.1 概念

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

1. 构建用户界面
   • 用 vue 往 html 页面中填充数据，非常的方便
2. 框架
   • 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
   • 要学习 vue，就是在学习 vue 框架中规定的用法！
   • vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库

1.2 vue特性

vue 框架的特性，主要体现在如下两方面：

​ ① 数据驱动视图

​ ② 双向数据绑定

1. 数据驱动视图：

   • 数据的变化会驱动视图自动更新
   • 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

2. 双向数据绑定：

   在网页中，form 表单负责采集数据，Ajax 负责提交数据。

   • js 数据的变化，会被自动渲染到页面上
   • 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

• 注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

1. 数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQI1dtYx-1650958920162)(D:\A_study\Vue\study_image\b1.数据驱动视图.png)]

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定

2. 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源

中。

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

3. MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，

它把每个 HTML 页面都拆分成了这三个部分

在 MVVM 概念中：

• Model 表示当前页面渲染时所依赖的数据源。
• View 表示当前页面所渲染的 DOM 结构。
• ViewModel 表示 vue 的实例，它是 MVVM 的核心。

4. MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oi1tTj5b-1650958920163)(D:\A_study\Vue\study_image\b2.MVVM 的工作原理.png)]

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

1.3 vue 的版本

当前，vue 共有 3 个大版本，其中：

• 2.x 版本的 vue 是目前企业级项目开发中的主流版本
• 3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
• 1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

总结：

• 3.x 版本的 vue 是未来企业级项目开发的趋势；
• 2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰；

2. vue基本使用

1. 基本使用步骤

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

    
    
{{username}}

    
    
    
    

2. 基本代码与 MVVM 的对应关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TUuQWw3Y-1650958920163)(D:\A_study\Vue\study_image\b3. 基本代码与 MVVM 的对应关系.png)]

3. vue 的指令与过滤器

3.1 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue 中的指令按照不同的用途可以分为如下 6 大类：

​ ① 内容渲染指令

​ ② 属性绑定指令

​ ③ 事件绑定指令

​ ④ 双向绑定指令

​ ⑤ 条件渲染指令

​ ⑥ 列表渲染指令

注意：指令是 vue 开发中最基础、最常用、最简单的知识点。

3.2 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

• v-text
• {{ }}
• v-html

1. v-text

内容渲染指令

性别
	//页面仅显示gender的值，没有'性别'

注意：v-text 指令会覆盖元素内默认的值。

2. {{ }} 语法

vue 提供的{{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache）

姓名：{{username}}
	//姓名：zhangsan
性别：{{gender}}
	//性别：女

注意：相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！

3. v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，

则需要用到 v-html 这个指令：

作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

4. el属性的使用注意点

尽量在一个大div下，使用

如果el只指定一个p标签，仅选择第一个p标签，其他不会发生变化

3.3 属性绑定指令

属性绑定：用英文 : 来绑定

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

• 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
• 简写是英文的 :

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdhcI0FU-1650958920164)(D:\A_study\Vue\study_image\b4.属性绑定指令.png)]

3.4 使用 Javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算

1 + 2 的结果是： {{1 + 2}}
 //3
{{tips}} 反转的结果是：{{tips.split('').reverse().join('')}}
 //名户用入输请
这是一个div
//title: box3

注意：在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

3.6 事件绑定指令

事件绑定：用@来绑定

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c2VUMbvv-1650958920164)(D:\A_study\Vue\study_image\b5.事件绑定指令.png)]

• 注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后
• 分别为：v-on:click、v-on:input、v-on:keyup

  
count 的值是: {{count}}
  +1

// methods 的作用，就是定义事件处理函数
methods: {
	add: function() {
		console.log('ok');
	}
}

// 可以简写
methods: {
	add() {
		console.log('ok');
	}
}

在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参，示例代码如下：

+N

注意

• 通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明
• 由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）

1. 事件参数对象

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令

（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event，示例代码如下：

methods: {
    add(e) {
      this.count += 1
      if (this.count % 2 == 0) {
        // 偶数
        e.target.style.backgroundColor = 'red'
      } else {
        // 奇数
        e.target.style.backgroundColor = ''
    }
  }
}

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event

被覆盖的问题。示例用法如下

+N

methods: {
    add(n, e) {
    this.count += n
    if (this.count % 2 == 0) {
      // 偶数
      e.target.style.backgroundColor = 'red'
    } else {
      // 奇数
      e.target.style.backgroundColor = ''
    }
  }
}

2. 事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，

vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FmUt0Nj3-1650958920165)(D:\A_study\Vue\study_image\b6.事件修饰符.png)]

语法格式如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YKb6ZlZW-1650958920166)(D:\A_study\Vue\study_image\b8.事件修饰符语法.png)]

3. 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMO60Wyq-1650958920167)(D:\A_study\Vue\study_image\b9.按键修饰符.png)]

methods: {
  clearInput(e) {
  	e.target.value = ''
  }
}

3.7 双向绑定指令

v-model

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InUO6Yrt-1650958920167)(D:\A_study\Vue\study_image\b10.双向绑定指令.png)]

1. v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pqFMB7VA-1650958920168)(D:\A_study\Vue\study_image\b11.v-model 指令的修饰符.png)]

2. 指令限制

v-model 指令只能和表单元素使用，因为v-model 底层检测的是value值，且其它标签无法交互

1. input 输入框
   • type=“radio”
   • type=“checkbox”
   • type=“xxxx”
2. textarea
3. select

3.8 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

• v-if
• v-show

        
这是被 v-if 控制的元素
        
这是被 v-show 控制的元素

1. v-if 和 v-show 的区别

实现原理不同：

• v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
  • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好
• v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；
  • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

性能消耗不同：

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好

2. v-else

v-if 可以单独使用，或配合 v-else 指令一起使用：

注意：v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

3. v-else-if

v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

优秀
良好
一般
差

注意：v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

3.9 列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使

用 item in items 形式的特殊语法，其中：

• items 是待循环的数组
• item 是被循环的每一项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCE2UDoO-1650958920168)(D:\A_study\Vue\study_image\b12.列表渲染指令.png)]

注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

    index
    {{item.id}}
    {{item.name}}

1. 使用 key 维护列表的状态

官方对 key 值类型，是有要求的，必须是字符串或者数字型

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种

默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲

染的性能。此时，需要为每项提供一个唯一的 key 属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOhBV1rN-1650958920168)(D:\A_study\Vue\study_image\b13.使用 key 维护列表的状态.png)]

2. key 的注意事项

​ ① key 的值只能是字符串或数字类型

​ ② key 的值必须具有唯一性（即：key 的值不能重复）

​ ③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

​ ④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

​ ⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

3.10 过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式

和 v-bind 属性绑定

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idBqgvyC-1650958920169)(D:\A_study\Vue\study_image\b14.过滤器.png)]

1. 定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFRsdluw-1650958920170)(D:\A_study\Vue\study_image\b15.定义过滤器.png)]

2. 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GdHFiwt-1650958920170)(D:\A_study\Vue\study_image\b16.全局过滤器.png)]

3. 连续调用多个过滤器

过滤器可以串联地进行调用，例如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sKuBrvyt-1650958920171)(D:\A_study\Vue\study_image\b17.连续调用多个过滤器.png)]

4. 过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8LDfRJ4-1650958920171)(D:\A_study\Vue\study_image\b18.过滤器传参.png)]

5. 过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中：

• 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
• 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

6. 注意点

过滤器的注意点

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

4. 侦听器 watch

4.1 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29JcJTQg-1650958920172)(D:\A_study\Vue\study_image\b19.侦听器.png)]

4.2 immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使

用 immediate 选项。

watch: {
  // 定义对象格式的侦听器
  username: {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    // 选项的默认值是 false，控制侦听器是否自动触发一次
    immediate: true
  }
}

4.3 deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选

项，代码示例如下

watch: {
  // 定义对象格式的侦听器
  info: {
    handler(newVal) {
    	console.log(newVal.username);
    },
    // 开启深度监听，只要对象中任意属性变化了，都会出发侦听器
    deep: true
  }
}

4.4 侦听器两种形式的优缺点

1. 方法格式的侦听器
   • 缺点1：无法在刚进入页面的时候，自动触发！！！
   • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
2. 对象格式的侦听器
   • 好处1：可以通过 immediate 选项，让侦听器自动触发！！！
   • 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

4.5 监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

watch: {
  'info.username': {
      handler(newVal) {
          console.log(newVal);
      }
  }
}

5. 计算属性

5.1 什么是计算属性

所有计算属性，都放在computed 节点之下，计算属性在定义的时候，要定义成方法格式

计算属性指的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdcTgtys-1650958920172)(D:\A_study\Vue\study_image\b20.计算属性.png)]

特点

1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可

好处

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

6. axios

axios 是一个专注于网络请求的库！

axios 基础语法

 // 调用 axios 方法得到的返回值是 Promise 对象
        axios({
            methods: 'get',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
     		
        }).then((books) => {
            console.log(books);
		})

6.1 发起GET请求

// 调用 axios 方法得到的返回值是 Promise 对象
        axios({
            methods: 'get',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
     		// 调用 axios 方法得到的返回值是 Promise 对象
        axios({
            methods: 'get',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
     		
        }).then((books) => {
            console.log(books);
		})
        }).then((books) => {
            console.log(books);
		})

6.2 发起POST请求

document.querySelector('#btnPost').addEventListener('click', async function() {
                // 如果调用某个方法的返回值是Promise实例，则前面可以添加 await
                // await 只能用在被 async “修饰” 的方法中
                await axios({
                    methods: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/post',
                    // 请求体参数
                    data: {
                        address: '北京',
                        location: '顺义区'
                    }


                }).then((result) => {
                    console.log(result);
                })
            })

6.3 解构赋值

document.querySelector('#btnPost').addEventListener('click', async function() {
            // 解构赋值的时候，使用 : 进行重命名
            // 1. 调用axios 之后，使用 async/await 进行简化
            // 2. 使用解构赋值，从axios 封装的大对象中，把data 属性解构出来
            // 3. 把解构出来的的data属性，使用 冒号 进行重命名

            const { data: res } = await axios({
                methods: 'get',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                // URL中的查询参数
                params: {
                    id: 1
                },
                // 请求体参数
                data: {}
            })

            console.log(res.data);
        })

6.4 直接使用GET和POST请求

document.querySelector('#btnGET').addEventListener('click', async function() {
            const {
                data: result
            } = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
            console.log(result.data);
        })

        document.querySelector('#btnPOST').addEventListener('click', async function() {
            const {
                data: res
            } = await axios.post('http://www.liulongbin.top:3006/api/post', {
                name: 'zs',
                gender: '女'
            })
            console.log(res);
        })

7. vue-cli

7.1 单页面应用程序

单页面应用程序简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

7.2 什么是 vue-cli

vue 实例的 $mount() 方法，作用和 el 属性 完全一致

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

引用自 vue-cli 官网上的一句话：程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。

中文官网：https://cli.vuejs.org/zh/

1. 安装和使用

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目：vue create 项目的名称

1. 在终端下运行如下的命令，创建指定名称的项目：

vue cerate 项目的名称

2. 安装过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCZZuPIX-1650958920174)(D:\A_study\Vue\study_image\b21.vue_create.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LnECWfv8-1650958920174)(D:\A_study\Vue\study_image\b21.vue_create2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LyCsp0RM-1650958920175)(D:\A_study\Vue\study_image\b21.vue_create3.png)]

2. vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

​ ① App.vue 用来编写待渲染的模板结构

​ ② index.html 中需要预留一个 el 区域

​ ③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

3. vue 项目中 src 目录的构成

• assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
• components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
• main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
• App.vue 是项目的根组件。

8. vue组件

8.1 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

8.2 vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。

vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件

8.3 vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

• template -> 组件的模板结构
• script -> 组件的 JavaScript 行为
• style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分

1. template

vue 规定：每个组件对应的模板结构，需要定义到