从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

https://www.bilibili.com/video/BV1zq4y1p7ga?from=search&seid=15434551217114800472

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

20

P1 pink老师i解Vue全套教程亮点

P2 Vue基础-00课程介绍

axios 啊x楼 ajax 啊佳

P3 Vue2.0-01学习目标1

0理解什么是前端工程化
转变对前端开发的认知
2了解webpack的基本用法
为后面Vue和React课程的学习做技术储备
3不强制要求大家能手动配置webpack
一定要知道webpack在项目中有什么作用
清楚webpack中的核心概念

P4 Vue2.0-02工程化的概念

小白眼中的前端开发：
会写 HTML+ CSS +JavaScript就会前端开发
需要美化页面样式，就拽一个bootstrap过来
需要操作DOM或发起Ajax请求，再拽一个jQuery过来
需要快速实现网页布局效果，就拽一个Layui过来

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

http://layui.com

https://www.layui.site/

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

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

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

早期的前端工程化解决方案：
grunt（https://www.gruntjs.net/）
gulp（https://www.gulpjs.com.cn/）
目前主流的前端工程化解决方案：
webpack（https://www.webpackjs.com/）
parcel（https://zh.parceljs.org/）开发第三方包时多用

P5 Vue2.0-037解webpack的概念

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

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

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

P6 Vue2.0-04.webpack基础-初始化隔行变色的案例

ul>li{这是第$个}*9

$(function(){
    $('li:odd').css('background-color','red')
     $('li:even').css('background','red')
})

P7 Vue2.0-05.webpack基础-安装和配置webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-S是--save的简写
-D是--save-dev的简写

1.在项目根目录中，创建名为webpack.config.js的webpack配置文件
module.exports={
    mode:'development' //mode 用来指定构建模式，可击值有development和production
}
module.exports //使用Node.js中的导出语法，向外导出一个webpack的配置对象
2.在package.json的scripts节点下，新增dev脚本如下
"scripts":{"dev":"webpack"} //script节点下的脚本，可以通过npm run技行，例如npm run dev
3.在终端中运行npm run dev命令，启动webpack进行项目的打包构建
直接终端webpack 也行

P8 Vue2.0-06.webpack基础-了解mode可选值的应用场景

mode节点的可选值有两个，分别是：
development
开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用

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

结论：开发时候一定要用development，因为追求的是打包的速度，而不是体积
反过来，发布上线的时候一定能要用productiond，因为上线追求的是体积小，而不是打包速度快！

P9 Vue2.0-07.webpack基础-指定webpack的entry和output

4.3 webpack中的默认约定
在webpack 4.x和5.x的版本中，有如下的默认约定：
0默认的打包入口文件为src-> index.js
默认的输出文件路径为dist-> main.js
注意：可以在webpack.config.js中修改打包的默认约定

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

const path=require('path')//导入node.js中专门操作路径的模块
module.exports={
    entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
    output:{
    path:path.join(__dirname,'./dist'),//输出文件的存放路径
    filename:'main.js'//   输出文件的名称 
}
}
__dirname当前文件路径

P10 Vue2.0-08.插件-安装和配置webpack-dev-server这个插件

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

webpack-dev-server
类似于node.js阶段用到的nodemon工具
每当修改了源代码，webpack会自动进行项目的打包和构建
html-webpack-plugin
webpack中的HTML插件（类似于一个模板引擎插件）
可以通过此插件自定制index.html页面的内容

npm install webpack-dev-serve@3.11.2 -D

修改package.json-> scripts中的dev命令如下
"scripts":{
    "dev":"webpack serve"
}
webpack-dev-server会启动一个实时打包的http服务器

P11 Vue2.0-09插件-介绍webpack-dev-server的工作原理

内存中 快 根目录

P12 Vue2.0-10.插件-安装和配置html-webpacl-plugin这个插件

npm install html-webpack-plugin@5.3.2 -D

配置html-webpack-plugin webpack.config.js
const HtmlPlugin=require('html-webpack-plugin')//得到一个枸造函数
//创建HTML插件的实例对象
const htmlPlugin=new HtmlPlugin({
    template:'./src/index.html',//指定原文件的存放路径
    filename:'./index.html' //指定生成的文件的存放路径
})
module.exports={
    mode:'developmenet',
    plugins:[htmlPlugin] //通过plugins 节点，使htmlPlugin插件生效
}

P13 Vue2.0-11插件-了解html-webpack-plugin插件的特性

html-webpack-plugin 自动添加js

通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件

P14 Vue2.0-12.插件-了解devServer中常用的选项

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

devServer:{
    open:true,//初决打包完成后，自动打开浏览器
    host:'127.0.0.1',//实时打包所使用的主机地址
    port:80     //实时打包所使用的端口号
}

注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

在http协议中，如果端口号是80，则可以被省略

P15 Vue2.0-13.loader-说明loader的作用

1.loader概述
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！

loader加载器的作用：协助webpack打包处理特定的文件模块。比如：
css-loader可以打包处理.css相关的文件
less-loader可以打包处理.less相关的文件
babel-loader可以打包处理webpack无法处理的高级JS语法

打包处理css文件
运行npm i style-loader@3.0.0 css-loader@5.2.6-D命令，安装处理css文件的loader
在webpack.config.js的module-> rules数组中，添加loader规则如下：

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
        {test:/.css$/,use:['style-loader','css-loader']}
    ]
}

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

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

js 导入css 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）

P17 Vue2.0-15.loader-打包处理less文件

打包处理less文件
运行npm i less-loader@10.0.1 less@4.1.1-D命令
在webpack.config.js的module-> rules数组中，添加loader规则如下：

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
        {test:/.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

P18 Vue2.0-16.loader-回顾base64的图片优缺点

打包处理样式表中与url路径相关的文件
运行npm i url-loader@4.1.1 file-loader@6.2.0-D命令
在webpack.config.js的module-> rules数组中，添加loader规则如下：

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
        {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'}
    ]
}

其中？之后的是loader的参数项：limit用来指定图片的大小，单位是字节（byte）
只有<=limit大小的图片，才会被转为base64格式的图片

性能优化 请求html随带一块下来 base64(体积变大) 推荐小logo等转 轮播图不建议大 直接图片要多发请求

精灵图

P19 Vue2.0-17.loader-演示图片loader加载的问题

index.js
导入图片，得到图片文件
import logo from './images/logo.jpg'
给img标签的src动态赋值
$('.box').attr('src',logo)
<img src=''/>

P20 Vue2.0-18.loader-配置加载图片的loader

如果需要调用的loader只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组

P21 Vue2.0-19.loader-介绍webpack处理样式的过程

如果某个模块中，使用from接收到的成员为undefined，则没必要进行接收

P22 Vue2.0-20.loader-url-loader的limit选项

P23 Vue2.0-21.loader-使用babel-loader转换处理高级的js语法

6，打包处理js文件中的高级语法
webpack只能打包处理一部分高级的Javascript语法。对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。例如webpack无法处理下面的JavaScript代码：

//1，定义了名为info的装饰器
function info(target){
    //2，为目标添加静志属性info
    target.info='Person info'
}
//3，为Person类应用info装饰器
@info
class Person{}
//4，打印Person的静态属性info
console.log(Person.info)

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数组中，添加loader规则如下：

//社意：必须使用exclude指定排除项；因为node-modules 日录下的第三方包不需要被打包
{text:/\.js$/,use:'babel-loader',exclude:/node_modules/}

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

module.exports={
    //声明babel可用的插件
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

详情请参考Babel的官网https://babelis.io/docs/en/babel-plugin-proposal-decorators

P24 Vue2.0-22发布-配置build命令

2.配置webpack的打包发布
在package.json文件的scripts节点下，新增build命令如下：

"scripts":{
    "dev":"webpack serve", //开发环境中，运行dev命令
    "build":"webpack --mode production" //  项日发布时，运行build命令  
}

--model是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：通过--model指定的参数项，会覆盖webpack.config.js中的model选项。

P25 Vue2.0-23.发布-优化图片和js文件的存放路径

把Javascript文件统—生成到js目录中

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

output:{
    path:path.join(__dirname,'dist'),
    //明确告诉webpack把生成的bundle.js文件存放到dist月录下的js子目录中
    filename:'js/bundle.js'    
}

4·把图片文件统一生成到image目录中
修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
        {test:/\.jpg|png|gif$/,use:{
            loader:'url-loader',
            options:{
                limit:22228,
                //明确指定把打包生成的图片文件，存做到dist目求下的image文件夹中
                outputPath:'image'
            }
        }}
    ]
}
或 use:'url-loader?limit=470&outputPath=images'

