2022前端知识整理：十、vue基础
十、vue基础
2022前端知识整理：第十部分、vue基础，仅包含vue2.0相关知识，建议先完成html5、css3和JavaScript ES6之后再学习。部分图片未上传成功，稍后完善，请见谅。
##1、webpack
①webpack基本概念
webpack是静态模块打包工具，它可以减少文件数量，缩减代码体积，提高网页打开速度，主要作用是分析压缩和打包代码。
②webpack使用步骤
初始化包环境
yarn init
安装依赖包
yarn add [email protected] [email protected] -D
配置scripts
"scripts":{
"build":"webpack"
},
######打包命令
yarn build
③webpack的配置
####配置文档
https://webpack.docschina.org/concepts/#entry
在webpack.config.js中，填入入口和出口配置
const path = require('path')
modules.exports = {
//入口文件名
entry: './src/main.js',
output: {
//出口路径
path: path.resolve(__diename, 'dist'),
//出口文件名
filename:'bundle.js',
}
}
####配置插件
#####自动生成HTML的插件：
下载插件
yarn add [email protected] -D
webpack.config.js添加配置
const HtmlWebpackPlugin = require(`html-webpack-plugin')
module.exports ={
plugins:[
new HtmlWebpackPlugin({
templete:'./public/index.html'
})
]
}
#####处理css文件：
下载插件
yarn add [email protected] [email protected] -D
webpack.config.js添加配置
module.exports = {
mopdule:{
rules:[
{
test:/\.css$/i,
//css-loader:识别.css文件，style-loader:把js内样式插入DOM上
use:["style-loader","css-loader"]
}
]
}
}
#####处理less文件：
下载插件
yarn add [email protected] [email protected] D
webpack.config.js添加配置
module.exports = {
mopdule:{
rules:[
{
test:/\.css$/i,
//less-loader:识别.less文件，less-loader:把less语法翻译成css
use:["style-loader","css-loader","less-loader"]
}
]
}
}
#####处理图片文件：
复制assets/图片文件，然后css/index.less小图片做背景，src/main.js大图片img插入到DOM，最后在webpack.config.js添加配置
module.exports = {
mopdule:{
rules:[
{
test:/\.(png|jpg|gif|jpeg)$/i,
type:'asset'
}
]
}
}
图片处理规则：webpack5内置资源模块打包，默认小于8KB的图片会被转为base64字符串，这样可减少网络请求次数，大于8KB的图片仍然复制文件，这样可以避免增大文件体积
#####处理字体文件：
复制assets/字体文件夹fonts，然后css/main.js引入字体样式inconfont.css，src/main.js中创建i标签使用字体图标，最后在webpack.config.js中配置规则
module.exports = {
mopdule:{
rules:[
{
test:/\.(eot|svg|ttf|woff|woff2)$/,
type:'asset/resource',
generator: {
filename: 'font/[name].[hash:6][ext]'
}
}
]
}
}
字体处理规则：webpack5内置资源模块打包，字体文件会被直接复制到dist目录下，不会打包进js文件中
#####处理高版本兼容性语法：
为了兼容低版本浏览器，我们可以使用babel-loader加载器来处理，首先在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)；然后下载加载器yarn add [email protected] @babel/[email protected] @babel/[email protected] -D，再配置到webpack.config.js上，最后打包观察是否降级
module.exports = {
mopdule:{
rules:[
{
test: /\.js$/,
exclude: /(node_moudles|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presents: ['@babel/preset-env']
}
}
}
]
}
}
降级处理规则：下载@babel/core和babel-loader等模块包，@babel/core是js编译器，负责分析代码，@babel/preset-env是babel预设，用来设置降级规则，babel-loader可以让webpack翻译js代码
###④webpack开发服务器
#####搭建webpack开发服务器
搭建webpack开发服务器，可以将处理好的内容放入内存，以后代码有了变化，打包的时候只重新打包变化的代码，并自动更新到页面。
首先下载模块包
yarn add [email protected] -D
然后在package.json中自定义webpack开发服务器启动命令serve
"script": {
"build": "webpack",
"serve": "webpack serve"
},
再到终端窗口启动当前工程里的webpack开发服务器
yarn serve
最后重新编写代码，看看控制台是否自动打包，浏览器是否自动更新
#####配置webpack服务器
想要改变端口号和自动唤起浏览器，在webpack.config.js中添加配置如下
moudle.exports = {
devServer: {
//自定义的端口号
port: 3000,
//配置自动唤起浏览器
open: true
}
}
重新启动webpack开发服务器就能看到效果了
用webpack进行项目打包发布
代码分为线下环境和线上环境，俗称开发环境（devlopment）和生产环境（production），我们在自己的项目终端运行yarn build命令，就可以让webpack生成dist目录，这个就是打包完成凶狠的文件，发给运维部署到服务器上。
2、vue脚手架和基础API
①vue介绍
vue是渐进式javacript框架, 一套拥有自己规则的语法，官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)。所谓渐进式框架，就是按需、逐渐集成功能，vue就是逐步集成了vue-cli、vueRouter、vuex等功能，形成了vue全家桶。所谓框架，就是相对于引入jQuery库这类方法和属性的集合，vue框架拥有自己的语法规则。
vue有两种开发模式，传统开发模式即基于html文件开发Vue，需要自己引入vue.js文件，工程化开发模式即在webpack环境中开发vue，企业常用的开发模式，我们学习的也是这种开发模式。
###②vue/cli脚手架
#####脚手架介绍
脚手架原本指保证各施工过程顺利进行而搭设的工作平台，在Vue里体现出来就是官方提供了一套固定标准的代码结构，即固定的标准文件夹+文件+webpack配置代码，可以实现开箱即用、webpack 零配置。
脚手架安装
全局安装：在终端中输入 yarn global add @vue/cli
检查是否安装成功，在终端中输入@Vue -V，如果返回的是@vue/cli 4.5.12这类版本号就说明安装成功
创建项目并启动服务
假设我们要创建名为vuecli-demo的项目，则在终端中输入vue create vuecli-demo并回车，后面就是选择创建项目的配置：
- 选择Manually select features（自定义特性）
- 空格选中Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter
- 选择版本号为2.x
- 模式输入n（用hash模式不要用history模式）
- 选择Less（目前只学了less，sass以后再学）
- 选择ESLint + Standard config（eslint不要关，帮助养成良好的编码习惯）
- 选择In dedicated config files（把每一个配置文件分开存放，不要全部放在package.json）
- 输入n（不要把这次的配置保存为默认配置）
- 用cd命令
cd vuecli-demo切换到项目文件夹（具体以你的项目在磁盘中的位置来确定）
编译文件启动服务的命令是yarn serve，如果没有自动弹出浏览器，在浏览器中输入给出的地址 http://localhost:8080/ 即可
脚手架目录分析
脚手架中各个文件夹的含义
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rjq9OYNS-1657895728256)(赵越峰2022前端笔记.assets/脚手架中各个文件夹的含义.png)]
现在暂时不用全部看懂，只要了解以下几个文件和文件夹的作用就可以了
| 文件名 | 作用 |
|---|---|
| node_modules | 依赖包 |
| index.html | 网页入口 |
| main.js | 打包入口 |
| App.vue | Vue页面入口 |
| package.json | 项目描述信息 |
脚手架结构分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xNREIi3H-1657895728257)(赵越峰2022前端笔记.assets/脚手架代码和结构分析.png)]
main.js和App.vue以及index.html的关系是 App.vue -> main.js -> index.html
#####脚手架自定义配置
src并列处新建vue.config.js, 填入配置, 重启webpack开发服务器即可
moudle.exports = {
devServer: {
//自定义的端口号
port: 3000,
//配置自动唤起浏览器
open: true
}
}
eslint介绍
eslint是代码检查的工具，如果写代码违反了eslint的规则，就会报错，
解决方法：
-
手动解决掉错误, 以后项目中会讲如何自动解决，或者
-
暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务
在vue.config.js中设置lintOnSave, 重启服务
#####单vue文件
-
Vue推荐采用.vue文件来开发项目
-
注意事项：template里只能有一个根标签
-
单vue文件的好处：独立作用域，不必担心变量名冲突
-
style配合scoped属性, 保证样式只针对当前template内标签生效
-
标签和样式如何显示到页面：vue文件配合webpack, 把他们打包起来插入到index.html
清理欢迎界面
项目创建时，自动生成了很多代码和文件，需要把他们删除掉来开始自己的项目
-
assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)
-
src/App.vue默认有很多内容, 可以全部删除留下template和script和style的框
###③vue指令
#####插值表达式
声明式渲染（文本插值），语法为语法: {{ 表达式 }}，其中msg和obj是vue数据变量，要在js中data函数里声明
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GmiD212U-1657895728258)(赵越峰2022前端笔记.assets/image-20220711200113102.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RYz3SLUW-1657895728259)(赵越峰2022前端笔记.assets/image-20220711200120124.png)]
插值表达式就是双大括号, 可以把Vue变量直接显示在标签内。Vue中变量声明在data函数中return对象，而对象里key就是变量名
#####MVVM设计模式
不同于MVC（Model-View-Controller）设计模式主要使在控制层编写代码，MVVM设计模式转变了思维，用数据来驱动视图改变，操作DOM的事，被vue源码来干了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0qmc7I6-1657895728260)(赵越峰2022前端笔记.assets/MVC框架图.gif)]
MVVM（Model-View-ViewModel）设计模式就是模型,、视图、视图模型，双向关联的设计模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oKo2uLjd-1657895728260)(赵越峰2022前端笔记.assets/MVVM框架图.gif)]
MVVM的优点是减少DOM操作，提高渲染效率，让程序员专注于数据处理，提高开发效率
v-bind动态属性
v-bind可以给标签设置vue变量的值，语法为v-bind:属性名="vue变量"，通常简写为属性名="vue变量"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJq6XSX0-1657895728262)(赵越峰2022前端笔记.assets/v-bind动态属性 (2)].png)
#####v-on事件绑定
v-on可以给标签绑定事件，根据是否传参，语法分别为
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wAs7wb1C-1657895728263)(赵越峰2022前端笔记.assets/v-on事件绑定.png)]
-
v-on:事件名=“methods中的函数名"
-
v-on:事件名=“methods中的函数名(实参)"
点击事件触发的方法在methods当中定义
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWtxoiiR-1657895728264)(赵越峰2022前端笔记.assets/v-on事件绑定方法.png)]
通常将事件简写为 @事件名=“methods中的函数”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AoycVoH-1657895728269)(赵越峰2022前端笔记.assets/image-20220711201207199.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZt1pqhu-1657895728270)(赵越峰2022前端笔记.assets/image-20220711201214332-16575415723318.png)]
v-on事件对象
在vue事件处理函数中，想要拿到事件对象，如果是没有传参，可以直接用第一个形参接收，如果有实参，通过$event指代事件对象传给事件处理函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zMyrPJT8-1657895728271)(赵越峰2022前端笔记.assets/image-20220711201650648.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bP7Beiy1-1657895728272)(赵越峰2022前端笔记.assets/image-20220711201655252.png)]
#####v-on事件修饰符
在事件后面加上.修饰符名可以给事件带来更强大的功能，语法为@事件名.修饰符="methods里函数",例如e.prevent可以阻止默认行为，e.stop 可以阻止事件冒泡。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SR00Bp6V-1657895728272)(赵越峰2022前端笔记.assets/image-20220711202722520.png)]
#####v-on按键修饰符
同样的，也可以给键盘事件添加修饰符，@keyup.enter 可以监测回车按键，@keyup.esc 可以监测返回按键，更多的修饰符可以看vue官网说明 https://cn.vuejs.org/v2/guide/events.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eQOmidNe-1657895728274)(赵越峰2022前端笔记.assets/image-20220711202744446.png)]
#####v-model双向绑定
双向绑定，即把value属性和Vue数据变量双向绑定到一起，这样不论变量变化还是视图变化，都能使对方一起改变，语法为v-model="Vue数据变量",具体写法为：
v-model写在select上, value写在option上, Vue变量关联value属性的值
v-model用在复选框时，非数组关联的是checked属性，数组关联的是value属性
Vue变量初始值会影响表单的默认状态, 因为双向绑定, 互相影响
#####v-model修饰符
在v-model后面加上.修饰符，可以让v-model实现更强大的功能，语法为 v-model.修饰符=“Vue数据变量”，如
-
.number 以parseFloat转成数字类型
-
.trim 去除首尾空白字符
-
.lazy 在change时触发而非input时
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HolSOvB9-1657895728275)(赵越峰2022前端笔记.assets/image-20220711205508754.png)]
v-html
v-html可以更新DOM对象的innerHTML，语法为v-html="Vue数据变量"。和innerText、innerHTML一样，Vue指令-v-text和v-html都可以设置标签显示的内容，他们的区别是v-text把值当成普通字符串，而v-html把值当成标签进行解析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4y0ZVggd-1657895728275)(赵越峰2022前端笔记.assets/image-20220711205945869.png)]
注意：会覆盖差值表达式
v-show和v-if
v-show和v-if可以控制标签的隐藏或出现，他们的语法是v-show="true"，v-if="true"。二者原理有所不同，v-show 用的css方法display:none隐藏，而v-if 直接从DOM树上移除，因此频繁切换的时候应该使用v-show，v-if每次隐藏再出现都要经历销毁再渲染的过程，对性能影响较大。v-if可以配合v-else使用，满足条件时渲染v-if，不满足时渲染v-else，多个条件判断可使用else-if。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3jnAm5AC-1657895728276)(赵越峰2022前端笔记.assets/image-20220711210657481.png)]
v-for
v-for可以实现列表渲染，v-for所在的标签，可以按照数据数量，循环生成多个，语法如下：
v-for="(值变量, 索引变量) in 目标结构"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tszFvejl-1657895728277)(赵越峰2022前端笔记.assets/image-20220711210852964.png)]
v-for="值变量 in 目标结构"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-anrVvEcH-1657895728277)(赵越峰2022前端笔记.assets/image-20220711210925990.png)]
v-for如何循环列表的方法是，先准备目标数据结构，然后遍历数组/对象/数字/字符串，想循环谁, 就把v-for写在谁的身上。
v-for注意事项：值变量和索引不能用到v-for范围以外，而且in的两边必须有空格
##3、vue计算属性和侦听器
#####①v-for更新检测
-
数组变更方法，就会导致v-for更新、页面更新
-
数组非变更方法，返回的是新数组，不会导致v-for更新，可以拿返回的新数组替换旧数组或者this.$set()方法更新某个值
回顾：数组变更方法有push, pop, shift, unshift, splice, sort, reverse，数组非变更方法有filter, concat, slice。
②v-for就地复用
数组改变后新旧更新DOM方式如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1KTkdhPZ-1657895728278)(赵越峰2022前端笔记.assets/image-20220712165329669.png)]
v-for更新时, 是如何操作DOM的? -循环出新的DOM结构, 和旧的DOM结构对比, 尝试就地复用原有标签, 更新内容。
#####③虚拟DOM
在document对象上, 渲染到浏览器上显示的标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CwzD091H-1657895728279)(赵越峰2022前端笔记.assets/image-20220712165452442.png)]
本质是保存节点信息, 属性和内容的一个JS对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4uGXxB1-1657895728281)(赵越峰2022前端笔记.assets/image-20220712165550549.png)]
在内存中比较变化部分, 然后给真实DOM打补丁(更新)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhtlupGh-1657895728282)(赵越峰2022前端笔记.assets/image-20220712165720444.png)]
总结：1.虚拟DOM是什么?
本质就是一个JS对象, 保存DOM关键信息
2.虚拟DOM好处是?
提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM相应属性或内容(打补丁)
#####④key作用
无key发生更新时，从第二个往后更新内容 – 性能不高
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HKwkLgck-1657895728282)(赵越峰2022前端笔记.assets/image-20220712165851001.png)]
无key属性, 图解 - 最大限度尝试就地修改/复用相同类型元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wqafnpun-1657895728283)(赵越峰2022前端笔记.assets/image-20220712170049394.png)]
有key值为索引, 基于key的来比较新旧虚拟DOM, 移除key不存在元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Av1cEawO-1657895728283)(赵越峰2022前端笔记.assets/image-20220712170106552.png)]
先产生新旧虚拟DOM, 根据key比较, 还是就地更新
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t0xxbKvS-1657895728284)(赵越峰2022前端笔记.assets/image-20220712170148562.png)]
有key, 值为id属性, 基于key的来比较新旧虚拟DOM, 移除key不存在元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9s1BxDmk-1657895728285)(赵越峰2022前端笔记.assets/image-20220712170300090.png)]
有key, 值为id, 先产生新旧虚拟DOM, 根据key比较
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-chp4qTLV-1657895728285)(赵越峰2022前端笔记.assets/image-20220712170359801.png)]
总结：1.子元素或者内容改变会分哪2种情况比较?
无key, 就地更新
有key, 按照key比较
2.key值要求是?
唯一不重复的字符串或者数值
3.key应该怎么用?
有id用id, 无id用索引
4.key的好处?
可以提高更新的性能
⑤动态class
用v-bind给标签class设置动态的值，语法 :class="{类名: 布尔值}"，true使用, false不使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6V5wANkc-1657895728286)(赵越峰2022前端笔记.assets/image-20220712170619227.png)]
⑥动态style
给标签动态设置style的值，语法为 :style="{css属性名: 值}"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8PORkgHq-1657895728287)(赵越峰2022前端笔记.assets/image-20220712170746063.png)]
总结：1.给style赋值和class区别是?
:class=“{类名: 布尔值}”,true使用, false不使用
:style=“{css属性名: 值}”
⑦计算属性computed
当变量的值, 需要通过别的变量计算而得来，就需要用到计算属性。计算属性特点是，函数内使用的变量改变, 重新计算结果返回。注意：计算属性也是vue数据变量，所以属性名和data里名字不能重复。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NyqBfkhB-1657895728288)(赵越峰2022前端笔记.assets/image-20220712171508610.png)]
#####⑧计算属性的缓存
计算属性, 基于依赖项的值进行缓存，依赖的变量不变, 都直接从缓存取结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Zm21hDi-1657895728289)(赵越峰2022前端笔记.assets/image-20220712171731915.png)]
1.计算属性好处是，带缓存，依赖项不变, 直接从缓存取，依赖项改变, 函数自动执行并重新缓存值。
2.计算属性使用场景是，当变量值, 依赖其他变量计算而得来才用
#####⑨计算属性的完整写法
计算属性其实也是变量，可以赋值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qcjfRuX-1657895728290)(赵越峰2022前端笔记.assets/image-20220712171939949.png)]
总结：1.何时用计算属性完整写法? -给计算属性变量赋值时
2.set函数和get函数什么时候执行? -set接收要被赋予的值，或者get里要返回给这个计算属性具体值使用
#####⑩watch侦听器
vue中，watch可以侦听data/computed属性值的改变，想要侦听到某个变量值改变呢，可以使用watch配置, key要侦听的data/计算属性名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAeWgvoq-1657895728290)(赵越峰2022前端笔记.assets/image-20220712172136788.png)]
#####⑪深度侦听
vue也可以侦听对象和数组等复杂类型，只需要把侦听器写成对象形式, 给handler方法和deep:true
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eTyVgN96-1657895728291)(赵越峰2022前端笔记.assets/image-20220712172321311.png)]
##4、vue组件
#####①封装组件
如果我们在页面中需要使用同一个功能多次，不仅需要重复写三次代码，效率不高，还要担心变量重名。为了解决这个问题，我们可以考虑把这部分重复的代码作为一个组件封装起来，需要使用几次就调用几次。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ei1PkU4n-1657895728293)(赵越峰2022前端笔记.assets/image-20220712174331380.png)]
右侧：将代码封装为Pannel组件，左下：调用Pannel组件
#####②组件概念
- 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
- 组件化 ：封装的思想，把页面上
可重用的部分封装为组件，从而方便项目的 开发 和 维护 - 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ENR3a488-1657895728294)(赵越峰2022前端笔记.assets/image-20220712174713380.png)]
#####③组件基础用法
每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJiYXkRd-1657895728295)(赵越峰2022前端笔记.assets/image-20220712174850931.png)]
#####④组件内scoped作用
- 准备: 当前组件内标签都被添加 data-v-hash值 的属性
- 获取: css选择器都被添加 [data-v-hash值] 的属性选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nngWANaY-1657895728296)(赵越峰2022前端笔记.assets/image-20220712175038628.png)]
总结：1.Vue组件内样式, 只针对当前组件内标签生效如何做?
style上添加scoped
2.原理和过程是什么?
自动给标签添加data-v-hash值属性
所有选择器都加上属性选择器
⑤vue组件通信-父传子
想要从一个组件内, 给另外一个组件传值，可以在组件a内, 定义变量, 准备接收, 然后使用变量，然后组件b内引入组件a, 注册组件, 使用组件, 传值进去，我们先介绍父传子技术。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GhMoxC0o-1657895728297)(赵越峰2022前端笔记.assets/image-20220712175640527.png)]
子组件内, 定义变量, 准备接收, 然后使用变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f7Ew7sSP-1657895728298)(赵越峰2022前端笔记.assets/image-20220712175735243.png)]
父组件(App.vue)内, 要展示封装的子组件(MyProduct.vue)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nTofcCGH-1657895728298)(赵越峰2022前端笔记.assets/image-20220712175801339.png)]
总结：1.什么时候需要父传子技术?
从一个vue组件里把值传给另一个vue组件(父->子)
2.父传子步骤是什么?
子组件内, props定义变量, 在子组件使用变量
父组件内, 使用子组件, 属性方式给props变量传值
#####⑥循环使用组件
在上面的案例中，我们可以循环创建组件，并在每次循环创建时向组件传入不同的值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQhmmJNZ-1657895728299)(赵越峰2022前端笔记.assets/image-20220712180109734.png)]
⑦单项数据流
在上面的案例中，子组件内想实现砍价功能, 点一次按钮砍掉价格，但我们发现在子组件内不能能改变父传入的数据，因此我们说，从父到子的数据流向, 叫单向数据流。原因是子组件修改, 不通知父级, 造成数据不一致性，Vue规定了props里的变量, 本身是只读的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e5fnRUht-1657895728300)(赵越峰2022前端笔记.assets/image-20220712180449112.png)]
总结：1.为何不建议, 子组件修改父组件传过来的值?
父子数据不一致, 而且子组件是依赖父传入的值
2.什么是单向数据流?
从父到子的数据流向, 叫单向数据流
3.props里定义的变量能修改吗?
不能, props里的变量本身是只读的
#####⑧vue组件通信-子向父传值
如果想要实现子向父传值，可以让子组件触发父组件的自定义事件方法。
首先在父组件内, 绑定自定义事件和事件处理函数，语法: @自定义事件名="父methods里函数名"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVGNu7JX-1657895728301)(赵越峰2022前端笔记.assets/image-20220712180800071.png)]
然后在子组件内, 恰当的时机, 触发父给我绑的自定义事件, 导致父methods里事件处理函数执行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJ6jOoIP-1657895728302)(赵越峰2022前端笔记.assets/image-20220712180840079.png)]
总结：1.什么时候使用子传父技术?
当子想要去改变父里的数据
2.子传父如何实现?
父组件内, 给组件@自定义事件=“父methods函数”
子组件内, 恰当时机this.$emit(‘自定义事件名’, 值)
##5、vue生命周期和axios库
①vue生命周期
从vue实例，创建到销毁的整个过程就是vue的生命周期
#####②vue钩子函数
vue框架内置钩子函数，随着组件的生命周期阶段，自动执行。
- 作用：可以在特定的时间点，执行特定的操作
- 场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据
- 分类：4大阶段8个方法
| 阶段 | 方法名 | 方法名 |
|---|---|---|
| 初始化 | beforeCreate | created |
| 挂载 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestroy | destroyed |
总结：1.如何知道vue生命周期到达了什么阶段：使用钩子函数
2.钩子函数有哪些：初始化（bedoreCreate、created）、挂载（beforeMount、mounted）、更新（beforeUpdate、updated）、销毁（beforeDestroy、destroyed）
#####③vue初始化阶段
以下来自于vue官方文档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UZldSf2K-1657895728303)(赵越峰2022前端笔记.assets/image-20220714090956959.png)]
1.new Vue() – Vue实例化(组件也是一个小的Vue实例)
2.Init Events & Lifecycle – 初始化事件和生命周期函数
3.beforeCreate – 生命周期钩子函数被执行
4.Init injections&reactivity – Vue内部添加data和methods等
5.created – 生命周期钩子函数被执行, 实例创建
6.接下来是编译模板阶段 –开始分析
7.Has el option? – 是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项
总结：vue实例从创建到编译模板执行了两个钩子函数，beforeCreate和created。created函数触发时能获取data，但不能获取真实DOM
#####④vue挂载阶段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Itt7dygE-1657895728304)(赵越峰2022前端笔记.assets/image-20220714091304149.png)]
1.template选项检查
有 - 编译template返回render渲染函数
无 – 编译el选项对应标签作为template(要渲染的模板)
2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行
总结：vue实例从创建到显示经历了四个钩子函数beforeCreate、created、beforeMount、mounted，可以在mounted里面获取真实DOM
⑤vue更新阶段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jBPcgx4j-1657895728305)(赵越峰2022前端笔记.assets/image-20220714091553716.png)]
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
⑥vue销毁阶段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nAScebd7-1657895728307)(赵越峰2022前端笔记.assets/image-20220714095930042.png)]
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
总结：一般在beforeDestory/destroyed函数里面手动消除计时器、定时器和全局事件
⑦axios基本使用
axios是一个专门用于发送请求的库，官网：http://www.axios-js.com/，特点：
- 支持客户端发送Ajax请求
- 支持服务端Node.js发送请求
- 支持Promise相关用法
- 支持请求和响应的拦截器功能
- 自动转换JSON数据
axios底层还是原生js实现，内部通过Promise封装的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lJaDbiXA-1657895728308)(赵越峰2022前端笔记.assets/image-20220714100625423.png)]
总结：ajax是 一种前端异步请求后端的技术；ajax原理是浏览器window接口的XMLHttpRequest；axios是基于原生ajax+Promise技术封装通用于前后端的请求库
axios获取数据
以获取图书信息为例，我们通过触发按钮的点击事件，调用后台接口，拿到所有图书信息，然后打印到控制台。注意要先下载axios，引入后才能使用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bGttOuDG-1657895728308)(赵越峰2022前端笔记.assets/image-20220714101148260.png)]
总结：1.axios如何发起一次get请求?
在method选项配置为get / 也可以默认不写
2.axios函数调用原地结果是什么?
是一个Promise对象
3.如何拿到Promise里ajax的成功或失败的结果?
then() / catch()
#####⑧使用get方式传参
以获取指定图书信息为例，获取用户输入框的文本，点击调用后台接口，查询指定的书籍信息，然后打印到控制台。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tAVbBT5s-1657895728309)(赵越峰2022前端笔记.assets/image-20220714101449898.png)]
总结：1.ajax如何给后台传参
-
在url ? 后面拼接 – 查询字符串
-
在url路径上 – 需要后端特殊处理
-
在请求体传参给后台
2.axios哪个配置项会把参数自动写到url?后面
params
⑨使用post方式传参
以新增图书信息为例，点击新增按钮，把用户输入的信息传递给后台，然后把后台返回的结果打印到控制台上。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJFhpenT-1657895728310)(赵越峰2022前端笔记.assets/image-20220714101917276.png)]
总结：1.post请求方式, 一般在哪里传递数据给后台?
请求体中
2.axios哪个选项, 可以把参数自动装入到请求体中?
data选项
3.axios默认发给后台请求体数据格式是?
json字符串格式
#####⑩配置基础地址
在axios中，可以设置基础地址，统一管理，也避免了每次发送请求都需要重复写一次baseURL。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-poz086fq-1657895728311)(赵越峰2022前端笔记.assets/image-20220714102219893.png)]
总结：axios如何配置基地址?
axios.defaults.baseURL
##6、插槽
#####①插槽
通过slot标签，让组件内可以接收不同的标签结构显示
-
组件内用占位
-
使用组件时夹着的地方, 传入标签替换slot
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-COZ1eikv-1657895728312)(赵越峰2022前端笔记.assets/image-20220714111153341.png)]
总结：1.当组件内某一部分标签不确定怎么办?
用插槽技术
2.插槽具体如何使用?
-
先在组件内用slot占位
-
使用组件时, 传入具体标签插入
3.插槽运行效果?
传入的标签会替换掉slot显示
#####②默认内容
如果外面不给传组件标签，想给个默认显示内容，可以在内放置内容, 作为默认显示内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3gMPAsaT-1657895728313)(赵越峰2022前端笔记.assets/image-20220714111340784.png)]
总结：不给组件传标签. slot内容原地显示；给组件内传标签, 则slot整体被换掉
#####③具名插槽
如果组件内有2组以上需要传入外部标签的时候，可以给slot使用name属性区分名字，然后template配合v-slot:名字来分发对应标签。注意：v-slot:可以简化成#
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zd3SNTeb-1657895728314)(赵越峰2022前端笔记.assets/image-20220714111833157.png)]
总结：1.具名插槽的使用步骤是什么?
组件内: slot占位, 设置 name 属性用于区分
使用者: template 配合 v-slot:name 指定替换 slot
2,v-slot: 可以简化成什么?
可以简化成#号
④作用域插槽
使用插槽时，想使用组件里的变量，如果直接用另外一个组件里的变量，就会报错
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LKDPpyaq-1657895728315)(赵越峰2022前端笔记.assets/image-20220714112333405.png)]
口诀:
-
子组件, 在slot上绑定属性和子组件内的值
-
使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
-
scope变量名自动绑定slot上所有属性和值
scope = {row: defaultObj}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vehbKzGf-1657895728316)(赵越峰2022前端笔记.assets/image-20220714112554317.png)]
总结：1.作用域插槽什么时候使用?
使用组件插槽技术时, 需要用到子组件内变量
2.作用域插槽使用口诀?
子组件在slot身上添加属性和子组件的值
使用组件处template配合v-slot=“变量名”
收集slot身上的所有属性和值
⑤作用域插槽使用场景
作用域插槽常用于自定义组件标签+内容，可以让组件更加灵活的适用于不同的场景和项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CvDYZ6cE-1657895728316)(赵越峰2022前端笔记.assets/image-20220715092235215.png)]
例子: 我想要给td内显示图片, 需要传入自定义的img标签
-
在MyTable.vue的td中准备占位, 但是外面需要把图片地址赋予给src属性,所以在slot上把obj数据绑定
-
在UseTable使用MyTable的时候, template上v-slot绑定变量, 传入img组件设置图片地址
#####⑥自定义指令
有时候vue内置的指令不能满足我们的要求，我们可以自定义一些指令来使用。
全局注册的语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gd25dPmq-1657895728317)(赵越峰2022前端笔记.assets/image-20220715092734549.png)]
局部注册的语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vDUzr99j-1657895728319)(赵越峰2022前端笔记.assets/image-20220715092755759.png)]
⑦￥refs获取DOM
在mounted生命周期，可以通过两种方式获取原生DOM标签
- 首先，在目标标签添加id/ref
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cITqkY8i-1657895728319)(赵越峰2022前端笔记.assets/image-20220715100508984.png)]
- 然后在恰当的时机，通过id或者ref属性获取目标标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xTPsxXSP-1657895728320)(赵越峰2022前端笔记.assets/image-20220715100551281.png)]
⑧￥refs获取组件对象
通过ref属性获取组件对象的方法：
-
首先，创建Demo组件，写一个方法
-
然后，在App.vue使用Demo组件，给ref属性，名字随意
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvqmeMMj-1657895728321)(赵越峰2022前端笔记.assets/image-20220715100935271.png)]
- 最后，在恰当的时机，通过ref属性，获取组件对象，可调用组件对象里方法等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqSAlaYh-1657895728322)(赵越峰2022前端笔记.assets/image-20220715100939322.png)]
总结：1.如何获取组件对象呢?
目标组件添加ref属性
this.$refs.名字 获取组件对象
2.拿到组件对象能做什么?
调用组件里的属性/方法
⑨$nextTick使用
想要data数据改变，获取原生DOM内容，可以通过$nextTick实现
- 首先，创建标签显示数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XqFXSeRI-1657895728323)(赵越峰2022前端笔记.assets/image-20220715101422450.png)]
- 然后，当点击+1的时候，马上获取原生DOM内容。这个时候会发现，获取到的还是之前的，原因是vue更新DOM是异步的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dr9nYitw-1657895728324)(赵越峰2022前端笔记.assets/image-20220715101429606.png)]
- 想要解决这个问题，需要等DOM更新后，再触发此方法里的函数体执行。语法为
this.$nextTick(函数体)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pSVjiyr5-1657895728326)(赵越峰2022前端笔记.assets/image-20220715101930774.png)]
总结：1.data改变更新DOM是同步还是异步的?
异步
2.我们可以在哪里访问到更新后的DOM呢?
this.$nextTick里的函数体
updated生命周期钩子函数(了解)
⑩$nextTick使用场景
点击按钮后隐藏按钮，并展示为输入框，让输入框处于激活状态
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXBPILvm-1657895728327)(赵越峰2022前端笔记.assets/image-20220715102616401.png)]
注意: 一定要用v-if来写 (保证DOM异步更新前获取不到输入框, 体现$nextTick价值)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kPtivOcv-1657895728328)(赵越峰2022前端笔记.assets/image-20220715102643064.png)]
想要优化使用，也可以$nextTick()返回Promise 配合await使用
总结：1.$nextTick函数原地返回什么?
Promise对象
2.如何在JS中主动触发标签的事件呢?
获取到DOM对象, 调用事件方法
⑪v-model的本质
想要用v-model实现数据双向绑定，可以按照如下操作：
-
给value属性赋值
-
接收input事件，把值赋予给变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fUC8TXdD-1657895728329)(赵越峰2022前端笔记.assets/image-20220715103305720.png)]
-
所以子组件中，就要用props+value接收使用
-
最后用子组件触发input事件传值
##7、Vue-Router路由
①vue路由简介
就像路由器是设备跟ip的映射关系一样，Vue的路由是接口和服务的映射关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3l0NWWLs-1657895728330)(赵越峰2022前端笔记.assets/image-20220715111027743.png)]
或者路径和组件的映射关系
http://localhost:8080/#/home http://localhost:8080/#/comment http://localhost:8080/#/search
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3l2UnGeb-1657895728331)(赵越峰2022前端笔记.assets/image-20220715111218460.png)]
总结：1.路由是什么呢?
路由是一种映射关系
2.Vue中的路由是什么?
路径和组件的映射关系
②为什么用路由
有时候我们需要实现网页的局部刷新，用户的操作就像是始终在一个页面上一样，体验非常好，这个时候就需要用路由来实现业务场景切换了，例如网易云音乐lhttps://music.163.com/
-
单页面应用(SPA): 所有功能在一个html页面上实现
-
前端路由作用: 实现业务场景切换
-
优点：
整体不刷新页面，用户体验更好
数据传递容易, 开发效率高
缺点：
开发成本高(需要学习专门知识)
首次加载会比较慢一点。不利于seo
#####③vue-router介绍
vue-router本质是一个第三方包，官网: https://router.vuejs.org/zh/
vue-router模块包特点：
-
它和 Vue.js 深度集成
-
可以定义 - 视图表(映射规则)
-
模块化的
-
提供2个内置全局组件
-
声明式导航自动激活的 CSS class 的链接
#####④路由组件分类
路由组件本身没有区别，我们为了方便理解和使用，人为的分为了页面组件和复用组件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RqfqZJ1T-1657895728333)(赵越峰2022前端笔记.assets/image-20220715113109722.png)]
页面组件就是展示出的一整版页面，配合路由来使用，通常放在src/views文件夹；复用组件就是用来展示数据的，常用于重复渲染结构一样的标签，一般放在src/components文件夹
#####⑤路由的使用
vue-router使用步骤：
-
下载vue-router模块到当前工程
-
在main.js中引入VueRouter函数
-
添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
-
创建路由规则数组 – 路径和组件名对应关系
-
用规则生成路由对象
-
把路由对象注入到new Vue实例中
-
用router-view作为挂载点, 切换不同的路由页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BWv1aJ75-1657895728337)(赵越峰2022前端笔记.assets/image-20220715113610035.png)]
注意: 一切都要以url上的hash值为准
总结：1.vue-router本质是什么?
第三方包, 下载后集成到vue项目中
2.vue-router如何使用?
下包/引入/注册/规则/路由对象/注入/挂载点
3.规则如何生效?
切换url上hash值, 开始匹配规则, 对应组件展示到router-view位置
#####⑥使用声明式导航来跳转
-
vue-router提供了一个全局组件 router-link
-
router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
-
router-link提供了声明式导航高亮的功能(自带类名)
我们可以使用组件router-link来替代a标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKNYQf5d-1657895728338)(赵越峰2022前端笔记.assets/image-20220715114740495.png)]
总结：
-
router-link是什么?
VueRouter在全局注册的组件, 本质就是a标签
-
router-link怎么用?
当标签使用, 必须传入to属性, 指定路由路径值
-
router-link好处?
自带激活时的类名, 可以做高亮
#####⑦使用声明式导航来传参
在跳转路由时，我们想要在跳转链接上传参，可以在router-link上的to属性传值, 语法格式如下
/path?参数名=值
/path/值 – 需要路由对象提前配置 path: “/path/:参数名”
对应页面组件接收传递过来的值
$route.query.参数名
$route.params.参数名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7M7LKgU-1657895728339)(赵越峰2022前端笔记.assets/image-20220715120905744.png)]
⑧路由重定向
网页第一次打开时，没有默认的页面，可以使用路由重定向，匹配path后， 强制跳转path路径。一般来说，网页打开url默认hash值是/路径，redirect是设置要重定向到哪个路由路径。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GFUbztRZ-1657895728343)(赵越峰2022前端笔记.assets/image-20220715121732742.png)]
当用户访问的路由路径不存在时，可以重定向至404页面，在路由的最后, path匹配*(任意路径)即可，若前面都没有匹配上，那么就会命中最后这个
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhlaUxmD-1657895728345)(赵越峰2022前端笔记.assets/image-20220715121947298.png)]
#####⑨路由模式设置
路由有两种模式，hash模式和history模式，我们在实例化路由对象时, 传入mode选项和值就可以修改路由模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VUERyuga-1657895728346)(赵越峰2022前端笔记.assets/image-20220715142736535.png)]
hash路由例如: http://localhost:8080/#/home
history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)
hash模式和history模式的区别：
-
原理不同。
hash模式的实现原理是通过监听hashChange事件来实现的，前端js把当前hash地址对应的组件渲染到浏览器中。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。 -
表现不同。
hash模式会在地址栏中有#号，而history模式没有；同时由于history模式的实现原理用到H5的新特性，所以它对浏览器的兼容性有要求(IE >= 10)。 -
history模式特点
history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。
#####⑩编程式导航
可以通过JS代码来进行跳转，可以使用path或者name任选一个，语法this.$router.push(配置path/name)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RLC7Fm4C-1657895728347)(赵越峰2022前端笔记.assets/image-20220715145136459.png)]
#####⑪编程式导航传参
使用JS跳转路由时，也可以传参，在query和params中任选一个
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wmGfuYKf-1657895728349)(赵越峰2022前端笔记.assets/image-20220715145450212.png)]
注意：使用path会忽略params
总结：JS切换路由如何传值, 如何接收值?
-
query传, $route.query接
-
params传, $route.params接
⑫路由嵌套
页面顶部导航可以视为一级路由，下面的导航入口可以视为二级路由，这种在某一个一级路由中，又有几个路由的情况，就叫路由嵌套。例如网易云的发现音乐下面，又有推荐、排行榜、歌单等二级路由。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YP6H3hVO-1657895728350)(赵越峰2022前端笔记.assets/image-20220715150053502.png)]
我们来模拟写一个路由嵌套结构：
- 创建需要用的所有组件
src/views/Find.vue – 发现音乐页
src/views/My.vue – 我的音乐页
src/views/Second/Recommend.vue – 发现音乐页 / 推荐页面
src/views/Second/Ranking.vue – 发现音乐页 / 排行榜页面
src/views/Second/SongList.vue – 发现音乐页 / 歌单页面
- main.js– 继续配置2级路由
一级路由path从/开始定义
二级路由往后path直接写名字, 无需/开头
嵌套路由在上级路由的children数组里编写路由信息对象
- 说明：
App.vue的router-view负责发现音乐和我的音乐页面, 切换
Find.vue的的router-view负责发现音乐下的, 三个页面, 切换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0M18zZ3I-1657895728350)(赵越峰2022前端笔记.assets/image-20220715150302592.png)]
总结：1. 二级路由如何配置?
创建需要的二级页面组件
路由规则里children中配置二级路由规则对象
一级页面中设置router-view显示二级路由页面
2. 二级路由注意什么?
二级路由path一般不写根路径/
跳转时路径要从/开始写全
#####⑬声明式导航的类名区别
观察路由嵌套导航的样式可以发现：
router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRy7wYhg-1657895728351)(赵越峰2022前端笔记.assets/image-20220715150603383.png)]
⑭路由前置守卫
用户在进行页面跳转的时候，如果没有登录，应该把他打回去登录页，这个就叫做权限控制，可以使用全局前置守卫来实现，语法：lrouter.beforeEach((to, from, next) =>｛｝)，注意一定要调next（）才会跳转下一页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kBCZLz5T-1657895728352)(赵越峰2022前端笔记.assets/image-20220715151017970.png)]
总结：什么是路由守卫?
路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由
#####⑮组件缓存
针对暂时看不见的组件，最好不要频繁销毁，否则会影响性能，我们可以使用vue内置的keep-alive组件把要缓存的组件包起来
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlCJz2Ou-1657895728353)(赵越峰2022前端笔记.assets/image-20220715151233249.png)]
#####⑯匹配缓存
如果只想缓存某个组件或者不缓存某个组件，可以给keep-alive组件添加include或者exclude属性，Include (包含 – 缓存)，exclude(不包含 – 不缓存)
-
先给对应组件设置name属性名
-
再把名字填写到include/exclude位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-audXnMcx-1657895728353)(赵越峰2022前端笔记.assets/image-20220715155132045.png)]
#####⑰缓存状态
想要知道组件是被切走了，还是被切回来了，我们扩展了2个新的生命周期方法
-
lactivated – 激活时触发
-
deactivated – 失去激活状态触发
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81mCt18M-1657895728354)(赵越峰2022前端笔记.assets/image-20220715155528422.png)]
8、Vuex
①Vuex介绍
Vuex 是 vue 项目中实现大范围数据共享的技术方案。
作用：能够方便、高效地实现组件之间的数据共享。
使用Vuex的好处：
- 数据的存取一步到位，不需层层传递
- 数据的流动非常清晰
- 存储在 Vuex 中的数据都是响应式的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGVyr5aQ-1657895728355)(赵越峰2022前端笔记.assets/image-20220715160921228.png)]
总结：1. Vuex 的作用是什么？
频繁、大范围的数据共享
- 在项目中使用 Vuex 的 3 个好处是什么？
-
数据的存取一步到位
-
数据的流动非常清晰
-
Vuex 的数据是响应式的
#####②Vuex安装和配置
想要引入Vuex，需要进行如下步骤：
- 安装 Vuex 的依赖包：
使用npm i [email protected]命令，在把 Vuex 安装为项目的依赖包：
- 封装 Store 模块：
①导入 Vue 和 Vuex 依赖包
②把 Vuex 安装为 Vue 的插件
③创建 store 的实例对象
④向外共享 store 的实例对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d6HUoWj5-1657895728355)(赵越峰2022前端笔记.assets/image-20220715162710365.png)]
- 导入并挂载 Store 的实例对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eyncv8WX-1657895728356)(赵越峰2022前端笔记.assets/image-20220715162749153.png)]
总结：1.调用哪个函数可以把 Vuex 安装为 Vue 的插件？
Vue.use(Vuex)
2.怎么创建 Store 的实例对象？
new Vuex()或new Vuex.Store()
③state的基本使用
概念：State 本质上就是 Object 对象
作用：用来存储全局共享的数据
基本用法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8NIfAVSU-1657895728356)(赵越峰2022前端笔记.assets/image-20220715163334711.png)]
在每个 Vue 组件中，可以通过 this.$store.state.全局数据名称 访问 Store 中的数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Alqe9T58-1657895728357)(赵越峰2022前端笔记.assets/image-20220715164114509.png)]
也可以通过基于 Vuex 提供的 mapState 辅助函数，把 Store 中指定的数据，映射为当前组件的计算属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uozMTRBb-1657895728358)(赵越峰2022前端笔记.assets/image-20220715164254121.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qpyTAMrx-1657895728359)(赵越峰2022前端笔记.assets/image-20220715164341343.png)]
总结：1.new Vuex.Store() 时，通过哪个选项来定义共享的数据？
new Vuex.Store({
state: { /* 要共享的数据 */ }
})
- 在组件使用 State 中数据的两种方式分别是什么？
this.$store.state.数据项的名字
mapState 辅助函数 + computed 计算属性
#####④Mutation的基本使用
我们可以在组件中修改Vuex中的state数据，但是不推荐，包括Vuex 官方也禁止我们直接修改，会导致修改来源不明确的问题，不利于调试和后期的维护。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FWJ4asvs-1657895728359)(赵越峰2022前端笔记.assets/image-20220715170053737.png)]
如果想要修改State中的数据，只能调用Mutation方法。Mutation 本质上是 JavaScript 函数，专门用来变更 Store 中的数据。这样做的好处是能够确保修改来源的唯一性，方便调试和后期维护。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HRiXNjnI-1657895728360)(赵越峰2022前端笔记.assets/image-20220715170251657.png)]
总结：State、组件、Mutation之间的关系
State：全局存储共享数据的地方
Vue 组件：使用数据的地方
Mutation：专门负责修改 State 中的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwsM2Rye-1657895728361)(赵越峰2022前端笔记.assets/image-20220715170410109.png)]
想要使用Mutation，可以按照如下步骤：
①在 Vuex 中定义 Mutation 方法
②在组件中调用 Mutation 方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CJufYzsq-1657895728362)(赵越峰2022前端笔记.assets/image-20220715170611053.png)]
总结：1.mutation 方法的第一个形参是什么？
永远都是 state 对象
2.在组件中怎样调用 mutation 方法？
this.$store.commit(‘方法名’)
载荷（Payload）
Vuex 中的载荷就是参数的意思，通过载荷可以提高 Mutation 方法的通用性。例如：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYVJIUZz-1657895728363)(赵越峰2022前端笔记.assets/image-20220715170852502.png)]
提交载荷（Payload）
在组件中，可以通过 this.$store.commit() 方法的第二个参数来提交载荷（参数），示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OaqjXG5c-1657895728365)(赵越峰2022前端笔记.assets/image-20220715170924722.png)]
总结：1.怎样在 Mutation 方法中定义载荷？
方法名(state, 载荷的形参)
其中载荷的形参推荐命名为 payload
2.怎样在调用 Mutation 方法时提交载荷？
this.$store.commit(方法名，载荷的实参)
mapMutations辅助函数
基于 Vuex 提供的 mapMutations 辅助函数，可以方便的把 Store 中指定的方法，映射为当前组件的 methods：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hxYand8w-1657895728366)(赵越峰2022前端笔记.assets/image-20220715171041584.png)]
mapMutations辅助函数的用法示例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GtpOxlWV-1657895728375)(赵越峰2022前端笔记.assets/image-20220715171114660.png)]
Mutation必须是同步函数
在项目开发中，为了保证 Store 中状态的每一次变化都是可追踪的，Vuex 规定： Mutation 必须是同步函数。否则，vue-devtools 将无法正常追踪 Store 中数据的变化，这对大型项目的开发调试是灾难性的！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qNUdBHtf-1657895728377)(赵越峰2022前端笔记.assets/image-20220715171208541.png)]
错误示范：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TesdEvsS-1657895728378)(赵越峰2022前端笔记.assets/image-20220715171230907.png)]
#####⑤Action的基本使用
因为Mutation只能是同步函数，所以我们引入了Action，Action 本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作。Action不能直接修改数据源。想要将Action异步操作得到的数据结果保存到数据源中，Action会把异步操作的结果，转交给Mutation，由Mutation来负责修改数据源。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Su8WjRU2-1657895728379)(赵越峰2022前端笔记.assets/image-20220715171350448.png)]
定义Action方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rqCZEN8l-1657895728380)(赵越峰2022前端笔记.assets/image-20220715171716714.png)]
调用Action方法
在组件中，通过 this.$store.dispatch(‘xxx’) 方法，即可触发指定名称的 Action 方法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PDBERv1-1657895728381)(赵越峰2022前端笔记.assets/image-20220715171759351.png)]
在Action方法中定义载荷
在 Action 方法中，可以通过第二个形参的位置来定义载荷参数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2GZGEDwf-1657895728382)(赵越峰2022前端笔记.assets/image-20220715171824696.png)]
调用Action方法时提交载荷
通过 this.$store.dispatch() 方法的第二个参数，即可提交载荷。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mkdIjym5-1657895728383)(赵越峰2022前端笔记.assets/image-20220715171852064.png)]
mapActions辅助函数
基于 Vuex 提供的 mapActions 辅助函数，可以方便的把 Store 中指定的 Action，映射为当前组件的 methods。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-25NRiu7u-1657895728384)(赵越峰2022前端笔记.assets/image-20220715171927026.png)]
mapActions辅助函数的用法示例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0FIYKsr3-1657895728385)(赵越峰2022前端笔记.assets/image-20220715172121412.png)]
#####⑥Getter的基本使用
组件中计算属性的复用性比较低，如果有多个组件需要用到此计算属性，我们需要在多个组件之间复制粘贴这个函数。这个时候就可以使用Getter，它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。Getter 本质上是 JavaScript 函数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhfjRcsI-1657895728386)(赵越峰2022前端笔记.assets/image-20220715172409447.png)]
定义Getter方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJ3DjWms-1657895728387)(赵越峰2022前端笔记.assets/image-20220715172438320.png)]
访问Getter的第一种方式
在组件中，可以通过 this.$store.getters.xxx 来访问指定 getter 的值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6pUANCup-1657895728389)(赵越峰2022前端笔记.assets/image-20220715172504319.png)]
访问getter的第二种方式
基于 mapGetters 辅助函数，可以把 store 中的 getter 映射为当前组件的计算属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8XpcJN0f-1657895728390)(赵越峰2022前端笔记.assets/image-20220715172528198.png)]
#####⑦Module的基本使用
在下面的示例中，所有的全局数据、方法都集中在了一起，导致 Vuex 的结构混乱，不利于现阶段的开发和后期的维护。所有的全局数据、方法都集中在了一起，导致 Vuex 的结构混乱，不利于现阶段的开发和后期的维护。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bm9rJDP8-1657895728391)(赵越峰2022前端笔记.assets/image-20220715172619694.png)]
这样我们就引入了Module的概念，Vuex 中的 Module 表示按照模块化的开发思想，把不同的数据和方法，按照彼此的关联关系进行封装。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QOBcSVXt-1657895728392)(赵越峰2022前端笔记.assets/image-20220715172710770.png)]
定义模块
每个Module模块都是彼此独立的，都可以拥有自己的 state、mutations、actions、getters 节点：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otvLuM2l-1657895728393)(赵越峰2022前端笔记.assets/image-20220715172746399.png)]
注册模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fc4Oam1L-1657895728394)(赵越峰2022前端笔记.assets/image-20220715172804192.png)]
总结：1.模块的 state 是对象还是方法？
方法
2.怎样使用 modules 对象注册模块？
模块的注册名称: 导入的模块对象
namespaced命名空间）
namespaced（命名空间）可以解决不同模块之间成员名称冲突的问题。在实际项目开发中，建议为每个 Module 模块都开启命名空间！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ut46qibJ-1657895728395)(赵越峰2022前端笔记.assets/image-20220715173942912.png)]
在定义模块时，只需在模块的根节点中声明 namespaced: true 选项，即可为当前模块开启命名空间：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElvOEoZC-1657895728400)(赵越峰2022前端笔记.assets/image-20220715174011737.png)]
通过模块的注册名称访问模块下的成员
当模块启用了 namespaced: true 选项之后，模块就有了自己的命名空间。此时，模块内的成员需要通过模块的注册名称才可以访问到。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tKPB1xHV-1657895728401)(赵越峰2022前端笔记.assets/image-20220715174039230.png)]
访问命名空间下的state数据
在组件中访问命名空间下的 state 数据时，建议使用 mapState 函数来简化访问的过程。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dk6qaHIl-1657895728403)(赵越峰2022前端笔记.assets/image-20220715174111438.png)]
访问命名空间下的mutation方法
在组件中访问命名空间下的 mutation 方法时，建议使用 mapMutations 函数来简化访问的过程：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s8hAB4fF-1657895728404)(赵越峰2022前端笔记.assets/image-20220715174137425.png)]
访问命名空间下的action和getter
建议使用 mapActions 和 mapGetters 函数来简化访问的过程，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XyJMdfLi-1657895728405)(赵越峰2022前端笔记.assets/image-20220715174210787.png)]
总结：1.如何为模块开启命名空间？
namespaced: true
2.如何基于 map 相关的辅助函数，访问命名空间下的成员？
mapXXX(‘模块的注册名称’, [ /* 要映射的成员名称 */ ])
##9、Vue组件库
#####①vue官方组件库
在之前的vue-cli创建项目时，我们都是使用了默认配置Default（[vue 2] babel, eslint），不包含vue-router、vuex等其它功能，我们可以选择自定义特性Manually select features，在项目创建期间，能够选择并安装更多的功能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ff988W42-1657895728406)(赵越峰2022前端笔记.assets/image-20220715175414123.png)]
推荐选择并安装以下6个功能：Choose Vue version、Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter。可以通过上下箭头进行切换，空格进行选中（git黑窗口中无法选中，建议使用cmd）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5LPKtk8W-1657895728407)(赵越峰2022前端笔记.assets/image-20220715175651326.png)]
然后选择切换到2.x
输入n（用hash模式不要用history模式）
选择Less（目前只学了less，sass以后再学）
选择ESLint + Standard config（eslint不要关，帮助养成良好的编码习惯）
选择默认的Lint on save（即保存时确认代码报错情况）
选择In dedicated config files（把每一个配置文件分开存放，不要全部放在package.json）
输入y（把这次的配置保存为默认配置）
最后给项目起个名字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ndft2QJa-1657895728408)(赵越峰2022前端笔记.assets/image-20220715180018649.png)]
#####②Eslint
ESLint 是可组装的 JavaScript 和 JSX 检查工具。通俗理解就是一个用来约束团队成员代码风格的工具。
常见的ESLint规则：
| 语法规则 | 错误消息 | 说明 |
|---|---|---|
| no-multiple-empty-lines | More than 1 blank line not allowed | 不允许出现连续的空行 |
| eol-last | Newline required at end of file but not found | 文件末尾必须包含一个空白行 |
| semi | Extra semicolon | 需要省略不必要的分号 |
| comma-dangle | Unexpected trailing comma | 禁止使用拖尾逗号 |
| no-trailing-spaces | Trailing spaces not allowed | 行末禁止出现多余的空格 |
| indent | Expected indentation of 2 spaces but found 4 | 必须使用两个空格进行缩进 |
| quotes | Strings must use singlequote | 字符串必须使用单引号表示 |
| space-before-function-paren | Missing space before function parentheses | 函数形参的 () 之前必须有空格 |
ESLint官方文档：https://eslint.bootcss.com/docs/rules/
ESlint的规则是我们可以自己修改的，这里以其中一项修改为例。首先找到项目根目录下的 .eslintrc.js 配置文件
然后在 rules 配置选项中，修改默认的语法规则
// 通过 rules 来修改默认规则
rules: {
‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’,
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’,
// 禁止在 function 函数的形参 () 之前出现空格
‘space-before-function-paren’: [“error”, “never”]
}
注意：修改完 .eslintrc.js 配置文件后，必须重新运行 npm run serve 命令，否则修改后的配置不会生效。
实际项目开发中，一般是团队leader和组员约定好一套合适的代码风格，大公司一般有完善的代码规范。
在VS Code中使用ESLint规则
想要在VS Code中使用ESLint规则，可以安装ESLint插件, 让vscode实时告诉我, 我哪里错了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0WVITJx9-1657895728409)(赵越峰2022前端笔记.assets/image-20220715181007971.png)]
注意：用vscode打开项目时，将脚手架工程作为vscode根目录, 因为eslint要使用配置文件.eslintrc
我们还要在VS Code中进行一些设置，如图所示五个步骤：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g9NN0JXh-1657895728410)(赵越峰2022前端笔记.assets/image-20220715181217515.png)]
需要填在settings.json里的代码复制粘贴这里的就可以了
{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
稍微解释下选项，eslint.run 表示运行eslint检验的时刻 (onSave保存) (onType输入时)，editor.codeActionsOnSave 表示控制在保存时运行代码操作时修复哪些问题，source.fixAll.eslint 表示所有可自动修复的ESLint错误都将在保存时修复
如果没有生效，可能是”使用…格式化文档“功能不是把”Prettier ESLint“设置为默认值，也有可能是跟Beautify、xxxFormatxxx等美化插件冲突。
#####③element-ui
常见的Vue技术栈组件库有
- 移动端（Vant, Cube-UI, NutUI ）
- PC端 （ element-ui, Ant Design of Vue, iView）
- 小程序: uniapp
我们使用vue-cli脚手架工具创建项目，并在项目中引入elementUI组件库
首先vue create项目，详细过程已经在官方组件库部分讲过了，这里重点说如何安装elementUI组件库，首先输入命令行npm i element-ui -S，其中i是install的简写，表示安装，-S是save的缩写，表示 这个包是生产依赖， 表示项目上线也要使用这个包，如果要安装开发依赖，则使用-D命令。安装后在main.js文件中引入并注册：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
使用组件可以直接参考官方文档的用法，这里以button组件为例：
<template>
<div id="app">
<el-button>默认按钮el-button>
<el-button type="primary">主要按钮el-button>
<el-button type="success">成功按钮el-button>
<el-button type="info">信息按钮el-button>
<el-button type="warning">警告按钮el-button>
<el-button type="danger">危险按钮el-button>
div>
template>
注意:
- 组件名前面有el这个关键字
- type属性决定了按钮的样式风格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-70UF9uyb-1657895728412)(赵越峰2022前端笔记.assets/image-20220715195448069.png)]
还有其他一些常见组件也建议学习一下，如table表格组件、pagination翻页组件、Form表单组件、Tree树形组件、Dialog弹框组件、select下拉列表组件等。
#十一、微信小程序
#十二、vue3.0和TS
#十三、react基础
#十四、项目实战
1、大事件
文章发表后台系统
##2、人资
人力资源后台系统
3、黑马面面
面试题管理系统
4、黑马优购
商城类微信小程序
##5、小兔鲜
nt规则，可以安装ESLint插件, 让vscode实时告诉我, 我哪里错了。
[外链图片转存中…(img-0WVITJx9-1657895728409)]
注意：用vscode打开项目时，将脚手架工程作为vscode根目录, 因为eslint要使用配置文件.eslintrc
我们还要在VS Code中进行一些设置，如图所示五个步骤：
[外链图片转存中…(img-g9NN0JXh-1657895728410)]
需要填在settings.json里的代码复制粘贴这里的就可以了
{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
稍微解释下选项，eslint.run 表示运行eslint检验的时刻 (onSave保存) (onType输入时)，editor.codeActionsOnSave 表示控制在保存时运行代码操作时修复哪些问题，source.fixAll.eslint 表示所有可自动修复的ESLint错误都将在保存时修复
如果没有生效，可能是”使用…格式化文档“功能不是把”Prettier ESLint“设置为默认值，也有可能是跟Beautify、xxxFormatxxx等美化插件冲突。
#####③element-ui
常见的Vue技术栈组件库有
- 移动端（Vant, Cube-UI, NutUI ）
- PC端 （ element-ui, Ant Design of Vue, iView）
- 小程序: uniapp
我们使用vue-cli脚手架工具创建项目，并在项目中引入elementUI组件库
首先vue create项目，详细过程已经在官方组件库部分讲过了，这里重点说如何安装elementUI组件库，首先输入命令行npm i element-ui -S，其中i是install的简写，表示安装，-S是save的缩写，表示 这个包是生产依赖， 表示项目上线也要使用这个包，如果要安装开发依赖，则使用-D命令。安装后在main.js文件中引入并注册：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
使用组件可以直接参考官方文档的用法，这里以button组件为例：
<template>
<div id="app">
<el-button>默认按钮el-button>
<el-button type="primary">主要按钮el-button>
<el-button type="success">成功按钮el-button>
<el-button type="info">信息按钮el-button>
<el-button type="warning">警告按钮el-button>
<el-button type="danger">危险按钮el-button>
div>
template>
注意:
- 组件名前面有el这个关键字
- type属性决定了按钮的样式风格
[外链图片转存中…(img-70UF9uyb-1657895728412)]
还有其他一些常见组件也建议学习一下，如table表格组件、pagination翻页组件、Form表单组件、Tree树形组件、Dialog弹框组件、select下拉列表组件等。
#十一、微信小程序
#十二、vue3.0和TS
#十三、react基础
#十四、项目实战
1、大事件
文章发表后台系统
##2、人资
人力资源后台系统
3、黑马面面
面试题管理系统
4、黑马优购
商城类微信小程序
##5、小兔鲜
商城类网站前台