Vue.js 笔记

一、前端工程化

        1 就是四个现代化：
                ① 模块化（JS 的模块化、CSS 的模块化、资源的模块化）
                ② 组件化（复用现有的 UI 结构、样式、行为)
                ③ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
                ④ 自动化（自动化构建、自动部署、自动化测试)
        2 目前主流的前端工程化解决方法：
                ① webpack
                ② parcel
                其中，webpack 主要用来开发项目，parcel 主要用来开发第三方模块 (包)，所以重点学习 webpack

二、webpack 的基本使用

        1 什么是 webpack
                webpack 是前端项目工程化的具体解决方案。它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理
                浏览器 JavaScript 的兼容性、性能优化等强大的功能。
        2 在项目中安装 webpack
                在终端运行如下的命令，安装 webpack 相关的两个包：
                        npm i webpack@5.42.1 webpack-cli@4.7.2 -D
                        其中：
                                -D 是 --save-dev 的缩写，表示把包放到 devDependencies 节点下，该节点只在开发时有效。
                                -S 是 --save 的缩写，表示把包放到 dependencies 节点下，该节点在开发和上线都有效。
        3 在项目中配置 webpack
                ① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
                        module.exports = {
                                mode: 'development'   // mode 用来指定构建模式，可选值有 development 和 production
                        }
                        注意：
                                development：做项目开发时使用，因为项目开发追求的是打包速度块，而不是项目体积小。
                                production：做项目上线时使用，因为项目上线追求的是项目体积小，而不是打包速度块。
                ② 在 package.json 的 scripts 节点下，新增 dev 脚本 如下：
                        "scripts": {
                                "dev": "webpack"   // scripts 节点下的脚本，可以通过 npm run 执行。例如 npm run dev
                        }
                ③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
                ④ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
        4 webpack 中的默认约定
                在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
                        ① 默认的打包入口文件为 src → index.js
                        ② 默认的输出文件路径为 dist → main.js
                注意：
                        可以在 webpack.config.js 中修改打包的默认约定。
        5 修改 webpack 中的默认约定
                在 webpack.config.js 配置文件中，通过 entry 节点指定打包入口，通过 output 节点指定输出文件路径。
                示例代码如下：
                        const path = require('path')
                        module.exports = {
                                mode: 'development',
                                entry: path.join(__dirname, '需要打包文件的路径'),
                                output: {
                                        path: path.join(__dirname, '打包之后的文件存放路径'),
                                        filename: '输出文件名'
                                }
                        }

三、webpack 中的插件

        1 常用的 webpack 插件有两个
                ① webpack-dev-server：
                        该插件类似于 node.js 用到的 nodemon，每当修改了源代码，webpack 会自动进行项目的打包和构建。
                ② html-webpack-plugin：
                        webpack 中的 HTML 插件 (类似于一个模板引擎插件)，可以通过此插件自定义 index.html 页面的内容。
                        对该插件进行配置之后，输入 http://localhost:8080 地址就可以直接看到页面内容，无需再进入到 src
                        里面打开 html 页面。
        2 webpack-dev-server 基本使用
                ① 运行如下的命令，即可在项目中安装此插件：
                        npm i webpack-dev-server@3.11.2 -D
                ② 配置 webpack-dev-server：
                        (1) 修改 package.json -> scripts 中的 dev 命令如下：
                                "scripts": {
                                        "dev": "webpack serve"
                                }
                        (2) 运行 npm run dev 命令，重新进行项目的打包。
                注意：
                        ① webpack-dev-server 会启动一个实时打包的 http 服务器。
                        ② 在终端 ctrl+C 可以关闭插件。
                        ③ 该插件是把项目存放在内存，所以在磁盘上面看不到插件生成的项目。要想查看项目必须通过终端提供
                             的路径去访问，所以要学会看终端。
        3 html-webpack-plugin 基本使用
                ① 运行如下的命令，即可在项目中安装此插件：
                        npm i html-webpack-plugin@5.3.2 -D
                ② 配置 html-webpack-plugin (在 webpack.config.js 配置文件中修改)：
                        // 1 导包
                        const HtmlPlugin = require('html-webpack-plugin')
                        // 2 创建实例对象
                        const htmlPlugin = new HtmlPlugin({
                                template: '/src/html文件名',  // 源文件的路径
                                filename: '/html文件名'    // 指定生成的文件存放路径
                        })
                        // 3 通过 plugins 节点，使 htmlPlugin 插件生效
                        module.exports = {
                                mode: 'development',
                                plugins: [htmlPlugin]
                        }