P26 Vue2.0-24发布-配置和使用clean-webpack-plugin插件自动删除dist目录

为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置clean-webpack-plugin插件

//1，安装清理dist 目录的webpack插件
npm install clean-webpack-plugin@3.0.0 -D
//2，按需导入插件、得到插件的构适两数之后，创建插件的实例对象
const {CleaWebpackPlugin}=require('clean-webpack-plugin')
const cleanPlugin=new CleaWebpackPlugin()
//3，把创建的cleanPlugin插件实例对象，挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin] //挂载插件

http://npmjs.com/search 查包帮助

P27 Vue2.0-25.发布-总结发布的主要流程

自学能力 看官网文档

P28 Vue2.0-26.SourceMap-开发模式下如何配置SourceMap

2.什么是Source Map Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

3.1默认Source Map的问题
开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。示意图如下：

3.2解决默认Source Map的问题
开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports={
    mode.'development',
    //eval-source-map 仅限在"开发模式"下使用，不建议在"生产模式"下使用.
	//此选项生成的Source Map能够保证"运行时报错的行数"与“源代码的行数"保持一致
    devtool:'eval-source-map'
    //省略其它配置项.
}

P29 Vue2.0-27.SourceMap-在发布项目的时候出于安全性考虑建议关闭SourceMap

4.webpack生产环境下的Source Map在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过sburce Map的形式暴露给别有所图之人。

安全"点击链接时不会易露真正的源码

直接定位到压缩混淆过后的代码。
源代码没有波暴露出去

P30 Vue2.0-28.SourceMap - SourceMap的最佳实践

4.1只定位行数不暴露源码
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtol的值设置为nosources-source-map。实际效果如图所示：

安全：只定位具体报错的行数 点击链接时，不会暴露源码

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

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

P31 Vue2.0-29，拓展-讲解webpack中@的原理和好处

实际开发中需要自己配置webpack吗？

答案：不需要！
实际开发中会使命令行工具（俗称CLI）一键生成带有webpack的项目
开箱即用，所有webpack配置项都是现成的！
我们只需要知道webpack中的基本概念即可！

建议大家使用@表示src源代码目录，从外往里查找；不要使用../从里往外查找

webpack.config.js
module.exports={
    resolve:{
        alias:{
            //告诉webpack，程序员写的代码中，@符号表示src这一层目录
            '@':path.join(__dirname,'./src/')
        }
    }
}

P32 Vue2.0-30拓展-在Chrome浏览器中安装vue-devtools调试工具

json formatter

P33 Vue2.0-01简介-了解vue是什么

什么是vue
1，构建用户界面
。用vue往html页面中填充数据，非常的方便

2，框架
0框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
。要学习vue，就是在学习vue框架中规定的用法！
o vue的指令、组件（是对UI结构的泉用）、路由、Vuex，vue组件库
。只有把上面老师罗列的内容掌握以后，才有开发vue项目的能力！| 1

P34 Vue2.0-02简介-vue的两个特性

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

数据驱动视图

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

双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据。
js数据的变化，会被自动渲染到页面上
页面上表单采焦的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

2.1数据驱动视图
在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构

好处：当页面数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定。

P35 Vue2.0-03.简介-mvvm

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MWM指的是Model，View和ViewModel，它把每个HTML页面都拆分成了这三个部分，如图所示：

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

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

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

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

当前，vue共有3个大版本，其中：
2.x版本的vue是目前企业级项目开发中的主流版本

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

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

P36 Vue2.0-04.vue基础用法-初步使用vue

56

P37 Vue2.0-05.vue基础用法-体验vue调试工具和数据驱动视图

1，安装vue-devtools调试工具
vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发。

Chrome浏览器在线安装vue-devtools：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox浏览器在线安装vue-devtools：
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

P38 Vue2.0-06.vue基础用法-内容渲染指令

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

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

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

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

v-text
{{}}
V-html

v-text指令的缺点：会覆盖元素内部原有的内容！

vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式（英文名为：Mustache）。插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！！

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

v-html指令的作用：可以把带有标签的字符电，這染成真正的HTML内容！

P39 Vue2.0-07.vue基础用法-el属性的使用注意点

P40 Vue2.0-08.vue基础用法-属性绑定指定

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

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

vue规定v-bind：指令可以简写为：

P41 Vue2.0-09.vue基础用法-在插值和属性绑定中编写js语句

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

P42 Vue2.0-10.事件绑定-了解v-on指令的基本用法

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听

P43 Vue2.0-11.事件绑定-处理函数的简写形式

P44 Vue2.0-12.事件绑定-通过this访问数据源中的数据

P45 Vue2.0-13.事件绑定-绑定事件并传参

P46 Vue2.0-14事件绑定-v-on指令的简写形式

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

P47 Vue2.0-15事件绑定-Sevent

vue提供了内置变量，名字叫做Sevent，它就是原生DoM的串件对象e

P48 Vue2.0-16.事件-事件修饰符

阻止默认行为 e.preventDefault() =@click.prevent

冒泡 e.stopPropagation() =@click.stop

捕获 .capture

在事件处理函数中调用event.preventDefault（）或event.stopPropagation（）是非常常见的需求。因此，
vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：

事件修饰符
说明
.prevent 阻止默认行为（例如：阻止a连接的跳转、阻止表单的提交等）
.stop 阻止事件冒泡
.capture 以捕获模式触发当前的事件处理函数
.once绑定的事件只触发1次
self 只有在event.target是当前元素自身时触发事件处理函数

P49 Vue2.0-17上午小结

P50 Vue2.0-18.事件绑定-按键修饰符

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

@keyup.enter @keyup.esc

P51 Vue2.0-19双向绑定-了解v-model指令的用法

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

1.input输入框
o type="radio"
o type="checkbox"
o type="xxxx"
2.textarea
3.select

P52 Vue2.0-20.双向绑定-v-model的修饰符

为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：

.number自动将用户的输入值转为数值类型
.trim自动过滤用户输入的首尾空白字符
.lazy在"change"时而非"input"时更新

input实时同步 change离开统一更新

P53 Vue2.0-21.条件渲染-了解v-if和v-show的区别

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。 2个

v-show的原理是：动态为元素添加或移除display：none样式，来实现元素的显示和隐藏
如果要频繁的切换元素的显示状态，用v-show性能会更好
v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

​ 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好

html编译成 js文件 不存在从上向下

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

P54 Vue2.0-22.条件渲染-v-if配套的指令

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

推荐大家安装的VScode中的Vue插件：
1.Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
2.Vetur https://marketplace.visualstudio.com/items?itemName=octref.vetur

v-else-if

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

P55 Vue2.0-23.列表渲染-了解v-for的基本用法

1.6列表渲染指令
vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法，其中：

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

v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为（item，index）in items，

P56 Vue2.0-24.列表渲染-强调v-for循环中key值的注意点

key的注意事项

key的值只能是字符串或数字类型
key的值必须具有唯一性（即：key的值不能重复）
建议把数据项id属性的值作为key的值（因为id属性的值具有唯一性）
使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）
建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）

P57 Vue2.0-25.案例-演示案例需求

P58 Vue2.0-26案例-循环渲染表格行的数据

P59 Vue2.0-27.案例-练习中遇到的小问题

插值不能写js语句 简单写js表达式

P60 Vue2.0-28案例-动态生成checkbox的id属性值

80

P61 Vue2.0-29案例-实现删除品牌的功能

P62 Vue2.0-30案例-判断用户填写的内容是否为空

form表单元素有@submit事件

P63 Vue2.0-31.案例-实现添加的功能

P64 Vue2.0-32总结

P65 Vue2.0-01.过滤器-过滤器的基本用法

过滤器（Fitters）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。

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

{{message|capitalize}}
<div v-bind:id="rawId | formatId"></div>

vue2 fitters vue3没了/不重要

过滤器函数，必须被定义到filters节点之下过滤器本质上是函数

字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来

字符串的slice方法，可以截取宁符串，从指定素引往后截取

