目录
3、动态组件每次被切换的时候都会被销毁，再点击回该组件，就重新被创建。
6、keep-alive中的include属性和exclude属性
2、v-slot：指令；简写 # ；格式 v-slot：插槽的名字
3、update函数：每次DOM元素更新的时候调用，第一次绑定的时候不生效
3、若运行代码，出现以下错误，说明不是代码错了，是代码风格出现错误了。
3、路由解决方案：vue-router，能够轻松管理SPA(单页面)项目中组件的切换。
7、router-link：当安装和配置了vue-router，可以用router-link来代替a链接。
8、redirect属性，来解决 路由重定向(用户在访问地址A时，强制用户跳转到地址C)。
5、为了防止中间内容被遮挡，显示字不完全的情况，用边距css样式。
6、★★★覆盖第三方组件库样式之想要改变头部的背景颜色和字体颜色：
1、调接口，拿数据，要用axios，需要先安装和配置axios：
4、封装ArticleInfo.vue组件，为每一块的文章内容。
(三)、上拉加载更多List列表(Vant文档中)之黑马头条案例
(四)、下拉刷新(Vant文档PullRefresh)之黑马头条案例
1、 Vant文档中PullRefresh+List实现下拉刷新效果编辑
2、点击目录的空白区域，再新建文件vue.config.js，这样这个文件即为根目录下的。
一、动态组件
动态组件：动态切换组件的显示和隐藏
1、component标签实现动态组件
2、 案例(component)：动态切换组件的显示和隐藏
实现效果：
3、动态组件每次被切换的时候都会被销毁，再点击回该组件，就重新被创建。
案例用于测试：在Left组件中建立一个点击加一的按钮，并且显示其count的值，然后添加以下两个生命周期方法，
运行测试：刚进界面，操作台显示被创建Left界面，点击+1按钮，count数据更新；点击“展示Right”按钮，操作台显示被销毁Left界面；再点回Left界面，发现操作台显示又被创建Left界面，但数据count又回归初始值了。
实现效果：
4、<keep-alive>标签是vue内置的，会让动态组件不会被销毁。
5、keep-alive对应的生命周期函数
6、keep-alive中的include属性和exclude属性
include属性：表示那个组件可以被缓存；
exclude属性：表示那个组件可以不被缓存；
include属性和exclude属性不能够同时被使用；
include属性和exclude属性的值为组件名称，若多个组件名称可以在中间用“，”隔开。
7、组件的名称
二、插槽
1、<slot>
<slot></solt>为声明一个插槽，相当于一个占位符
2、v-slot：指令；简写 # ；格式 v-slot：插槽的名字
3、slot的后备内容（默认内容）
4、具名插槽：有具体名字的插槽
5、作用域插槽：为插槽提供的数据
6、作用域插槽的解构赋值
7、案例（插槽）：购物车案例的改写之Count部分
①把Count.vue的界面作为一个插槽，渲染到界面上
②把商品的数量动态渲染到界面，用父向子传值
③实现Count中的加按钮，子向父传值
App.vue中，
三、自定义指令
1、私有自定义指令，只自己的组件可用
注意：v-color表示指令名叫color
2、使用binding.value来获取指令绑定的值
注意：bind()函数只会调用一次
3、update函数：每次DOM元素更新的时候调用，第一次绑定的时候不生效
4、自定义指令的函数简写
5、全局自定义指令（通常使用），写在main.js中
四、eslint是JavaScript代码检测的插件
1、安装插件eslint
在终端中vue create 项目名称(英文)，然后继续下图
...
安装成功。
2、终端不关，来检测代码格式？
3、若运行代码，出现以下错误，说明不是代码错了，是代码风格出现错误了。
4、eslint代码规则：
只能出现一个空行，最后一行代码后需要空一行；
每一行代码最后不能有多余的空格；
属性=空格属性值；
注释后面要有一个空格；
导入语句要在<script>下的顶部；
不能出现从未使用过的变量或常量；
.......
5、修改代码规则
可以在eslint的配置文件修改代码规则，在eslint官网中找如何修改规则，官网上都有。
五、插件ESLint和Prettier：代码自动格式化
1、安装ESLint插件
2、打开settings.json对ESLint进行配置
3、安装prettier插件
4、在settings.json中进行配置
5、安装.prettierrc文件到自己的个人文件夹中
6、在settings.json中对.prettierrc进行配置
7、在.vue文件中单击鼠标右键，选用格式化文档的方式
选用如下默认的Prettier格式化程序；如果不是则选择配置默认格式化程序，选择Prettier
8、.js文件同7步一样
六、补充axios：数据请求
1、先装包npm i axios -S
2、案例：发起POST请求
3、优化axios：案例之POST
4、直接把axios挂载在Vue原型中的优点和缺点
缺点：不利于API接口的复用，每次都得重新弄一次请求的函数。
优点：对于接口，直接this.$http.get...。
七、路由
前端路由：Hash地址与组件之间的对应关系。
锚链接=#/内容(其中#可省略e)=hash地址；不刷新页面；有页面历史记录，即前进后退页面
1、前端路由的工作方式
2、案例：手动模拟简单的路由
要求：点击不同的链接 ，出现不同的hash地址，出现的不同组件。
动态组件：
封装路由： （自己封装路由，非常麻烦，以后不用自己封装路由）
3、路由解决方案：vue-router，能够轻松管理SPA(单页面)项目中组件的切换。
vue-router的官方文档地址：https://router.vuejs.org/zh/
4、安装和配置vue-router
①安装vue-router的包：npm i vue-router@3.5.2 -S
②在src源代码目录下，新建router/index.js路由模块，并在index.js中初始化如下代码：
③把路由的实例对象挂载在main.js中
注意：若自动导入，则bc步自动会生成
5、路由注意点：
6、使用路由：
①router-view：在安装和配置了vue-router，就可以使router-view这个组件，就不用component标签了定义组件了。其中<router-view>为占位符。
②在路由模块router/index.js中,声明路由的对应关系。
7、router-link：当安装和配置了vue-router，可以用router-link来代替a链接。
8、redirect属性，来解决 路由重定向(用户在访问地址A时，强制用户跳转到地址C)。
9、嵌套路由★★★：路由实现组件的嵌套展示
①声明子路由的路由规则：
案例(嵌套路由)：要求，点击“关于”，会在About组件里出现如图界面。
实现代码：
②默认子路由或重定向路由：应用：让首页默认为xxx页面
10、动态路由
①动态路由规则：
注意：.../:mid，为动态参数项
②拿参数mid的方式：路由规则中有..../:mid时可以用 (this.)$route.params.参数mid
③拿参数mid的方式：该组件中props：['mid']来接收数据；路由规则中有..../:mid时可以用props：true（开启传参）
④hash地址中：路径参数、查询参数和部分路径和完整路径
11、声明式导航和编程式导航
①声明式导航和编程式导航的概念：
②vue-router中的编程式导航API：
this.$router.go的简化：在行内使用编程式导航跳转时$router.back()和$router.forward()不用this.，否则会报错
12、vue-router中的导航守卫：控制路由的访问权限
①声明全局前置守卫：
②全局前置守卫的next函数的调用方式：
没有后台访问权限时，直接放行：next()
没有后台访问权限时，强制跳转到登录界面：next('/login')
没有后台访问权限时，强制留在当前页：next(false)
③案例★(访问权限的控制)：
④多个页面要访问权限★★★：
八、大案例(vue-router)：后台管理系统
1、准备工作：
①先装包node_modules;
②npm run server项目跑起来；
③点击浏览器网址，进入页面；
④新进一个终端，安装和配置路由npm i vue-router@3.5.2 -S：
创建路由模块：建一个router文件夹，在文件夹下建一个index.js；
并在main.js中挂载路由。
⑤目录如下建立：
2、把登录组件渲染到页面中，并默认首页为登录组件。
首先声明路由规则，再在App.vue建立占位符<vue-router>
3、“登录”按钮和“重置”按钮
“重置”按钮：点击“重置”，即用户名和密码置为空。
“登录”按钮：判定如果登录名为admin，密码为666666，则登录成功，跳转到后台主页home页。
4、后台主页home：
配置后台主页home的路由规则：
后台主页home要实现的效果：
后台主页home的基本布局：
到此实现的页面效果：
后台主页的“退出登录”按钮：要实现点击清除token，并且跳转到登录页。
★若直接在地址栏中输入到home后台主页的地址，即使没有登录，也会跳转进去后台主页home界面，这样不行；若想解决此问题，需要控制访问权限，需要在路由模块index.js中用全局前置守卫：
子路由之1.把左侧边栏的目录链接改成路由链接；
子路由之2.路由占位符；
子路由之3.声明路由规则。
MyUser.vue用户界面：
上面代码实现效果如图：
点击用户界面的“详情”，进入用户详情页：
注意：左边侧边栏的路由与“详情”路由是平级的
以上代码实现的效果如图：
用户详情页的“后退按钮”：点击“后退”按钮，返回上一页(上一历史记录)
之前完成的用户详情页，不知道查那个用户详情页，所以用户详情页还需要传id地址★：
上面代码实现的效果如图：
进入后台主页，默认出现“用户管理”的界面：重定向
九、新知识之黑马头条案例
(一)、初始化之黑马头条案例
1、准备工作：
①装包：先在终端创建项目：create vue toutiao；按照步骤依次选择执行，最后关闭终端。
②components文件夹(目录)和views文件夹(目录)的区别：
components文件夹：放置可复用的组件；
views文件夹：放置路由相关的组件；
③初始化：
把App.vue中的代码全部清除，自己写一个基本结构。
components目录和views目录清空：表示目标下的.vue文件都删了。
把路由规则的数组清空：
④打开终端：npm run serve把项目跑起来看看效果
2、安装和配置Vant移动端组件库
①Vant官网地址：
②安装Vant：新打开一个终端：npm i vant -S
③配置Vant：在main.js中配置组件库，采用导入所有组件的方案如下：
3、底部导航
a.建立组件目录及其.vue组件：注意，组件的文件夹和组件的.vue文件首字母要大写
b.在Vant官网文档中用“Tabbar标签栏”组件，进行复制改写
4、头部
①在Vant官网文档中用“NavBar导航栏”组件，进行复制改写
注意(补充)：关于属性的属性值默认为true时的省略写法
5、为了防止中间内容被遮挡，显示字不完全的情况，用边距css样式。
6、★★★覆盖第三方组件库样式之想要改变头部的背景颜色和字体颜色：
可以在浏览器中打开检查，点击Element对应的Style，查看Style中的属性，在VScode中进行css样式覆盖即可。若覆盖不生效，可以加一个/deep/。注意：只在当前组件上生效。
(二)、文章列表之黑马头条案例
1、调接口，拿数据，要用axios，需要先安装和配置axios：
先装包：下载axios，npm i axios -S;
补充(配置axios知识点)：(让使用时不用完整地址★)
配置axios：(让使用时不用完整地址★)
2、用axios获取文章列表数据：
3、★让await后面的内容可以复用，建立一个获取文章数据列表的模块articleAPI.js。有了获取数据列表的模块，就对以下内容进行修改。
4、封装ArticleInfo.vue组件，为每一块的文章内容。
数据要渲染的App.vue界面中，就要存起来。提示：home界面为中心内容区域，包括若干文章内容；ArticleInfo.vue为每一块的文章内容。
5、用户在App.vue中循环传值给文章界面。
父向子传值，自定义属性props。其中的属性举例写出了，没写全。
注意：在定义属性的时候若采用小驼峰命名法，则绑定属性的时候改成“连字符”格式，但是使用{{ 属性 }}的时候不用改成“连字符”形式。
6、文章的一张图片和三张图片的显示：
注意：若自定义的属性为Object类型，则默认值定义为函数，函数中返回的内容为默认值。
注意：下图中的单张图片和三张图片的两个节点不平级，所以不能用v-else，都得用v-if；外接口中的文章数据没有id，所以用：key的时候可以用索引i代替。
(三)、上拉加载更多List列表(Vant文档中)之黑马头条案例
1、在Vant文档中的List列表中复制使用，达成上拉加载更多的功能。
一进来不需要访问文章数据，所以loading：true，不会触发load事件
在axios请求回来数据(即请求完)之后，才需要触发load事件，loading：false
(四)、下拉刷新(Vant文档PullRefresh)之黑马头条案例
1、 Vant文档中PullRefresh+List实现下拉刷新效果
2、刷新处理函数
(五)、Vant文档之定制主题(可全局范围)(样式)
1、把main.js中的.css后缀改为.less后缀
2、点击目录的空白区域，再新建文件vue.config.js，这样这个文件即为根目录下的。
①第一种方法(麻烦了解即可)：
注意：修改了配置文件，需要重启服务。做法：两次ctrl+c停掉服务，再npm run serve重启服务。
缺点：得老直修改配置文件，老直重启服务。
②★第二种方法(正确方法，记住)：
修改配置文件，重启一次服务就行。因为要修改多次的为theme.less文件，所以修改配置文件，重启一次服务就行。
补充(Vue CLi文档)：在打包时npm run build；会生成dist文件夹，双击打开index.html会不出效果；若想出效果，需要做如下操作：
补充：
Vant官网：vue的组件库。
代码格式：在VSCode软件中点击右侧设置图标，搜索tabsize为2，搜索format进行勾选。
ESLint官网：JavaScript代码格式的检测工具。
修改了配置文件必须重新重启服务，npm run serve
lodash：JavaScript实用工具库。
注意：开发阶段，注意开发效率就行，那个快用那个，不用考虑体积，体积在发布的时候有方案能把Vant拿掉进行优化。
注意：开发哪个项目就用VSCode打开哪个项目，否则有的插件会不好使。
打开时，类似下图的文件摆放
6694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
