vue3.0入门
vue生命周期:
create mounte(挂载) update destory
随着衍生8个钩子函数:
beforecreate created
beforemounted mounted
beforeupdate updated
beforedestory destoried
我们在左面创建一个文件夹vue,打开vscode选中该文件夹,在里面创建一个html文件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ULqA4i4q-1682215194179)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217213241865.png)]
我们运行后弹出页面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mrxv2pd0-1682215194180)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217213255975.png)]
我们要使用vue只需要写入:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukxK8zKz-1682215194180)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217214505278.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Ci2aDIH-1682215194180)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217214520967.png)]
第一章 第一个vue小代码:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bLBcJ2yt-1682215194181)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217214557446.png)]
画红圈的可理解为Counter的值:其他的类型也是可以的:
页面显示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SXTIT13-1682215194181)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217214632040.png)]
这也就意味着,我们在js定义的变量counter,可以在渲染标签里面使用。数据和dom建立了联系(数据:js中的counter,dom:div渲染区块),数据的改变可以影响试图的改变。
查看如下代码:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wkWD5Wo7-1682215194181)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217215547802.png)]
mounted()函数:是个钩子函数,会在页面加载完成后执行该函数。
运行后页面加载完成后,调用该函数,显示每过一秒,counter的值就自增1,然后渲染到页面上:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9JhNZWR-1682215194181)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217215641585.png)]
1 . html 的title的作用:
我们可以在div上加入一个title:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MwafZiIu-1682215194182)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217220652964.png)]
运行后我们将鼠标移到counter上,会显示出来:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gc4fYxkQ-1682215194182)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217220636847.png)]
2 . vue的属性绑定功能:v-bind
上述的操作还能更简单,我们把 “这是一个div” 转换成变量message的值绑定到div的title上:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fnpBVg2s-1682215194182)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217221219256.png)]
运行后,鼠标移到数字却没有显示出该字段,这是因为我们数据绑定到的div是最外层的,最外层相当于一个容器,vue的操作在最外层的dom是不生效的,所以我们内嵌在里面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xcK25r5J-1682215194182)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217222551331.png)]
我们查看网页源代码也能看出:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pcMssExg-1682215194182)(file:///C:/Users/%E9%99%88%E5%88%9A/AppData/Roaming/Typora/typora-user-images/image-20221217220636847.png?lastModify=1671284700)]
3 . vue事件绑定功能:v-on
我们给dom中添加一个点击事件,点击一下后,counter的值增加10:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wv6sFdGe-1682215194183)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217223229811.png)]
运行后显示:如果我们点击+10按钮,counter的值就会立刻自增10:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvxbsD64-1682215194183)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217223207792.png)]
4 . 数据双向绑定:v-model
已知message: hello vue
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V2bJiqNH-1682215194183)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217224402619.png)]
运行后:
第二个是input标签内v-model呈现的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-irgY9vq7-1682215194183)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217224458099.png)]
然后我们在input输入框内随便输入数据:
直接引用的数据也在变化:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vp332qIt-1682215194183)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217224517825.png)]
这就是双向绑定
修改代码:我们绑定点击事件,只要点击该事件,那么就会输出username。password的内容到控制台
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hjg9DhD4-1682215194184)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217225308460.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o3XsLHyb-1682215194184)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217225327090.png)]
运行后:我们输入username,password,点击显示事件。随后调用submit方法打印fromData的值
我们点击显示:查看控制台打印了值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p4qTXkiG-1682215194184)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217225347313.png)]
5 . 条件(判断)和循环:
v-if :
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U80pt1vw-1682215194184)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217231803931.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-24sYaD3a-1682215194185)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217231844490.png)]
保存后运行显示:因为show设置为true,所以输出区块内容:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2COguR9i-1682215194185)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217231855161.png)]
此时我们点击设置false按钮:将show设置为false:该div区块不显示到页面了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z0l7jYoq-1682215194185)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217231947566.png)]
v-for:
就是类似数组,循环显示出数组里的元素:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svqngYBd-1682215194185)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217232558701.png)]
元素:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n9Pu3Td1-1682215194186)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217232640605.png)]
运行后显示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RgKuQY4s-1682215194186)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221217232716019.png)]
第二章 组件概述:
1 . 组件初步认识:
定义组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Owf5CUKn-1682215194186)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218145448600.png)]
将组件加载到数据中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lOFPxkKW-1682215194186)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218145612627.png)]
加载到div:因为组件内写的‘
- This is a todo
- ’,所以直接在前端区块写li标签,在标签内显示需要的内容即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IRSeTanU-1682215194186)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218145912775.png)]
最后将所有内容挂载到指定div:
以Count来创建一个vue应用,然后将这个vue应用挂载到id为counter的标签中(#counter就是找id=counter):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NC9xDlhf-1682215194187)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218150011103.png)]
运行后,页面显示:显示了组件中的内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gfb92J9f-1682215194187)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218150020779.png)]
定义组件后加载到某个对象,该对象调用方法对组件操作后,再以这个对象创建vue应用,并将其挂载到指定区块的标签,显示出内容。
联合数组循环遍历使用:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4ngmDjs-1682215194187)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218155752175.png)]
显示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v6wgu3fa-1682215194187)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218155819151.png)]
2 . 通过父组件给子组件传数据:
父组件:使用Counter对象创建的vueapp并挂载到id=counter的标签的就是父组件:
从todos中拿到一个todoItem的值并传递给子组件的todo
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P6fARyvx-1682215194188)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218164047945.png)]
子组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7C6gioEa-1682215194188)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218163538166.png)]
子组件得到父组件传递的值后,输出显示到页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcHen988-1682215194188)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218164059242.png)]:
第三章 模板与语法
1 . 整体语法格式模板:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhgGpZEA-1682215194188)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218175031469.png)]
2 . 插值:
(1)文本:v-once
使用v-once插入的值,不会因为原值的改变而改变
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCZGb8KQ-1682215194189)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218175936270.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkqE351q-1682215194189)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218175946679.png)]
点击按钮后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IS7mdyWl-1682215194189)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218180006421.png)]
(2) . 原始的HTML:v-html
将html代码显示出来:
{{ }}双大括号会将数据解释为普通文本,而不是HTML代码。为了输出真正的html代码,可使用v-html:
如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQV5Wts9-1682215194189)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218182142146.png)]
运行后显示:纯文本而不是我们要的html标题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGVLYewX-1682215194190)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218182250650.png)]
使用v-html解决:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITwG1XJf-1682215194190)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218182340960.png)]
运行显示:为一个html标题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-prJfhrmX-1682215194190)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218182356671.png)]
(3)v-bind:可以绑定任何属性
v-bind:disabled :当目标值为true则按钮不能使用,false则可以使用:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GArAq7X8-1682215194190)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218182934351.png)]
运行后:按钮不能使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K0BovXC4-1682215194191)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218182951156.png)]
3 . 表达式和指令简写:
(1)js表达式:
我们在拿到值可以直接进行操作,可以带哦用其他的方法:如split(),length等
调用split方法按照空格分隔成数组,取第0个
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OANrp1V4-1682215194191)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218183247561.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bfRwffZ5-1682215194191)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218183322116.png)]
也可以加字符串:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u4HryKU2-1682215194192)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218183412359.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDTzJsbW-1682215194192)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218183423394.png)]
其他的一次类推。
(2)指令:
指令 (Directives) 是带有
v-
前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for
是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:<p v-if="seen">现在你看到我了</p>
这里,
v-if
指令将根据表达式seen
的值的真假来插入/移除<p>
元素。4 . 列表渲染:
对商品列表渲染:index为goods数组的下标,item为每个下标对应的元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iJ5sD0cW-1682215194192)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219002557483.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V0Veo80R-1682215194192)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219002640949.png)]
第四章 data属性和方法:
(1)组件实例:
app.mount(“#app”)返回值vm也是一个组件实例
所有的内容都在这个组件实例上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Srvrh8FL-1682215194193)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218190346008.png)]
注意:
在定义组件的过程当中,如果要使用data属性或者data方法,要使用this才能调用,否则会去全局作用域中去找。而这个this指的实例对象就是vm。获取data属性,调用data方法:
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IfF1MTcy-1682215194193)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218190416030.png)]
当有多个地方都要显示出版该书的信息,那么就要写很多次,显得臃肿,逻辑需要修改时会非常麻烦。
(1)响应式数据:
被vue接管,这些数据如果被修改,那么就会导致其他的如前端显示发生改变:如下便是一个响应数据:书的数量被更改为0时会导致前端判断书为0,不显示yes显示no。当一处发生改变,其他的地方都会因为他的改变响应做出改变。
data中的数据就是响应式数据,他们只要发生改变,那么对应的前端也会跟着改变
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jM6dWjl7-1682215194193)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218190502433.png)]
对响应式数据的修改使用计算属性来操作。
(2)计算属性:内部有缓存当遇见大量数据需要操作时也可·使用计算属性
对于任何包含响应式数据,我们都应该使用计算属性:这样我们对响应式数据进行修改时,不会造成其他部分也要大量的修改。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgoWHjZo-1682215194193)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218192545881.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0P1gLbQO-1682215194194)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218192601581.png)]
响应式的数据发生改变时,计算属性computed会自动调用内部的方法。计算属性类似一个监听器。计算属性不会影响到非响应式数据。
(3)计算属性缓存
计算属性有缓存,计算属性是基于响应式数据的反应依赖关系缓存的,计算属性只在相关响应式依赖发生改变时它们才会重新求值。也就是说如果响应式数据此时发生改变,计算属性会跟着发生改变,将计算的结果保存起来。如果之后响应式数据都没有发生改变,那么计算属性就会直接使用之前计算留下来的数据来执行。(空间换时间的操作)。
第五章 style和class绑定:样式绑定
1 .对象语法:
已知我们定义了一个叫active的样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kuLtCAmO-1682215194194)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218200722657.png)]
对样式的操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81hxJfMS-1682215194194)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218200747879.png)]
数据:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RquuVcgk-1682215194195)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218200818511.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O53iPGOZ-1682215194195)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218200838171.png)]
点击按钮,让isActive变为true,出发:class的变量isActive为true 显示出该样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TFLtEyAG-1682215194195)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218200940067.png)]
多个对象:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6QvIoi1-1682215194195)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218223649307.png)]
运行后,首先呈现active的样式,点击按钮后呈现danger样式。(danger的样式是字的颜色)
2 . 数组语法:
我们可以把一个数组传给
:class
,以应用一个 class 列表:数组中的元素对应样式[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AD2jAWtZ-1682215194196)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218224333751.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDkajbrD-1682215194196)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218224409864.png)]
如果要进行修改,可直接在data中对数组中的元素isd,isA进行操作即可。
3 . 在组件中使用:
定义一个组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rvZSbNHm-1682215194198)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218230226088.png)]
因为我们的组件定在了总组件外,所以需要我们手动加载到vue:
该方法是让我们定义一个前端标签,该标签对应我们的mycompoent组件中定义的内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qLYlEoja-1682215194198)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218230312970.png)]
前端标签:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ooCDZcTV-1682215194199)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218230415415.png)]
运行后显示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K0HziDWN-1682215194199)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218230501559.png)]
内联样式:
1 . 基本语法
直接在html的div中内联组件中的数据来操作样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mivEfQeS-1682215194199)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218231454950.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44c821E6-1682215194200)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218231539414.png)]
2 . 对象语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D8UrFQja-1682215194200)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218232307671.png)]
3 . 数组语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1b59JGpA-1682215194200)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221218232840386.png)]
第六章 事件绑定:
1 . 事件处理方法:
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在
v-on
指令中是不可行的。因此v-on
还可以接收一个需要调用的方法名称。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4suelVII-1682215194200)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219005016950.png)]
运行后:控制台打印出了事件触发的目标对象:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8XjZCtQ-1682215194200)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219005118097.png)]
2 . 内联处理器中的方法:
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HI0JQapD-1682215194201)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219005403868.png)]
运行后,我们点击会弹出相应的信息:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1kBmbdTY-1682215194201)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219005441222.png)]
3 . 多事件处理:
一个事件可以调用多个方法,事件处理程序中可以有多个方法,这些方法由逗号运算符分隔:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOuvkXJJ-1682215194201)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219123140499.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQ4mAlkB-1682215194201)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219123204132.png)]
第七章 表单输入绑定:
1 . 基础用法:
v-model双向绑定(前面已介绍)
复选框:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KlfvC1gC-1682215194201)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125400927.png)]
运行后:点击后变成false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jPxd5EQL-1682215194201)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125416640.png)]
多个复选框情况:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfj7sMWa-1682215194202)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125537675.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M7lWayyi-1682215194202)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125556528.png)]
单选框:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ov9VsMvb-1682215194202)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125720605.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbGstlU2-1682215194202)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125732409.png)]
选择框:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RB9Pp4DF-1682215194202)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125825801.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIy9W0XA-1682215194203)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219125840971.png)]
选择框进行多选的情况,绑定到一个数组:
es6相关:
1 . es6解构:
(1)解构对象的属性:
将username从user中解构出来:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7usSetYh-1682215194203)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219151256909.png)]
(2)解构方法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8wTdlvg-1682215194203)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219151832718.png)]
2 . es6模块化:
(1)导入和导出
b.js导出user对象,a.js导入b.js的一个模块取名为user:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSlGsm4S-1682215194203)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219152741928.png)]
注意:默认导出的模块可以随意命名
非默认导出:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fP6q7Dqr-1682215194203)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219153119165.png)]
3 . promise:
解决异步调用中,如回调地区问题,每隔多少时间打印出地区信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LYTua97z-1682215194204)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219153636419.png)]
输出结果,等一秒钟后,全部同时打印出来了,不是间隔一秒后打印第一行,再过一秒后打印第二行的效果。
我们想要的是每过一秒打印出对应的内容逐步打印地区信息。
在回调中继续调用函数:(存在地域问题:如果代码量很复杂,非常利于查看和修改)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opHwSjE6-1682215194204)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219153920803.png)]
我们需要将一个异步请求包装成一个promise对象:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-laMdFCJP-1682215194204)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219155645752.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iFaDnz8Q-1682215194204)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219155743872.png)]
Vue- cli
Vue CLI 命令行工具,提供:通过
@vue/cli
实现的交互式的项目脚手架。1 . axios初步认识:
发送get请求,得到值返回then调用,在控制台打印输出
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9jOUCTT-1682215194204)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219172905410.png)]
在前端成功显示出:因为xxx请求找不到所以报错,以后我们只需要改成我们需要的请求即可。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jK1wXjrF-1682215194205)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219172930737.png)]
vue-router:
router:访问不同页面通过路由
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZYwYbxVM-1682215194205)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219175301846.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LKGiCRce-1682215194205)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219175336926.png)]
运行后:我点击了gotoAbouot,显示About,同时url应该为了/about,如果点gotohome,显示Home,url也会改为/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vRwX20i4-1682215194205)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219175401250.png)]
路由跳转的方式:
定义的两个组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oxHSMx7I-1682215194206)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219190507837.png)]
main.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lO592CtL-1682215194206)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219190531005.png)]
App.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jhMpNFHx-1682215194206)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219190604654.png)]
yarn serve 运行终端:
当我们运行后main.js导入了vue的相关模块,导入了两个组件的模块,随后定义路由使用key-value的形式将组件对应到具体的url上,随后创建路由实例,最后创建vueapp使用路由挂载到html上:
运行后:我点击了gotoAbouot,显示this is About,同时url应该为了/about,如果点gotohome,显示this is Home,url也会改为/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9VxD9N9E-1682215194206)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219190642753.png)]
对路由的封装:
路由组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vV5OVh8A-1682215194207)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219204010872.png)]
定义的两个组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfir5dSq-1682215194207)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219190507837.png)]
根路由app.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gXdZhrEa-1682215194207)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219202901056.png)]
main.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CzTvG3b8-1682215194207)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219202914448.png)]
动态路由匹配:
(1)带参数的动态路由匹配:
很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个
User
组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数 :user.vue中拿到route中设置的参数id并显示
index.js:(:id相当于可接受参数)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJuna8Pf-1682215194207)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219204214254.png)]
main.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UJ9Cjplu-1682215194208)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219204134032.png)]
app.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-40mi684u-1682215194208)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219204152930.png)]
user.vue组件:通过总路由route.参数的方式拿到id的值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yc65aSuZ-1682215194208)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219205119872.png)]
运行后:我们点击12号用户,会显示出:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fgtIIZuH-1682215194208)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219204344097.png)]
路由的匹配语法:
传入的id必须是数字:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rw8hSIx5-1682215194208)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219204737293.png)]
可重复的参数:接受参数可以是很多个的情况:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WU23M5oO-1682215194209)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219204844735.png)]
如12/13/15这种,拿到的是一个数组来保存这些值
可选参数:表示可有可无
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkJOh7tS-1682215194209)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219205438833.png)]
嵌套路由:
本路由当中又有子路由的情况:
main.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lRX8g2mM-1682215194209)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219213548107.png)]
App.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oXnlIvAE-1682215194209)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219213615238.png)]
子路由对应的组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVhzGVje-1682215194209)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219213721928.png)]
父路由组件:user.vue组件:子路由的页面都会显示在在父路由的router-view标签中:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9xlVH5z6-1682215194210)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219213755261.png)]
index.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AvBpmX6k-1682215194210)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219213930548.png)]
yarn serve运行:点击12号用户显示my id is 12,点头像显示这是头像,点岗位显示这是岗位,以此类推、
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kPqzM5eG-1682215194210)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221219214002973.png)]
嵌套的命名路由:
在处理命名路由时,你通常会给子路由命名:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hOEIWAIK-1682215194210)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220094800995.png)]
连接组件进行渲染时使用 :to=" "
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KAys0t1b-1682215194210)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220094900197.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Z4mPK5H-1682215194211)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668481415557.png)]
传递参数:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZ4wsF6H-1682215194211)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668481520790.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4MQ1XEgm-1682215194211)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668481735845.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIhqRlf1-1682215194211)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668481750020.png)]
视图命名:
有时候想同时 (同级) 展示多个视图(router-view),而不是嵌套展示,例如创建一个布局,有
sidebar
(侧导航) 和main
(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view
没有设置名字,那么默认为default
。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXlkYqPi-1682215194211)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220095915241.png)]
App.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHqYbUAM-1682215194212)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220095936268.png)]
编程式导航:
注意:在 Vue 实例中,你可以通过 r o u t e r 访问路由实例。因此你可以调用 t h i s . router 访问路由实例。因此你可以调用 this. router访问路由实例。因此你可以调用this.router.push。
想要导航到不同的 URL,可以使用
router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。当你点击
<router-link>
时,内部会调用这个方法,所以点击<router-link :to="...">
相当于调用router.push(...)
:声明式 编程式 <router-link :to="..." replace>
router.push(...)
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串路径 router.push('/users/eduardo') // 带有路径的对象 router.push({ path: '/users/eduardo' }) // 命名的路由,并加上参数,让路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 带查询参数,结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 带 hash,结果是 /about#team router.push({ path: '/about', hash: '#team' })
注意:如果提供了
path
,params
会被忽略,上述例子中的query
并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的name
或手写完整的带有参数的path
:const username = 'eduardo' // 我们可以手动建立 url,但我们必须自己处理编码 router.push(`/user/${username}`) // -> /user/eduardo // 同样 router.push({ path: `/user/${username}` }) // -> /user/eduardo // 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益 router.push({ name: 'user', params: { username } }) // -> /user/eduardo // `params` 不能与 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user
index.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7bk2FlFB-1682215194212)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220104220476.png)]
app.vue:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O1SsvSxE-1682215194212)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220104200034.png)]
重定向和别名:
重定向也是通过
routes
配置来完成,下面例子是从/home
重定向到/
:const routes = [{ path: '/home', redirect: '/' }]
重定向的目标也可以是一个命名的路由:
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
甚至是一个方法,动态返回重定向目标:
const routes = [ { // /search/screens -> /search?q=screens path: '/search/:searchText', redirect: to => { // 方法接收目标路由作为参数 // return 重定向的字符串路径/路径对象 return { path: '/search', query: { q: to.params.searchText } } }, }, { path: '/search', // ... }, ]
如:我们的url/home时,页面会重新跳转到/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kyC44Ay-1682215194213)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220104640554.png)]
别名:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZG6F7qF-1682215194213)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220105021378.png)]
props传递给路由组件:props
类似父子传参一样拿到参数,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HaNskKFn-1682215194213)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220105514739.png)]
布尔模式#
当
props
设置为true
时,route.params
将被设置为组件的 props。命名视图#
对于有命名视图的路由,你必须为每个命名视图定义
props
配置:const routes = [ { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]
对象模式#
当
props
是一个对象时,它将原样设置为组件 props。当 props 是静态的时候很有用。const routes = [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ]
函数模式#
你可以创建一个返回 props 的函数。这允许你将参数转换为其他类型,将静态值与基于路由的值相结合等等。
const routes = [ { path: '/search', component: SearchUser, props: route => ({ query: route.query.q }) } ]
URL
/search?q=vue
将传递{query: 'vue'}
作为 props 传给SearchUser
组件。请尽可能保持
props
函数为无状态的,因为它只会在路由发生变化时起作用。如果你需要状态来定义 props,请使用包装组件,这样 vue 才可以对状态变化做出反应。进阶部分:
导航守卫:
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,例如全局前置首位:你没有登录,路由到登录页面,登录成功路由到主页面 (类似一个拦截器或者过滤器)。
全局前置首位:
from:路由从哪里来,to:要到哪里去
动态路由:
前面介绍的路由都属于静态路由。(路由定义都是放在一个数组中的)
动态路由:根据后端的请求来进行对路由的增删改操作。
添加路由#
动态路由主要通过两个函数实现。
router.addRoute()
和router.removeRoute()
。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用router.push()
或router.replace()
来手动导航,才能显示该新路由。我们来看一个例子:想象一下,只有一个路由的以下路由:
const router = createRouter({ history: createWebHistory(), routes: [{ path: '/:articleName', component: Article }], })
进入任何页面,
/about
,/store
,或者/3-tricks-to-improve-your-routing-code
最终都会呈现Article
组件。如果我们在/about
上添加一个新的路由:router.addRoute({ path: '/about', component: About })
页面仍然会显示
Article
组件,我们需要手动调用router.replace()
来改变当前的位置,并覆盖我们原来的位置(而不是添加一个新的路由,最后在我们的历史中两次出现在同一个位置):router.addRoute({ path: '/about', component: About }) // 我们也可以使用 this.$route 或 route = useRoute() (在 setup 中) router.replace(router.currentRoute.value.fullPath)
记住,如果你需要等待新的路由显示,可以使用
await router.replace()
。在导航守卫中添加路由#
如果你决定在导航守卫内部添加或删除路由,你不应该调用
router.replace()
,而是通过返回新的位置来触发重定向:router.beforeEach(to => { if (!hasNecessaryRoute(to)) { router.addRoute(generateRoute(to)) // 触发重定向 return to.fullPath } })
上面的例子有两个假设:第一,新添加的路由记录将与
to
位置相匹配,实际上导致与我们试图访问的位置不同。第二,hasNecessaryRoute()
在添加新的路由后返回false
,以避免无限重定向。因为是在重定向中,所以我们是在替换将要跳转的导航,实际上行为就像之前的例子一样。而在实际场景中,添加路由的行为更有可能发生在导航守卫之外,例如,当一个视图组件挂载时,它会注册新的路由。
删除路由#
有几个不同的方法来删除现有的路由:
-
通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:
router.addRoute({ path: '/about', name: 'about', component: About }) // 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的 router.addRoute({ path: '/other', name: 'about', component: Other })
-
通过调用
router.addRoute()
返回的回调:
const removeRoute = router.addRoute(routeRecord) removeRoute() // 删除路由如果存在的话
当路由没有名称时,这很有用。
-
通过使用
router.removeRoute()
按名称删除路由:
router.addRoute({ path: '/about', name: 'about', component: About }) // 删除路由 router.removeRoute('about')
需要注意的是,如果你想使用这个功能,但又想避免名字的冲突,可以在路由中使用
Symbol
作为名字。
当路由被删除时,所有的别名和子路由也会被同时删除
组件内的守卫:
你可以为路由组件添加以下配置:
beforeRouteEnter
路由进入组件时调用beforeRouteUpdate路由被改变时调用
beforeRouteLeave路由离开时调用
const UserDetails = { template: `...`, beforeRouteEnter(to, from) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ! // 因为当守卫执行时,组件实例还没被创建! }, beforeRouteUpdate(to, from) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候, // 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this` }, beforeRouteLeave(to, from) { // 在导航离开渲染该组件的对应路由时调用 // 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this` }, }
路由元信息:
我们在about路由上配置了meta辕信息:
‘[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4deDQ8CB-1682215194214)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668494831790.png)]
在路由前置首位:当我们访问about的页面时,该守卫判断为true,设置为false,我们不能访问about页面了:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VmpgDTKI-1682215194214)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668494862755.png)]
运行后点击gotoabout:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-veM7xCso-1682215194214)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668494993635.png)]
动态路由
添加路由:
动态路由主要通过两个函数实现。
router.addRoute()
和router.removeRoute()
。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用router.push()
或router.replace()
来手动导航,才能显示该新路由。我们来看一个例子小知识:@ 代表src目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5jjLK24-1682215194215)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668496830037.png)]
Vuex:
让我们从一个简单的 Vue 计数应用开始:
const Counter = { // 状态 data () { return { count: 0 } }, // 视图 template: ` <div>{{ count }}</div> `, // 操作 methods: { increment () { this.count++ } } } createApp(Counter).mount('#app')
这个状态自管理应用包含以下几个部分:
- 状态,驱动应用的数据源;
- 视图,以声明方式将状态映射到视图;
- 操作,响应在视图上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意:
创建和修改全局共享数据:
创建了一个store的全局实列:定义了count和name的全局变量,是多个组件共享的数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-odxsB6Ze-1682215194215)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668504821471.png)]
我们可以在任何组件拿到该变量的:例如在about:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSW7uOj1-1682215194215)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668503773851.png)]
运行后显示:点击this is about:(没有反应,因为我们前面写了前置路由守卫导致不能访问该页面):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKfOutaO-1682215194216)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668503894271.png)]
我们点击go to home:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-roPYjDAX-1682215194216)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668503804915.png)]
改变全局变量的值:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pjLeYEn0-1682215194216)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668504842532.png)]
点击按钮会对name和count进行修改:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YgP59EZY-1682215194216)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668504877196.png)]
但这样是不安全的,我们通常调用mutations中保存的对数据的操作逻辑来进行对全局数据的修改:我们要改变该数据九江操作逻辑写在mutations中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6unacfU-1682215194217)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668505041877.png)]
其他组件带哦用该逻辑即可完成对数据的操作:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KxdaGjun-1682215194217)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668505121129.png)]
运行后也能达到功能:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6fNa8NH3-1682215194217)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668505138220.png)]
小知识:async(异步)和await(等待):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5SUwtb0i-1682215194218)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220170531045.png)]
await后面会接一个会return new promise的函数并执行它,await只能放在async函数里。
fun1是await对应的函数,async对应的是fun2函数
运行后:2s后对num加10,会后将结果发给resolve,在async修饰的函数可以调用await修饰的函数,调用后拿到的返回值是resolve拿到的num的结果,最后输出30
state详解:存数据的
简化调用时的复杂度:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q8FYaj5k-1682215194218)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668515703810.png)]
运行后也能达到同样的功能。
辅助函数mapState:
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用
mapState
辅助函数帮助我们生成计算属性,让你少按几次键:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bnbVRjBo-1682215194218)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668524828202.png)]
还有更简便的:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avvKjCTZ-1682215194218)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668525069122.png)]
更简单的方式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qKd73bON-1682215194219)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668526777187.png)]
Getter:
我们添加一个todos数组:为true的有一个
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgbgs5C7-1682215194219)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668568812191.png)]
表示为true的todo的个数:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9R7V4lH7-1682215194219)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668568869775.png)]
运行后显示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsmVF3Kg-1682215194220)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668568889451.png)]
像我们对todos的操作,其他的组件要操作也要再写一遍对todos的操作代码,不能复用。这时可以使用getters来解决:getters内部设置了对todos的操作,其他的组件要对todos操作可以直接调用getters的内容即可完成操作
getters和计算属性很相似:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vreJyZVm-1682215194220)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668570019921.png)]
about.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q8tyIBtF-1682215194220)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668569658293.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TSGEP4mU-1682215194221)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668570033903.png)]
但是呢我们在渲染层直接引用: $store.getters.doneTodosCount 是不合适的:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nf5Rj7KC-1682215194221)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668570278912.png)]
加以改进:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzFgniMw-1682215194221)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668570403219.png)]
也能达到同样效果,更优雅。但是如果将来有很多个类似的擦做,那么就要写很多类似的doneCount方法,还是很麻烦使用mapGetters解决
mapGetters:
自动给我们生成不用我们写:doneCount方法都可以不写了
已知:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGbQUkd4-1682215194222)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668571014725.png)]
视图渲染层:不用我们写了,getters给我们合并自动生成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ThFTdB2S-1682215194222)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668571047424.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QH7WgAoJ-1682215194222)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668571083712.png)]
moutations详解:
修改数据要求在moutations中修改,不要单独直接进行修改。
内部都是方法,这些方法负责对数据的操作。
在传入参数为数字的情况下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4D8VU8S-1682215194223)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668571644586.png)]
视图层:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KYuwOn2T-1682215194223)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668571674461.png)]
运行后:点击plus:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A51x2UgH-1682215194223)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668571695984.png)]
传入参数为对象的情况,同理,使用对象.属性的方即可
对象风格的提交方式
提交 mutation 的另一种方式是直接使用包含
type
属性的对象:store.commit({ type: 'increment', amount: 10 })
Action:
对mutation的内容进行更多操作并提交
mutation里边的函数必须是同步的,action类似于mutation,但是action是可以进行异步操作:
Action 类似于 mutation,不同在于:
-
Action 提交的是 mutation,而不是直接变更状态。
-
Action 可以包含任意异步操作。
让我们来注册一个简单的 action:
const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用
context.commit
提交一个 mutation,或者通过context.state
和context.getters
来获取 state 和 getters。当我们在之后介绍到 Modules 时,你就知道 context 对象为什么不是 store 实例本身了
实践中,我们会经常用到 ES2015 的参数解构来简化代码(特别是我们需要调用
commit
很多次的时候):actions: { increment ({ commit }) { commit('increment') } }
Action 通过
store.dispatch
方法触发:store.dispatch('increment')
示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OrEXThCk-1682215194224)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668577595448.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rk8GPxSN-1682215194224)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668577688982.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o2NwQTVj-1682215194224)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668577712041.png)]
mapActions:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4CAHZq3U-1682215194225)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668578720048.png)]
index.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0aEj7e8N-1682215194225)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668578752421.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rc0cmlr1-1682215194225)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668578781352.png)]
Module:
当项目越来越复杂,state的内容越来越多,就越不好管理,所以使用模块化来解决:
state的模块:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxqNsR8S-1682215194225)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668579878771.png)]
actions和mutations的模块:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-99uthaLU-1682215194226)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668579916531.png)]
index.js主模块:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suyXfG4w-1682215194226)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668579983243.png)]
element-plus入门:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UcsLjjUP-1682215194226)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668582000142.png)]
app.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VC5bMR7e-1682215194226)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668582064877.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQiISCIf-1682215194227)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668582088001.png)]
setup:组合式api
解决共享代码的问题
什么是组合式 API?#
组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:
- 响应式 API:例如
ref()
和reactive()
,使我们可以直接创建响应式状态、计算属性和侦听器。 - 生命周期钩子:例如
onMounted()
和onUnmounted()
,使我们可以在组件各个生命周期阶段添加逻辑。 - 依赖注入:例如
provide()
和inject()
,使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。
组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本,可以使用官方维护的插件
@vue/composition-api
。在 Vue 3 中,组合式 API 基本上都会配合 `` 语法在单文件组件中使用。下面是一个使用组合式 API 的组件示例:vue
<script setup> import { ref, onMounted } from 'vue' // 响应式状态 const count = ref(0) // 更改状态、触发更新的函数 function increment() { count.value++ } // 生命周期钩子 onMounted(() => { console.log(`计数器初始值为 ${count.value}。`) }) </script> <template> <button @click="increment">点击了:{{ count }} 次</button> </template>
虽然这套 API 的风格是基于函数的组合,但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统】为基础的,而函数式编程通常强调数据不可变。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YG8jqfnr-1682215194227)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220223612263.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UQxbJXQU-1682215194227)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220223626278.png)]
setup中定义的数据是非响应式的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSKmlPe2-1682215194227)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220224151311.png)]
运行后:我们输入框输入绑定的count但是setup中定义的count并没有改变:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nyyyVh29-1682215194227)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220224217959.png)]
如何将setup中的内容变成响应式的:
引入ref,将其变成响应式的:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-msHC3b0k-1682215194228)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221220224509575.png)]
将setup中的count变成响应式了:
datepicker组件的使用:
样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-axUKFoot-1682215194228)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654157237.png)]
js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6yNae2Ma-1682215194228)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654130987.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dWy37qLr-1682215194228)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654174786.png)]
运行后显示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fMorXzzN-1682215194228)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654188888.png)]
我们把组件设置在setup中,并将其设置为响应式数据:
样式不变:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-43tdG5xp-1682215194229)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654610657.png)]
js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRTgTDFG-1682215194229)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654663005.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cVSfPwxV-1682215194229)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654683069.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmkFAmyB-1682215194229)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668654694117.png)]
使用组件暴露数据:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b215olQC-1682215194230)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668655320121.png)]
运行后点击goto home:点击按钮:输出了click
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uPqCNMgT-1682215194230)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668655355069.png)]
注意:props表示的数据也是非响应式的数据
组合式api抽离:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1aofIZzo-1682215194230)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668656795052.png)]
在src下新建composable文件夹,在建立datepicker.js:写相关组合式api内容:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X1qAwUlo-1682215194230)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668656891085.png)]
运行后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUszaTgQ-1682215194230)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668656905189.png)]
写个登录页面:
main.js:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R4YmB1yJ-1682215194231)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221221133652111.png)]
app.vue:我们把app.vue视作一个总的组件,所有的路由组件都会按照需求显示到router-vie中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XyxITv91-1682215194231)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221221133709712.png)]
main组件:登录成功后跳转的路由组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Be7lb6a4-1682215194231)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221221133744967.png)]
路由组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hcWiDxcL-1682215194231)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221221133813108.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7YUmEiyG-1682215194231)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221221133828176.png)]
运行后:初始界面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qLD31q6h-1682215194232)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221221133845016.png)]
输入root,由于没有设置密码判断所以账户判断后就弹出登录成功窗口:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-37BLkR95-1682215194232)(C:\Users\陈刚\AppData\Roaming\Typora\typora-user-images\image-20221221133903255.png)]
建立一个全局样式,可能会对全局做一些设置:我们在登录成功后的页面进行一些样式设置:让页面html,body部分变成全屏的:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K3xkK8ne-1682215194232)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668675796953.png)]
随后引入vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cjwRnAX3-1682215194233)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668675824366.png)]
运行登录成功后我们查看样式:成功设置并生效了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HEQuZgFF-1682215194233)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668676524560.png)]
我们设置了一个common.js的全局样式,也就意味着我们如果要进行某个样式修改,都可以通过这个全局样式来完成:
我们查看发现还有其他的样式没有全屏:如app的样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Go5oBZ3-1682215194233)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668676584852.png)]
我们在全局样式中对app样式进行修改:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3QzXTzp-1682215194233)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668676615660.png)]
运行后发现app部分也成功生效了还有其他的没有设置为全屏:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HOE7cJi9-1682215194234)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668677021581.png)]
继续设置el-container:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FuJFpS7H-1682215194234)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668676987511.png)]
成功设置:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9XsTiay4-1682215194234)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668676976864.png)]
继续添加登录成功页面的样式:在el-aside标签中添加”:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Il6na9K1-1682215194236)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668685873773.png)]
设置路由跳转:点击item one 触发
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oo7pIvbi-1682215194236)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668688133019.png)]
路由组件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vDTn82S9-1682215194237)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668688177270.png)]
运行后,我们登录成功出现页面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7NpT1h0-1682215194237)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668688238596.png)]
点击item one:页面跳转
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l5TjjqWR-1682215194237)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668688266476.png)]
但是这样跳转是跳到了外层的app.vue的路由,跳出了原来的登录成功页面,我们想让跳转出的页面显示在登录成功的页面内:使用路由嵌套解决:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7563IHeN-1682215194238)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668688993653.png)]
index.vue:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9nW98WZQ-1682215194238)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668689791334.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iw1qbpBM-1682215194238)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668689814253.png)]
运行登陆成功后点击item one:成功在该页面显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qjFWyYId-1682215194238)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668689861414.png)]
item two 的about路由没有嵌套,所以点击仍会跳转到外层about的页面上。
将about也设置进去:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nBx8zRRB-1682215194238)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668690107466.png)]
运行后:
登录成功点击item‘ two:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LF71deay-1682215194239)(C:\Users\CG\AppData\Roaming\Typora\typora-user-images\1668690142507.png)]
s
194232)]
建立一个全局样式,可能会对全局做一些设置:我们在登录成功后的页面进行一些样式设置:让页面html,body部分变成全屏的:
[外链图片转存中…(img-K3xkK8ne-1682215194232)]
随后引入vue:
[外链图片转存中…(img-cjwRnAX3-1682215194233)]
运行登录成功后我们查看样式:成功设置并生效了
[外链图片转存中…(img-HEQuZgFF-1682215194233)]
我们设置了一个common.js的全局样式,也就意味着我们如果要进行某个样式修改,都可以通过这个全局样式来完成:
我们查看发现还有其他的样式没有全屏:如app的样式:
[外链图片转存中…(img-3Go5oBZ3-1682215194233)]
我们在全局样式中对app样式进行修改:
[外链图片转存中…(img-A3QzXTzp-1682215194233)]
运行后发现app部分也成功生效了还有其他的没有设置为全屏:
[外链图片转存中…(img-HOE7cJi9-1682215194234)]
继续设置el-container:
[外链图片转存中…(img-FuJFpS7H-1682215194234)]
成功设置:
[外链图片转存中…(img-9XsTiay4-1682215194234)]
继续添加登录成功页面的样式:在el-aside标签中添加”:
[外链图片转存中…(img-Il6na9K1-1682215194236)]
设置路由跳转:点击item one 触发
[外链图片转存中…(img-Oo7pIvbi-1682215194236)]
路由组件:
[外链图片转存中…(img-vDTn82S9-1682215194237)]
运行后,我们登录成功出现页面:
[外链图片转存中…(img-C7NpT1h0-1682215194237)]
点击item one:页面跳转
[外链图片转存中…(img-l5TjjqWR-1682215194237)]
但是这样跳转是跳到了外层的app.vue的路由,跳出了原来的登录成功页面,我们想让跳转出的页面显示在登录成功的页面内:使用路由嵌套解决:
[外链图片转存中…(img-7563IHeN-1682215194238)]
index.vue:
[外链图片转存中…(img-9nW98WZQ-1682215194238)]
[外链图片转存中…(img-Iw1qbpBM-1682215194238)]
运行登陆成功后点击item one:成功在该页面显示
[外链图片转存中…(img-qjFWyYId-1682215194238)]
item two 的about路由没有嵌套,所以点击仍会跳转到外层about的页面上。
将about也设置进去:
[外链图片转存中…(img-nBx8zRRB-1682215194238)]
运行后:
登录成功点击item‘ two:
[外链图片转存中…(img-LF71deay-1682215194239)]
s
-