P66 Vue2.0-02过滤器-使用Vue.filtter定义全局过滤器

Vue.fitter('data',(val)=>{})

2.2私有过滤器和全局过滤器
在filters节点下定义的过滤器，称为"私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用。
如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

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

P67 Vue2.0-03.过滤器-使用全局过滤器格式化时间

datjs中文网:http://dayjs.fenxianglu.cn

尽力第三方包库来写

P68 Vue2.0-04.过滤器-过滤器的其他用法

过滤器可以串联地进行调用

{{message|fitterA|fitterB}}

过滤器的本质是Javascript函数，因此可以接收参数

{{message|filterA(arg1,arg2)}}
//第一个参数：永远都是"管道行"前面待处理的值从第二个参数开始，才是调用过滤器时传递过来的arg1和arg2参数
Vue.filter('filterA',(msg,arg1.arg2)=>{})

过滤器仅在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

P69 Vue2.0-05.侦听器-了解侦听器基本的语法格式

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

const vm=new Vue({
    el:'#app',
    data:{username:''},
    watch:{
        //监听username值的变化
	    //newWal是"变化后的新值"，oldVal是"变化之前的旧值"
        username(newVal,oldVal){
            console.log(newVal,oldVal)
        }
	}             
})

侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可

P70 Vue2.0-06.侦听器-判断用户名是否被占用

https://www.escook.cn/api/finduser/

P71 Vue2.0-07侦听器-immediate选项

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

watch:{
    username:{
        //handler是固定写法，表示当username的值变化时，自动调用handler处理函数
        handle:function(newVal){
            
        }
    },
    //表示页面初次渲染好之后，就立即触发当前的watch侦听器
    immediate:true    
}

侦听器的格式
1．方法格式的侦听器
0缺点：无法在刚进入页面的时候，自动触发！！！
2.对象格式的侦听器
o好处：可以通过immediate选项，让侦听器自动触发！！！

immediate选项的默认值是false immediate的作用是：控制侦听器是否自动触发一次！

P72 Vue2.0-08.侦听器-deep选项

最简单的方案

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

好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化！！！

const vm=new Vue({
    el:'#app',
    data:{
        info:{
            username:'admin'
        }
    },
    watch:{
        info:{
            handler(){},
            //开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听器
            deep:true
        }
        //或
        //如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username'(){}
    }
})
直接如果侦听的是一个对象，如果对象中的属件发生了变化，不会触发侦听器！

P73 Vue2.0-09.侦听-用法总结

P74 Vue2.0-10.计算属性-了解计算属性的应用场景

1.什么是计算属性
计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。示例代码如下：

computed:{}

P75 Vue2.0-11.计算属性-了解计算属性的语法和特点

计算属性也可以this访问

计算属性
特点：
1，定义的时候，要被定义为"方法"
2，在使用计算属性的时候，当普通的属性使用即可好处：
1，实现了代码的复用

2，只要计算属性中依赖的数据源变化了，则计算属性会自动审新求信！

P76 Vue2.0-12.axios-使用axios发起基本的GET请求

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

axios（发音：艾克C奥斯）是前端圈最火的、专注于数据请求的库。

axios({
    method:'get',url:""
}).then(result=>{})

http://www.liulongbin.top:3006/api/getbooks

axios在请求到数据之后，在真正的数据之外，套了-
层壳。

P77 Vue2.0-13.axios-结合async和await调用axios

axios({
    method:'get',url:"",
    //URL 中的查询參数 get
    params:{},
    //请求体参数 post
    data:{}
}).then(result=>{})

P78 Vue2.0-14.axios-使用解构赋值

//解构赋值的时候，使用：进行重命名
const {data:res}={}

P79 Vue2.0-15.axios-基于axios.get和axios.post发起请求

axios.get('url',{
    params:{} //get参数
})
axios.post('url':{/*直接post请求体数据*/})

' http://www.liulongbin.top:3006/api/post

P80 Vue2.0-16.vue-cli-个绍并安装vue-cli

1·什么是单页面应用程序
单页面应用程序（英文名：Single Page Application）简称SPA，顾名思义，指的是一个web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

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

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

npm install -g @vue/cli

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

P81 Vue2.0-17.vue-cli-演示如何基于vue-cli创建vue项目

vue -V @vue/cli4.5.13

package.json选时 独立文件选择

in dedicated config file (babel,eslint,etc文件)分别安装独立文件 全部package.json混淆乱

把Babal，ESlint等插件的配置项。放到自已独立的配置文件中

FastStone绘图

滑动冻结 轻轻按下解冻

P82 Vue2.0-18.vue-cli-把项目跑起来看效果

P83 Vue2.0-19.vue-cli-介绍项目的目录结构

P84 Vue2.0-20.vue-cli-了解src目录的构成

vue项目中src目录的构成：

assets文件夹；存放项目中用到的静态资源文件，例如：css样式表、图片资源
components 文作夹：程序员封装的、可复用的组件，都要放到components 目录下

main.js是项目的入口文件，整个项目的运行，要先执行main.js

App.vue是项目的根组件

P85 Vue2.0-21.vue-cli-了解vue项目运行的过程

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

Vue构造函数

把render函数指定的组件，渲染到HTML页面中

其中：
App.vue用来编写待渲染的模板结构
index.html中需要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中

P86 Vue2.0-22.vue-cli-组件的基本使用

el:'#app' == $mount('#app') vue 实例的$mount（）方法，作用和el属性完全一样！

P87 Vue2.0-23.vue组件-组件的三个组件部分

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

2，vue中的组件化开发
vue是一个支持组件化开发的前端框架。
vue中规定：组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。

3.vue组件的三个组成部分
每个.vue组件都由3部分构成，分别是：
template->组件的模板结构
script->组件的Javascript行为
style->组件的样式

注意：.vue组件中的data不能像之前一样，不能指向对象。
注意：组件中的data必须是一个函数

P88 Vue2.0-24.vue组件-在组件中定义methods方法

P89 Vue2.0-25.vue组件-启用less语法以及唯一根节点

P90 Vue2.0-01复习

P91 Vue2.0-02.组件-使用组件的三个步骤

组件在被封裴好之后，彼此之间是相互独立的，不存在父子关系 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系，兄弟关系

步骤1：使用import语法导入需要的组件
import x from '@/components/x.vue'
步骤2：使用components节点注册组件
export default{
    components:{
        x
    }
}
步骤3：以标签形式使用刚才注册的组件
<x></x>

P92 Vue2.0-03.组件-在App根组件中使用Right组件

P93 Vue2.0-04.组件-在VScode中配置@路径提示的插件

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

Path Autocomplete

Vscode settings.json

    //导入文件时是否携带文件的扩展名
    "path-autocomplete.extensionOnImport": true,
    //配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@":"${folder}/src"
    },

P94 Vue2.0-05.组件-使用Vue.component全局注册组件

4.2通过components注册的是私有子组件

在vue项目的main.js入口文件中，通过Vue.component（）方法，可以注册全局组件
import X from '@/components/X.vue'
参数1：字符串格式，表示组件的"注册名称"
参数2：需要被全局注册的那个组件
Vue.component("X",X)

P95 Vue2.0-06组件-auto close tag自动闭合标签的插件

Auto Close Tag

P96 Vue2.0-07.props-为count组件声明props自定义属性

props是组件的自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性！

props是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值

自定义属性的名字，是封装者自定义的（只要名称合法即可）

P97 Vue2.0-08.props-结合v-bind使用自定义属性

P98 Vue2.0-09.props-props是只读的

props中的数据，可以直接在模板结构中被使用

vue规定：组件中封装的自定义属性是只读的，程序员不能直接修改props的值。否则会直接报错：

new Vue({
    props:['init'],
    data(){
        return {
            count:this.init
        }
    }
})

要想修改props的值，可以把props的值转存到data中，因为data中的数据都是可读可写的！

P99 Vue2.0-10.props-default默认值

//在声明自定义属性时，可以通过default来定义属性的默认值。
export default{
    props:{
        init:{
            type:Number,
            default:0,
            required:true //必须传值 标签
        }
    }
}

P100 Vue2.0-11.props-type值类型

P101 Vue2.0-12.props-required必填项

http://toutiao.liulongbin.top

P102 Vue2.0-13样式中突-了解scoped的使用和底层实现原理

