vue3.0入门

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' })
    

    注意:如果提供了 pathparams 会被忽略,上述例子中的 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')
    

    这个状态自管理应用包含以下几个部分:

    • 状态,驱动应用的数据源;
    • 视图,以声明方式将状态映射到视图;
    • 操作,响应在视图上的用户输入导致的状态变化。

    以下是一个表示“单向数据流”理念的简单示意:

    img

    创建和修改全局共享数据:

    创建了一个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.statecontext.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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值