十、vue基础

2022年前端知识整理:第十部分，vue只包括基础vue2.建议先完成0相关知识html5、css3和JavaScript ES6之后再学习。有些图片上传不成功，稍后改进。请原谅我。

##1、webpack

①webpack基本概念

webpack它是一种静态模块包装工具，可以减少文件数量，减少代码体积，提高网页打开速度。

③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 html-webpack-plugin@5.3.1 -D

webpack.config.js添加配置

const HtmlWebpackPlugin = require(`html-webpack-plugin')  module.exports ={ 
          plugins:[   new HtmlWebpackPlugin({ 
            templete:'./public/index.html' }) ] }

#######处理css文件：

下载插件

yarn add css-loader@5.2.1 style-loader@2.0.0 -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 less@4.1.1 less-loader@8.1.0 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 babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15 -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 webpack-dev-serve@3.11.2 -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-20220715111027

标签： m18圆柱型激光对射型传感器 uyb型高压电容物位变送器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造电子元器件IC百科大全！

2022前端知识整理：十、vue基础

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录