6，组件之间的样式冲突问题
默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是：
单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
每个组件中的样式，都会影响整个index.html页面中的DOM元素

data-v-number

P103 Vue2.0-14样式冲突-使用deep修改子组件中的样式

/deep/ h5{
    color:pink;
}
>>> h5{
    
}

当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到/deep/

/deep/样式穿透

P104 Vue2.0-15.vue组件的实例对象

vue-template-compiler vue模板编译器

P105 Vue2.0-16.生命周期-了解生命周期和生命周期函数的概念

1，生命周期&生命周期函数
生命周期（Life Cycle）是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

beforeCreate created 还在内存

P106 Vue2.0-17生命周期-初步了解组件创建的过程

4．生命周期图示
可以参考vue官方文档给出的“生命周期图示"，进一步理解组件生命周期执行的过程：https://cn.vuejs.org/v2/guide/instance.html进生命周期图示

P107 Vue2.0-18生命周期-了解beforeCreate和created生命周期函数的特点

Init Events&Lifecycle初始化事件和生命周期函数
beforeCreate 组件的props/data/methods尚未被创建，都处于不可用状态
Init injections&reactivity 初始化props，data，methods
created 组件的porps/data/methods已创建好，都处于可用的状态。但是组件的模板结构尚未生成！
	ajax发起请求数据
	经常在它里面，调用methods中的方法，请求服务器的数据。
	并且，把请求到的数据，转存到data中，供template模板渲染的时候使用！
Compile template into render function/Compile el's outerHTML as template 基于数据和模板 在内存中编译生成 HTML结构
beforeMount 将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。
Create vm.Sel and replace "el" with it 用内存成的HTML结构，替换掉el属性指定的DOM元素。
mounted 已经把内存中的HTML 结构，成功的渲染到了浏览器之中。此时浏览器中已然包含了当前组件的DOM结构。
beforeUpdate 将要根据变化过后、最新的数据，重新渲染组件的模板结构。
Virtual DOM re-render and patch 根据最新的数据，重新渲染组件的DOM结构
upDated 已经根据最新的数据，完成了组件DOM结构的重新渣染。
	当数据变化之后，为了能够操作到最新的DOM结构，必须把代码写到updated生命周期函数中
beforeDestroy 将要销毁此组件，此时尚未销毁，组件还处于正常工作的状态
Teardown watchers, child components and event listeners 销毁当前组件的数据侦听器、子组件、事件监听
destroyed 組件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除！

P108 Vue2.0-19生命周期-7解beforeMount和mounted生命周期函数

P109 Vue2.0-20.生命周期-组件运行阶段的生命周期函数

P110 Vue2.0-21.生命周期-组件销毁阶段的生命周期函数

P111 Vue2.0-22父向子传值-使用自定义属性

在项目开发中，组件之间的最常见的关系分为如下两种：
①父子关系②兄弟关系

父组件向子组件共享数据需要使用自定义属性

P112 Vue2.0-23父向子传值-演示

P113 Vue2.0-24.父向子传值-不要修改props的值

P114 Vue2.0-25子向父传值-自定义事件

子组件向父组件共享数据使用自定义事件。

子
this.$emit('num',this.count)
父
<son @num="num1"></son>
methods:{
    num1(val){
    }
}

emit iMi

P115 Vue2.0-26.兄弟组件数据共享-EventBus

在vue2.x中，兄弟组件之间数据共享的方案是EventBus

EventBus.js

A
import bus from './eventBus.js'
export default{
    data(){
        return{msg:'hello'}
    },
    methods:{
        sendMsg(){
            bus.$emit('share',this.msg) //调用
        }
    }
}
中间eventBus.js
import Vue from 'vue'
export default new Vue()
B
import bus from './eventBus.js'
export default{
    data(){
        return {msgFromLeft:''}
    },
    created(){
        bus.$on('share',val=>{ //声明
            this.msgFromLeft=val
        })
    }
}

EventBus的使用步骤
创建eventBus.js模块，并向外共享一个Vue的实例对象
在数据发送方，调用bus.semit（事件名称，要发送的数据）方法触发自定义事件
在数据接收方，调用bus.$son（事件名称，事件处理函数）方法注册一个自定义事件

P116 Vue2.0-27.兄弟组件数据共享-演示EventBus的使用

P117 Vue2.0-28.总结

npm uni xx 卸载 uninstall

P118 Vue2.0-01.复习-组件之间数据共享的三种方案

P119 Vue2.0-02.ref-使用ref引用DOM元素

jquery牛逼简化了程序员操作DOM的过程
vue优势：MVVM在vue中，程序员不需要操作DOM，程序员只需要把数据维护好即可！（数据驱动视图）
结论：在vue项目，墙裂不建议大家安装和使用jQuery！！！
假设：在vue中，需要操作DOM了，需要拿到页面上某个DOM元素的引用，此时怎么办？

1，什么是ref引用
ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。
每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的$refs指向一个空对象。

不能重名 后面覆盖前面

<h1 ref='x'>xx</h1>
this.$refs.x.style.color='red'

P120 Vue2.0-03.ref-使用ref引用组件案例

如果想要使用ref引用页面上的组件实例，则可以按照如下的方式进行操作：

this.$refs.children.add()

P121 Vue2.0-04.ref-初步实现按钮和文本框的按需展示

P122 Vue2.0-05.ref-了解this.$nextTick的应用场景

数据dom更新完才延迟调用 this.$nextTick(cb)

6，this.$nextTick（cb）方法
组件的$nextTick（cb）方法，会把cb回调推迟到下一个DOM更新周期之后执行。通俗的理解是：等组件的DOM更新完成之后，再执行cb回调函数。从而能保证cb回调函数可以操作到最新的DOM元素。

P123 Vue2.0-06.ref-演示updated为啥不行

P124 Vue2.0-07.数组中的方法-some循环

forEach找到无法停止 forEach循环一旦开始，无法在中间被停止

some 在找到对应的项之后，可以通过return true固定的语法，来终止some循环

P125 Vue2.0-08.数组中的方法-every循环

every 判断数组每一项满足返回true 否则false

P126 Vue2.0-09数组中的方法-reduce的基本用法

reduce 绿丢s 累加器

filter过滤 返回新数组

reduce((累加的结果，当前循环项)=>{},初始值)

arr.filter(item=>item.state).reduce((amt,item)=>{
    return amt+=item.price*item.count
},0)

P127 Vue2.0-10.数组中的方法-reduce的简化写法

P128 Vue2.0-11.购物车案例-导入,注册,使用Header组件

P129 Vue2.0-12.购物车窦例-基于axios请求列表数据

https://www.escook.cn/api/cart

P130 Vue2.013.购物车案例-请求回来的数据转存到data中

只要请求回来的数据，在页面渲染期间要用到，则必须转存到data中

P131 Vue2.0-14.购物车窦例-循环渲染Goods组件

大写组件

P132 Vue2.0-15.购物车案例-为Goods组件封装title和pic属性

P133 Vue2.0-16.购物车案例-为Goods组件封装price和state属性

P134 Vue2.0-17购物车案例-分析封装props俩种方案的优缺点对比

P135 Vue2.0-18 购物车-分析如何修改商品的勾选状态

P136 Vue2.0-19购物车例-自定义state-change事件

P137 Vue2.020.购物车案例-修改对应商品的勾选状态

P138 Vue2.0-21.购物车案例-定义fullState计算属性

P139 Vue2.0-22.购物车-把全选状态传递给Footer子组件

P140 Vue2.0-23.购物车案例-实现全选功能

P141 Vue2.0-24.购物车案例-计算商品的总价格

11.toFixed(2) == 11.00

P142 Vue2.0-25.购物车案例-把购买数量传给counter组件

P143 Vue2.0-26.购物车案例-准备要发送给App的数据

嵌套多用eventBus/provide-inject

P144 Vue2.0-27.购物车案例-实现数量值的修改

P145 Vue2.0-28.购物车案例-动态计算已勾选商品的数量 实现数量的减法操作

P146 Vue2.0-01课程内容介绍

P147 Vue2.0-02动态组件-介绍component标签的基础用法

动态组件指的是动态切换组件的显示与隐藏。

vue提供了一个内置的组件，专门用来实现动态组件的渲染。

