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 webpack@5.42.1 webpack-cli@4.9.0 -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 webpack-dev-server@3.11.2 -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 节点指定的路径，存放到实际的物理磁盘上
• 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

<!-- 加载和引用内存中的 main.js，在根目录上下的，看不见但实际存在 -->
<script src="/bundle.js"></script>

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 html-webpack-plugin@5.3.2 -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 style-loader@3.0.0 css-loader@5.2.6 -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 less-loader@10.0.1 less@4.1.1 -D 命令

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

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

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

① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -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 babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -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 实例对象）

<body>
    <!-- 希望 Vue 能够控制下面的这个div， 帮助我们在把数据填充到div 内部 -->
    <div id="app">{
  {username}}</div>

    <!-- 1. 导入Vue 的库文件 -->
    <script src="./lib/vue-2.6.12.js"></script>
    <!-- 2. 创建vue 实例对象 -->
    <script>
        const vm = new Vue({
            // el 属性时固定写法，表示当前vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                username: 'zhangsan',
                age: 20
            }

        })
    </script>
</body>

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

内容渲染指令

<p v-text="username"></p>
<p v-text="gender">性别</p>	//页面仅显示gender的值，没有'性别'

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

2. { { }} 语法

vue 提供的{ { }} 语法，专门用来解决 v-text