四、Source Map

        1 什么是Source Map
                ① Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩后的代码，
                     所对应着转换前的位置。有了它，出错的时候，出错工具将直接显示原始代码，而不是转换后的代码，
                     能够极大的方便后期的调试。
                ② 开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数
                     不一致的问题。
        2 解决默认 Source Map 的问题
                开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致
                代码如下：
                        module.exports = {
                                mode: 'development',
                                devtool: 'eval-source-map'
                        }
                        注意：
                                eval-source-map 仅限在开发模式下使用，不建议在生产模式下使用。
                                此选项生成的 Source Map 能够保证"运行时报错的行数"与"源代码的行数"保持一致。
        3 source Map的最佳实践
                ① 开发环境下：
                        建议把 devtool 的值设置为 eval-source-map
                        好处：可以精准定位到具体的错误行
                ② 生产环境下：
                        建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
                        好处：防止源码泄露，提高网站的安全性

五、实际开发中的 webpack

        在实际开发中，程序员是不需要手动配置 webpack 的，我们会使用命令行工具 (俗称CLI) 一键生成带有webpack的项目，
        所有的 webpack 配置项都是现成的，我们只需要知道 webpack 中的基本概念即可。

六、Vue 简介

        1 什么是 Vue
                是一套用于构建用户界面的前端框架
        2 vue 的特性
                ① 数据驱动视图：
                        在使用了vue的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。
                        好处：当页面数据发生变化时，页面会自动重新渲染。
                        注意：数据驱动视图是单向的数据绑定。
                ② 双向数据绑定：
                        在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。
                        好处：开发者不再需要手动操作DOM元素，来获取表单元素最新的值。
        3 MVVM
                MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是Model、View和ViewModel，
                它把每个HTML页面都拆分成了这三个部分。
                在MVVM概念中：
                        Model 表示当前页面渲染时所依赖的数据源。
                        View 表示当前页面所渲染的 DOM 结构。
                        ViewModel 表示 vue 的实例，它是 MVVM 的核心。
        4 MVVM 的工作原理
                ViewModel 作为 MVVM的核心，是它把当前页面的数据源 (Model) 和页面的结构 (View) 连接在了一起。
                当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构。
                当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中。

七、Vue基本使用

        ① 在页面上导入 vue.js 这个文件，在 window 全局就有了Vue这个构造函数
        <script src="./js/vue-2.6.12.js"></script>
        ② 准备 html 容器，用 id 选择器指明要把数据渲染到哪个容器里面，这个 id 一般给父盒子，给 body 加是没用的
        <body>
                <div id="app">
                        <p>用户名：{ {username}}</p>
                        <div>用户名：{ {username}}</div>
                </div>
        </body>
        ③ 准备数据
        <script>
                // 1 创建 vue 的实例对象
                const vm = new Vue({
                        // 2 el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
                        el: '#app',
                        // 3 data 对象就是渲染到页面上的数据
                        data: {
                                username: 'zs'
                        }
                })
        </script>

八、vue 的指令

        1 指令的概念
                指令(Directives) 是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
                vue 中的指令按照不同的用途可以分为如下 6 大类：
                        ① 内容渲染指令
                        ② 属性绑定指令
                        ③ 事件绑定指令
                        ④ 双向绑定指令
                        ⑤ 条件渲染指令
                        ⑥ 列表渲染指令
                接下来将对每个指令进行介绍
        2 内容渲染指令
                内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个：
                        ① v-text
                                示例1：
                                        <p v-text="username"></p>
                                        代码说明：
                                                v-text 是 vue 的指令，但在 p标签看来，它是一个自定义属性，不过一般称为指令，
                                                username 是程序员自己写的一个数据，在把 vue.js 导入页面之后，可以在 script 标签
                                                的 data 里面通过键值对的形式定义数据。在本示例里，是把 username 的值渲染到 p 标签里。
                                示例2：
                                        <p v-text="sex">性别</p>
                                        代码说明：
                                                把 sex 的值渲染到 p 标签里，新的值会覆盖原来的内容。在本示例里，性别 会被 sex 的值覆盖掉。
                        ② { { }}
                                说明：
                                        vue提供的 { { }} 语法，专门用来解决 v-text 会覆盖原先文本内容的问题。
                                        这种 { { }} 语法的专业名词是插值表达式 (英文名为：Mustache)。
                                示例：
                                        <p>性别：{ {sex}}</p>
                                        代码说明：
                                                把 sex 的值插入 p 标签里，但是不会改变原先的内容。本示例是把 sex 的值插到性别后面。
                                注意：
                                        插值表达式不能用在元素的属性上，比如：
                                                <input type="text" placeholder=