data（）{
//1，当前要渲染的组件名称
return{comName：'Left'}
}
<！--2，通过is属性，动态指定要渲染的组件-->
<component：is="comName"></component>
<！--3，点击按钮，动态切换组件的名称->
<button @click="comName ='Left'">展示Left组件</button>
<button @click="comName ='Right'">展示Right组件</button>
<！--1.component标签是vue内置的，作用：组件的占位符-->
<！--2.is属性的值，表示要渲染的组件的名字-->

vue2 typescruot
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';// @ is an alias to /src
@Component({
  components: {  
  },
})
export default class About extends Vue {}
</script>
About组件

P148 Vue2.0-03动态组件-动态切换组件的展示与隐藏

动态组件 component 多余tabs

P149 Vue2.0-04动态组件-keep-alive的使用

缓存起来

4.keep-alive对应的生命周期函数

当组件被缓存时，会自动触发组件的deactivated生命周期函数。
当组件被激活时，会自动触发组件的activated生命周期函数。

activated deactivated

当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期
当时，当组件被激活的时候，只会触发activated生命周期，不再触发created，因为组件没有被重新创建

P150 Vue2.0-05动态组件-学习keep-live组件的include和exclude属性

include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：

    <keep-alive include="Left,Right">
      <component :is="comName"></component>
    </keep-alive>
 <keep-alive exclude="Left">
      <component :is="comName"></component>
    </keep-alive>

<！-在使用keep-alive的时候，可以通过include指定哪些组件需要被缓存；
<l-或者，通过exclude属性指定哪些组件不需要被缓存，但是：不要同时使用include和exclude这两个属性-->

P151 Vue2.0-06.动态组件-了解组件注册名称和组件声明时的name的区别

如果在“声明组件"的时候，没有为组件指定name名称，则组件的名称默认就是"注册时候的名称"

<script lang="ts">
import {Component,Vue} from 'vue-property-decorator'
@Component({
    name:"MyLeft" //起名称 默认组件名字
})
export default class Left extends Vue{}
</script>

当提供了name属性之后，组件的名称，就是name属性的值
对比：
1，组件的“注册名称"的主要应用场景是：以标签的形式，把注册好的组件，這染和使用到页面结构之中
2.组件声明时候的"name"名称的主要应用场景：结合skeep-alive>标签实现组件缓存功能；以及在调试工具中看到组件的name名称

P152 Vue2.0-07插槽-了解插槽的基本用法

1，什么是插槽
插槽（Slot）是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽

P153 Vue2.0-08插槽-v-slot指令

<！--声明一个插槽区域-->
<！--vue官方规定：每一个slot插槽，都要有一个name名称-->
<！--如果省略了slot的name属性，则有一个默认名称叫做default-->
<slot name='default'></slot>
<p slot="default"></p>
v-slot:default 只能写在组件上或者template标签上
<template v-slot:default></template>

template只是包裹作用,不会在页面留下

<！--1.如果要把内容填充到指定名称的插槽中，需要使用v-slot：这个指令-->
<！--2.v-slot：后面要跟上插槽的名字-->
<！--3.v-slot：指令不能直接用在元素身上，必须用在template标签上-->
<！--4.template这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被洁染为任何实质性的html元素-->

P154 Vue2.0-09插槽-v-slot的简写形式以及插槽的后备内容

<template v-slot:default></template>
=====
<template #default></template>
5.v-slot：指令的简写形式是#
<slot>default</slot>

2.2后备内容
封装组件时，可以为预留的插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。示例代码如下：

P155 Vue2.0-10插槽-具名插槽的定义和使用

3，具名插槽 slot 有name 就是

P156 Vue2.0-11.插糟-作用域插槽的基本用法

相当子传父

<slot name="content" msg="hello"></slot>
<left>
	<template #content="scope">
     	{{scope}} //{msg:hello}   
     </template>    
</left>
作用城插槽
<left> 解构赋值
	<template #content="{msg}">
     	{{msg}} //{msg:hello}   
     </template>    
</left>

<！--在封装组件时，为预留的提供属性对应的值，这种用法，叫做“作用城插槽"->

P157 Vue2.0-12.插槽-作用域插槽的解构赋值

P158 Vue2.0-13.插槽-基于slot插槽改造购物车案例-1

P159 Vue2.0-14.插槽-基于slot插槽改造购物车案例-2

P160 Vue2.0-15.插槽-基于slot插槽改造购物车案例-3

this.$emit('xx',id)
<left @xx='fun(index,$event)'></left>
fun(index,id){}

P161 Vue2.0-16.自定义指令-私有自定义指令的基础用法

1，什么是自定义指令
vue官方提供了v-text，v-for，v-model，v-if等常用的指令。除此之外vue还允许开发者自定义指令。

vue中的自定义指令分为两类，分别是：

私有自定义指令
全局自定义指令

在每个vue组件中，可以在directives节点下声明私有自定义指令。示例代码如下：

directives:{
    color:{
        //为绑定到的HTML元意设置红色的文字
        bind(el){
            //形参中的el是绑定了此指令的、原生的DOM对象
            el.style.color='red'
        }
    }
}
bind一绑定元素上就立即触发
当指令第一次被绑定到元素上的时候，会立即触发bind函数
形参中的el表示当前指令所绑定到的那个DOM对象

P162 Vue2.0-17自定义指令-使用binding.value获取指定绑定的值

推荐叫binding

<h1 v-color="'yellow'">HelloWorld</h1>
  directives:{
    color:{
      bind(el,binding){
        el.style.color=binding.value
      }
    }
  },

P163 Vue2.0-18自h令-update函数

7.update函数
bind函数只调用1次：当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发。update函数会在每次DOM更新时被调用。示例代码如下：

<h1 v-color="color">HelloWorld</h1>
<button @click="color='red'">change</button>
  directives:{
    color:{
      bind(el,binding){
        el.style.color=binding.value
      },
      update(el,binding){
          el.style.color=binding.value
      }    
    }
  },

P164 Vue2.0-19.自定义指令-函数简写形式

如果bind和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

<h1 v-color="color">HelloWorld</h1>
<button @click="color='red'">change</button>
  directives:{
    color(el,binding){
        el.style.color=binding.value
    }
  },
在insert和update时，会触发相同的业务逻辑      

P165 Vue2.0-20.自定义指令-全局自定义指令

main.js
全局共享的自定义指令需要通过"Vue.directive（）"进行声明，示例代码如下：
Vue.directive('color',(el,binding)=>{
    el.style.color=binding.value
})
参效1：字符串，表示全丽自定义指令的名字
参数2：对象，用来接收指令的参数值
Vue.directive('color',{
    bind(el,binding){},
    update(el,binding){},
})

P166 Vue2.0-21关于main.js中的小提示

P167 Vue2.0-22.eslint-了解eslint的作用

ESLint
可组装的JavaScript和JSX检查工具

代码风格 约束代码 eslint.boolcss.corm

P168 Vue2.0-23.eslint-了解.eslintrc.js配置文件中的rules规则

debugger

P169 Vue2.0-24.eslint-初步了解ESLint的语法规则

vscode plugin ESLint

P170 Vue2.0-25.eslint-了解常用的ESLint语法规则

http://doc.toutiao.liulongbin.top/mds/1.init.html#1-2-7解-eslint-常见的语法规则

P171 Vue2.0-26.eslint-配置VSCode

vscode plugin ESLint	Prettier
vscode setting.json
//ESLint插件的配置
"editor.codeActionsOnSave": {
        "source.fixAll": true
    },
	"prettier.configPath":"C:\\Users\\admin\\.prettierrc",
        
    "eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi": false,
    //每行文字个数超出此限制将会被迫换行
    "prettier.printWidth": 300,
    //使用单引号替换双引号
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    //设置vue文件中，HTML代码的格式化插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "trailingComma":"none",
            "semi":false,
            "singleQuote":true,
            "arrowParens":"avoid",
            "printWidth":300
        },
        "js-beautify-html": {
            "wrap_attributes":false
        },
    },

P172 Vue2.0-27.eslint-配置默认格式化文档的方式

P173 Vue2.0-28.axios-演示axios的基本用法并且
发现存在的问题

设置最小高 width自动100%

P174 Vue2.0-29.axios-把axios挂载到Vue的原型上并配置请求根路径

axios.defaults.baseURL="xx.xx.xx"
Vue.prototype.axios=axios
this.axios.get()

P175 Vue2.0-30.axios-了解直接把axios挂载到Vue原型上的缺点

http://liulongbin.top:8086/login.html koo 123456

但是，把axios挂载到vue原型上，有一个缺点：不利于API接口的复用！！！

P176 Vue2.0-01，路由概念-了解前端路由的概念

1.什么是路由
路由（英文：router）就是对应关系。

4．什么是前端路由
通俗易懂的概念：Hash地址与组件之间的对应关系。

location.href .hash

P177 Vue2.0-02.路由的概念-前端路由的工作方式

前端路由的工作方式
用户点击了页面上的路由链接
导致了URL地址栏中的Hash值发生了变化
前端路由监听了到Hash地址的变化
前端路由把当前Hash地址对应的组件渲染都浏览器中

P178 Vue2.0-03.路由的概念-手动模拟简易的前端路由

只要当前的App组件一被创建，就立即监听window对象的onhashchange事件

P179 Vue2.0-04.路由的基本用法-安装和配置路由

1，什么是vue-router vue-router是vue.js官方给出的路由解决方案。它只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。
vue-router的官方文档地址：https://router.vuejs.org/zh/

vue-router安装和配置的步骤
安装vue-router包
创建路由模块
导入并挂载路由模块
声明路由链接和占位符

npm i vue-router@3.5.2 -S

在src源代码目录下，新建router/index.js路由模块，并初始化如下的代码：

//1，导入Vue和VueRouter的包
import Vue from'vue 
import VueRouter from'vue-router"
//2，调用Vue.use（）函数，把VueRouter安装为Vue的插件
Vue.use（VueRouter）
//3，创建路由的实例对象
const router =new VueRouter（）
//4，向外共享路由的实例对象
export default router

P180 Vue2.0-05.路由的基本用法-小注意点

在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做index.js的文件

P181 Vue2.0-06.路由的基本用法-在路由模块中声明路由的对应关系

P182 Vue2.0-07路由的基本用法-使用router-link替代a链接

==

P183 Vue2.0-08.路由的基本用法-redirect重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

P184 Vue2.0-09.R套路由-声明子级路由链接和占位符

P185 Vue2.0-10.嵌套路由-声明嵌套路由的规则

3.2通过children属性声明子路由规则

P186 Vue2.0-11.嵌套路由-默认子路由

{path:",component:home} 子不加/

P187 Vue2.0-12.动态路由-基本用法

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在vue-router中使用英文的冒号（：）来定义路由的参数项。示例代码如下：

动态路由params this.$route.params.id

P188 Vue2.0-13.动态路由-为路由规则开启props传参

{path:"/home/:id",component:home,props:true}
export default{
    props:['id']
}

P189 Vue2.0-14.动态路由-拓展query和fullPath

注意：在hash地址中，/后面的参数项，叫做“路径参数” 用this.$route.params.id接受 在路由“参数对象"中，需要使用this.$route.params来访问路径参数

注意2：在hash地址中，？后面的参数项，叫做"查询参数 在路由“參数对象”中，需要使用this.Sroute.query来访问查询参数

注意3：在this.Sroute中，path只是路径部分；fullPath是完整的地址

P190 Vue2.0-15编程式导航跳转-push replace go

5·声明式导航&编程式导航
在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：
·普通网页中点击链接、vue项目中点击都属于声明式导航

在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航

5.1 vue-router中的编程式导航API
vue-router提供了许多编程式导航的API，其中最常用的导航API分别是：
this.$router.push（'hash地址）跳转到指定hash地址，并增加一条历史记录
this.$router.replace（'hash地址）跳转到指定的hash地址，并替换掉当前的历史记录
this.$router.go（数值n）go（-1）表示后退一层 如果后退的层数超过上限，则原地不动

5.5 $router.go的简化用法
在实际开发中，一般只会前进和后退一层页面。因此vue-router提供了如下两个便捷方法：

$router.back）
在历史记录中，后退到上一个页面
$router.forward（）
在历史记录中，前进到下一个页面

在行内使用编程式导航跳转的时候，this必须要省略，否则会报错！

P191 Vue2.0-16导航守卫-了解导航守卫的基本用法

导航守卫可以控制路由的访问权限。

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

const router=new VueRouter({...})
调用路由实例对象的beforeEach方法，即可声明“全局前買守卫"
每次发生路由导航跳转的时候，都会自动触发fn这个“回调函教"
router.beforEach((to,from,next)=>{
    to是将要访问的路由的信息对象
	from是将要离开的路由的信息对象
	next是一个函数，调用next（）表示放行，允许这次路由导航
})                            

P192 Vue2.0-17导航守卫-next函数的三种调用方式

当前用户拥有后台主页的访问权限，直接放行：next（）
当前用户没有后台主页的访问权限，强制其跳转到登录页面：next('/login')

当前用户没有后台主页的访问权限，不允许跳转到后台主页：next（false）

P193 Vue2.0-18导航守卫-控制访问权限

P194 Vue2.0-19.案例-安装和配置路由

P195 Vue2.0-20.案例-基于路由渲染登录组件

P196 Vue2.0-21案例-模拟登录功能

P197 Vue2.0-22案例-说明Token认证时token的格式

http://showdoc.com.cn/escook/3707490625528400

P198 Vue2.0-23.例-后台主页的基础布局

P199 Vue2.0-24.例-退出登录并控制访问权限

P200 Vue2.0-25.案例-实现子路由的嵌套展示

P201 Vue2.0-26案例-点击进入用户详情页

P202 Vue2.0-27案例-升级用户详情页的路由规则

P203 Vue2.0-28案例-路由path的注意点

P204 Vue2.0-29.案例-拓展-如何控制页面的权限

const pathArr=['/home','/home/users']
pathArr.indexOf(to.path)!==-1

P205 Vue2.0-01.初始化-创建并梳理项目结构

history路由需要配置才能使用

hash路由不需要

views 通过路由动态切换放在 大组件 页面放在

P206 Vue2.0-02初始化-安装和配置Vant组件库

http://vant-contrib.gitee.io/vant/#/zh-CN/theme

第三方的东西背下来没意义 直接用 复制

P207 Vue2.0-03.初始化-使用Tabbar组件并开启路由模式

http://doc.toutiao.liulongbin.top/mds/15.build.html#_15-4-基于-externals-配置-cdn-加速 基于 externals 配置 CDN 加速

P208 Vue2.0-04.初始化-通过路由展示对应的Tabbar页面

P209 Vue2.0-05.初始化-使用Navbar组件

上下底部档组 padding

P210 Vue2.0-06.初始化-夏盖Navbar的默认样式

P211 Vue2.0-07文章列表-了解获取列表数据的API接口

P212 Vue2.0-08文章列表-封装utils目录下的request模块

P213 Vue2.0-09文章列表-在Home组件中封装initArticleList方法

P214 Vue2.0-10文章列表-封装articleAPI模块

P215 Vue2.0-11.文章列表-封装ArticleInfo组件

P216 Vue2.0-12文章列表-为ArticleInfo组件封装props属性

<！--在使用组件的时候，如果某个属性名是“小驼峰"形式，则绑定属性的时候，建议改写成“连字符"格式。例如：-->
<！--cmtcount建议写成cmt-count-->

P217 Vue2.0-13文章列表-为ArticleInfo组件封装cover属性

P218 Vue2.0-14上拉载更多-了解List组件的基本用法

P219 Vue2.0-15.上拉加载更多-初步使用List组件

P220 Vue2.0-16上拉加载更多-实现上拉加载更多的效果

P221 Vue2.0-17.下拉刷新-实现下拉刷新的功能

vant van-pull-refresh

P222 Vue2.0-18定制主题-说明Vant定制主题的核心原理

切记：为了能够覆盖默认的less变量，这里一定要把后缀名改为.less

P223 Vue2.0-19定制主题-直接覆盖主题变量

这个文件是vue-cli创建出来的项目的配置文件在vue.config.js这个配置文件中，可以对整个项目的打包、构建进行全同性的配置

P224 Vue2.0-20定制主题-less的正确打开方式

P225 Vue2.0-21定制主题-通过theme.less定制主题-推荐形式

./../theme.less 相对路径
从盘符开始的路径，叫做绝对路径 C:\Users\liulongbinltheme.les：

P226 Vue2.0-22最后

cli文档
vue.config.js
publicPath:'./' 免服务器打开html

鲁大师提供了许多牛逼的函数节流的函数、防抖的函数，操作数组的一系列函数、操作对象的一系列函数（对象的深考贝、浅拷贝）'lodash'

P227 Vue基础-阶段总结

学会了如何基于vue-cli创建和开发工程化的Vue项目
能够熟练运用组件化的开发思想，进行企业级的项目开发
能够熟练使用指令、侦听器、插槽、生命周期、组件通讯等技术，来完成自己的业务开发
能够掌握在Vue项目中如何封装和使用axios来请求后端的API接口
能够熟练使用vue-router实现单页面应用程序的开发
能够在Vue项目中使用Vant和Element-UI组件库
能够熟练运用vue-devtools来调试自己的Vue项目更多细节…

P228铺垫知识-00.学习目标

ES6模块化
Promise
async/await
EventLoop
宏任务和微任务

P229铺垫知识-01.ES6模块化-什么是ES6模块化

1，回顾：node.js中如何实现模块化
node.js遵循了Commonjs的模块化规范。其中：
导入其它模块使用require（）方法
模块对外共享成员使用module.exports对象
模块化的好处：大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。

2，前端模块化规范的分类
在ES6模块化规范诞生之前，JavaScript社区已经尝试并提出了AMD，CMD.Commonjs等模块化规范。

但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
AMD和CMD适用于浏览器端的Javascript模块化
Commonjs适用于服务器端的Javascript模块化
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的ES6模块化规范诞生了！

3，什么是ES6模块化规范
ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD，CMD或CommonjS等模块化规范。

ES6模块化规范中定义：
每个js文件都是一个独立的模块
导入其它模块成员使用import关键字
向外共享模块成员使用export关键字

P230铺垫知识-02.ES6模块化-在node.js中体验es6模块化

4，在node.js中体验ES6模块化
node.js中默认仅支持Commonjs模块化规范，若想基于node.js体验与学习ES6的模块化语法，可以按照如下两个步骤进行配置：
确保安装了v14.15.1或更高版本的node.js 在package.json 的根节点中提添加 "type"："module"节点

P231铺垫知识-03.ES6模块化-默认到出与默认导入

5.ES6模块化的基本语法
ES6的模块化主要包含如下3种用法：
默认导出与默认导入
按需导出与按需导入
直接导入并执行模块中的代码

默认导出的语法：export default默认导出的成员
let n1=22
let n2=33
export default {
    n1,n2
}
 默认导入的语法：import 接收名称 from '模块标识符'

P232铺垫知识-04.ES6模块化-默认导出与默认导入的注意事项

每个模块中，只允许使用唯一的一次export default，否则会报错！

默认导入时的接收名称可以任意名称，只要是合法的成员名称即可：

P233铺垫知识-05.ES6模块化-按需导出与按需导入

按需导出的语法：export按需导出的成员

按需导入的语法：import{s1}from'模块标识符'

P234铺垫知识-06.ES6模块化-按需导出与按需导入的注意事项

按需导出与按需导入的注意事项
每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用as关键字进行重命名
按需导入可以和默认导入一起使用

P235铺垫知识-07.ES6模块化-直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：import './1.js'

P236铺垫知识-08.Promise-回调地狱以及Promise的作用

多层回调函数的相互嵌套，就形成了回调地狱。

回调地狱的缺点：
代码耦合性太强，牵一发而动全身，难以维护
大量冗余的代码相互嵌套，代码的可读性变差

为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了Promise的概念。

P237铺垫知识-09.Promise-Promise的基本概念

Promise是一个构造函数
我们可以创建Promise的实例const p= new Promise（）
new出来的Promise实例对象，代表一个异步操作
Promise.prototype上包含一个.then（）方法

每一次new Promise（）构造函数得到的实例对象，
都可以通过原型链的方式访问到.then（）方法，例如p.then（）
.then（）方法用来预先指定成功和失败的回调函数
p.then（成功的回调函数，失败的回调函数）
p.then（result =>{}，error =>{}）
调用.then（）方法时，成功的回调函数是必选的、失败的回调函数是可选的

P238铺垫知识-10.Promise-基于then-fs异步的读取文件内容

3，基于then-fs读取文件内容
由于node.js官方提供的fs模块仅支持以回调函数的方式读取文件，不支持Promise的调用方式。因此，需要先运行如下的命令，安装then-fs这个第三方包，从而支持我们基于Promise的方式读取文件的内容：

npm install then-fs

P239铺垫知识-11.Promise-基于Promise按顺序读取文件的内容

如果上一个.then（）方法中返回了一个新的Promise实例对象，则可以通过下一个.then（）继续进行处理。通过.then（）方法的链式调用，就解决了回调地狱的问题。

Promise支持链式调用，从而来解决回调地狱的问题。

P240铺垫知识-12.Promise-通过.catch方法捕获错误

3.4通过.catch捕获错误
在Promise的链式操作中如果发生了错误，可以使用Promise.prototype.catch方法进行捕获和处理：

如果不希望前面的错误导致后续的.then无法正常执行，则可以将.catch的调用提前，

P241铺垫知识-13.Promise-Promise.all和Promise.race方法的使用

Promise.all（）方法会发起并行的Promise异步操作，等所有的异步操作全部结束后才会执行下一步的.then操作（等待机制）。示例代码如下：

Promise.race（）方法会发起并行的Promise异步操作，只要任何一个异步操作完成，就立即执行下一步的then操作（赛跑机制）。示例代码如下

P242铺垫知识-14.Promise-基于Promise封装异步读文件的方法-上

P243铺垫知识-15.Promise-基于Promise封装异步读文件的方法-下

P244铺垫知识-16.async和await-了解async和await的基本使用

1.什么是async/await async/await是ES8（ECMAScript 2017）引入的新语法，用来简化Promise异步操作。在async/await出现之前，开发者只能通过链式.then）的方式处理Promise异步操作。示例代码如下：

.then链式调用的优点：解决了回调地狱的问题
.then链式调用的缺点：代码冗余、阅读性差、不易理解

P245铺垫知识-17.async和await-async和await的使用注意事项

如果在function中使用了await，则function必须被async修饰
在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行

P246铺垫知识-18.EventLoop-同步任务和异步任务

JavaScript是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。

单线程执行任务队列的问题：如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。

为了防止某个耗时任务导致程序假死的问题，JavaScript把待执行的任务分为了两类：

同步任务（synchronous）
又叫做非耗时任务，指的是在主线程上排队执行的那些任务
只有前一个任务执行完毕，才能执行后一个任务
异步任务（asynchronous）
又叫做耗时任务，异步任务由Javascript委托给宿主环境进行执行
当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数

P247铺垫知识-19.EventLoop-同步任务和异步任务的执行过程

同步任务由JavaScript主线程次序执行
异步任务委托给宿主环境执行
已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
JavaScript主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行
JavaScript主线程不断重复上面的第4步

P248铺垫知识-20.EventLoop-EventLoop的概念及经典面试题

Javascript主线程从“任务队列"中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为EventLoop（事件循环）。

P249铺垫知识-21宏任务和微任务-宏任务与微任务的概念

1，什么是宏任务和微任务
Javascript把异步任务又做了进一步的划分，异步任务又分为两类，分别是：

宏任务（macrotask）
异步Ajax请求、
setTimeout，setinterval
文件操作
其它宏任务

微任务（microtask）
Promise.then，.catch和.finally
process.nextTick
其它微任务

2，宏任务和微任务的执行顺序

每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。

P250铺垫知识-22.宏任务和微任务-举例分析宏任务和微任务的执行过程

P251铺垫知识-23宏任务和微任务-经典面试题-1

P252铺垫知识-24.宏任务和微任务-经典面试题-2

P253铺垫知识-25.API接口案例-初始化项目

P254铺垫知识-26.AP接口案例-创建db数据库操作模块

P255铺垫知识-27.API接口案例-创建user_ctrl模块

P256铺垫知识-28.API接口案例-创建并使用user_router路由模块

P257铺垫知识-29.API接口案例-使用try...catch捕获异常错误

P258铺垫知识-30.总结

P259 Vue3.0-00.学习目标1

P260 Vue3.0-01工程化-了解前端工程化的概念

1，小白眼中的前端开发vs实际的前端开发
小白眼中的前端开发：
会写HTML+ CSS + Javascript就会前端开发
需要美化页面样式，就拽一个bootstrap过来
需要操作DOM或发起Ajax请求，再拽一个jQuery过来
需要渲染模板结构，就用art-template等模板引擎

实际的前端开发：
模块化（js的模块化、css的模块化、其它资源的模块化）
组件化（复用现有的U1结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
自动化（自动化构建、自动部署、自动化测试）

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的"4个现代化"：

模块化、组件化、规范化、自动化

前端工程化的好处主要体现在如下两方面：
前端工程化让前端开发能够“自成体系"，覆盖了前端项目从创建到部署的方方面面
最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本

重新x

P261 Vue3.0-02.webpack基础-了解什么是webpack

1.什么是webpack概念：webpack是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端Javascript的兼容性、性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前企业级的前端项目开发中，绝大多数的项目都是基于webpack进行打包构建的。

P262 Vue3.0-03.webpack基础-初始化列表隔行变色的案例

P263 Vue3.0-04.webpack基础-安装和配置webpack

P264 Vue3.0-05.webpack基础-mode的可选值

P265 Vue3.0-06.webpack基础-webpack.config.js文件的作用

P266 Vue3.0-07.webpack基础-修改打包的入口与出口

P267 Vue3.0-08.webpack插件-了解插件的作用

P268 Vue3.0-09.webpack插件-安装和配置webpack-dev-server

P269 Vue3.0-10.webpack插件-访问自动打包生成的文件

P270 Vue3.0-11.webpack插件-安装和配置html-webpack-plugin

P271 Vue3.0-12.webpack插件-了解html-webpack-plugin的俩个注意点

P272 Vue3.0-13.webpack插件-删除dist目录不会影响项目的正常运行

P273 Vue3.0-14.webpack插件-devServer节点

P274 Vue3.0-15.loader加载器-了解loader的概念以及调用过程

P275 Vue3.0-16.loader加载器-打包处理css文件

P276 Vue3.0-17.loader加载器-打包处理less文件

P277 Vue3.0-18.loader加载器-打包处理样式表中与url路径相关的文件

P278 Vue3.0-19.1loader加载器-url-loader的limit参数

P279 Vue3.0-20.loader加载器-loader的另一种配置方式

P280 Vue3.0-21.loader加载器-配置babel-loader

P281 Vue3.0-22.打包发布-了解项目打包发布的原因

P282 Vue3.0-23打包发布-配置webpack的打包发布

P283 Vue3.0-24打包发布-整理dist目录下的文件

P284 Vue3.0-25打包发布-自动清理dist目录下的旧文件

P285 Vue3.0-26.打包发布-了解企业级项目的打包发布

6·企业级项目的打包发布
企业级的项目在进行打包发布时，远比刚才的方式要复杂的多，主要的发布流程如下：
生成打包报告，根据报告分析具体的优化方案
Tree-Shaking
为第三方库启用CDN加载
配置组件的按需加载
开启路由懒加载
自定制首页内容
在后面的vue项目课程中，会专门讲解如何进行企业级项目的打包发布。

P286 Vue3.0-27.SourceMap-了解什么是SourceMap

P287 Vue3.0-28.SourceMap-开发环境下的SourceMap选项

P288 Vue3.0-29.SourceMap-生产环境下的SourceMap选项以及最佳实践

P289 Vue3.0-30总结

P290 Vue3.0-00.学习目标2

P291 Vue3.0-01.vue简介-什么是vue

基于vue中提供的指令，可以方便快捷的渲染页面的结构（乐不思蜀）。
数据驱动视图（只要页面依赖的数据源变化，则页面自动重新渲染）
Ps：指令是vue为开发者提供的模板语法，用来辅助开发者渲染页面的结构。

基于vue中提供的事件绑定，可以轻松处理用户和页面之间的交互行为。
Ps：开发者把工作的重心放在核心业务的实现上

1.4解读核心关键词：框架
官方给vue的定位是前端框架，因为它提供了构建用户界面的一整套解决方案（俗称vue全家桶）：vue（核心库）
vue-router（路由方案）
vuex（状态管理方案）
vue组件库（快速搭建页面UI效果的方案）

以及辅助vue项目开发的一系列工具：
vue-cli（npm全局包：一键生成工程化的vue项目-基于webpack、大而全）
vite（npm全局包：一键生成工程化的vue项目-小而巧）
vue-devtools（浏览器插件：辅助调试的工具）
vetur（vscode插件：提供语法高亮和智能提示）

P292 Vue3.0-02.vue简介-vue的特性

P293 Vue3.0-03.vue简介-vue的版本

3.1 vue3.x和vue2.x版本的对比
vue2.x中绝大多数的API与特性，在vue3.x中同样支持。同时，vue3.x中还新增了3.x所特有的功能、并废弃了某些2.x中的旧功能：

新增的功能例如：
组合式API、多根节点组件、更好的TypeScript支持等
废弃的旧功能如下：
过滤器、不再支持$on，$off和$once实例方法等

详细的变更信息，请参考官方文档给出的迁移指南：https://v3.vuejs.org/guide/migration/introduction.html

P294 Vue3.0-04.vue的基本使用-vue的基本使用步骤

P295 Vue3.0-05.vue的基本使用-基本代码与MVVM的对应关系

P296 Vue3.0-06.vue的基本使用-安装并使用vue-devtools

1，安装vue-devtools调试工具
vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发。

Chrome浏览器在线安装vue-devtools
vue 2.x调试工具：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
vue 3.x调试工具：
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

注意：vue2和vue3的浏览器调试工具不能交叉使用！

P297 Vue3.0-07，指令-内客渲染指令

P298 Vue3.0-08，指令-属性绑定指令

P299 Vue3.0-09指令-使用JavaScript表达式

P300 Vue3.0-10.指令-事件绑定指令

P301 Vue3.0-11，.指令-事件绑定的简写形式

P302 Vue3.0-12指令-事件对象event

P303 Vue3.0-13.指令-事件传参和$event

P304 Vue3.0-14指令-事件修饰符

P305 Vue3.0-15，指令-按鏈修饰符

P306 Vue3.0-16，指令-双向绑定指令

P307 Vue3.0-17.指令-v-model指令的修饰符

P308 Vue3.0-18.指令-条件渲染指令

P309 Vue3.0-19指令-v-it和v-show的区别

P310 Vue3.0-20.指令-v-else和v-else和v-else-if

P311 Vue3.0-21，指令-列表渲染指令

P312 Vue3.022.指令-使用key维护列表的状态

P313 Vue3.0-23指令-key的使用注意事项

P314 Vue3.0-24过滤器-声明和使用过滤器

P315 Vue3.0-25.过滤器-私有过滤器和全局过滤器

P316 Vue3.0-26.过滤器-连续调用多个过滤器

P317 Vue3.0-27过滤器-过滤器传参

P318 Vue3.0-28过滤器-了解过滤器的兼容性

P319 Vue3.0-29案例-创建基本的vue实例

P320 Vue3.0-30.案例-循环渲染表格的数据

P321 Vue3.0-31.案例-把状态列渲染为switch开关效果

P322 Vue3.0-32.例-使用全局过滤器格式化时间

P323 Vue3.0-33.案例-实现添加品牌的功能

P324 Vue3.0-34.案例-快速清空文本框的内容

P325 Vue3.0-35.案例-实现删除品牌的功能

P326 Vue3.0-36总结

P327 Vue3.0-00.学习目标3

P328 Vue3.0-01.SPA-了解单页面应用程序的概念及特点

P329 Vue3.0-02.SPA-了解单页面应用程序的优缺点

P330 Vue3.0-03.SPA-了解vue中创建工程化SPA项目的俩种方案

P331 Vue3.0-04.vite-基于vite创建工程化的vue项目

npm init vite-app 项目名称

P332 Vue3.0-05.vite-梳理项目的基本结构

P333 Vue3.0-06.vite-了解vite项目的运行流程

P334 Vue3.0-07.组件-了解组件化的开发思想

http://www.ibootstrap.cn/

P335 Vue3.0-08.组件-组件的3个组成部分

P336 Vue3.0-09组件-template节点的基本使用

但是，在vue 3.x的版本中，