Vue2向Vue3过度核心技术综合案例

news2024/11/14 22:02:09

目录

    • 1 面经基础版-案例效果分析
      • 1.面经效果演示
      • 2.功能分析
      • 3.实现思路分析：配置路由+功能实现
    • 2 面经基础版-一级路由配置
    • 3 面经基础版-二级路由配置
      • 1.使用场景
      • 2.语法
      • 3.代码实现
    • 4 面经基础版-二级导航高亮
      • 1.实现思路
      • 2.代码实现
    • 5 面经基础版-首页请求渲染
      • 1.步骤分析
      • 2.代码实现
    • 6 面经基础版-查询参数传参
      • 1.说明
      • 2.查询参数传参实现
    • 7 面经基础版-动态路由传参
      • 1.实现步骤
      • 2.代码实现
      • 3.额外优化功能点-点击回退跳转到上一页
    • 8 面经基础版-详情页渲染
      • 1.实现步骤分析
      • 2.代码实现
    • 9 面经基础版-缓存组件
      • 1.问题
      • 2.原因
      • 3.解决方案
      • 4.什么是keep-alive
      • 5.keep-alive的三个属性
      • 6.额外的两个生命周期钩子
      • 7.总结
    • 10 VueCli 自定义创建项目
    • 11 ESlint代码规范及手动修复
        • 1.JavaScript Standard Style 规范说明
        • 2.代码规范错误
        • 3.手动修正
    • 12 通过eslint插件来实现自动修正

1 面经基础版-案例效果分析

在这里插入图片描述

1.面经效果演示

2.功能分析

  • 通过演示效果发现，主要的功能页面有两个，一个是列表页，一个是详情页，并且在列表页点击时可以跳转到详情页
  • 底部导航可以来回切换，并且切换时，只有上面的主题内容在动态渲染

在这里插入图片描述

3.实现思路分析：配置路由+功能实现

1.配置路由

  • 首页和面经详情页，两个一级路由
  • 首页内嵌套4个可切换的页面（嵌套二级路由）

2.实现功能

  • 首页请求渲染
  • 跳转传参 到 详情页，详情页动态渲染
  • 组件缓存，性能优化

在这里插入图片描述

2 面经基础版-一级路由配置

1.把文档中准备的素材拷贝到项目中

2.针对router/index.js文件 进行一级路由配置

...
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'
...


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

3 面经基础版-二级路由配置

二级路由也叫嵌套路由，当然也可以嵌套三级、四级…

1.使用场景

当在页面中点击链接跳转，只是部分内容切换时，我们可以使用嵌套路由

2.语法

  • 在一级路由下，配置children属性即可
  • 配置二级路由的出口

1.在一级路由下，配置children属性

注意:一级的路由path 需要加 / 二级路由的path不需要加 /

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children:[
        //children中的配置项 跟一级路由中的配置项一模一样 
        {path:'xxxx',component:xxxx.vue},
        {path:'xxxx',component:xxxx.vue},
      ]
    }
  ]
})

技巧：二级路由应该配置到哪个一级路由下呢？

这些二级路由对应的组件渲染到哪个一级路由下，children就配置到哪个路由下边

2.配置二级路由的出口

注意： 配置了嵌套路由，一定配置对应的路由出口，否则不会渲染出对应的组件

Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">
      <router-view></router-view>
    </div>
  ....
  </div>
</template>

3.代码实现

router/index.js

...
import Article from '@/views/Article.vue'
import Collect from '@/views/Collect.vue'
import Like from '@/views/Like.vue'
import User from '@/views/User.vue'
...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      children:[
        {
          path:'/article',
          component:Article
        },
        {
          path:'/collect',
          component:Collect
        },
        {
          path:'/like',
          component:Like
        },
        {
          path:'/user',
          component:User
        }
      ]
    },
    ....
  ]
})

Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 内容部分 -->
      <router-view></router-view>
    </div>
    <nav class="tabbar">
      <a href="#/article">面经</a>
      <a href="#/collect">收藏</a>
      <a href="#/like">喜欢</a>
      <a href="#/user">我的</a>
    </nav>
  </div>
</template>

4 面经基础版-二级导航高亮

1.实现思路

  • 将a标签替换成 组件，配置to属性，不用加 #
  • 结合高亮类名实现高亮效果 (推荐模糊匹配：router-link-active)

2.代码实现

Layout.vue

....
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>

<style>
   a.router-link-active {
      color: orange;
    }
</style>

5 面经基础版-首页请求渲染

1.步骤分析

1.安装axios

2.看接口文档，确认请求方式，请求地址，请求参数

3.created中发送请求，获取数据，存储到data中

4.页面动态渲染

2.代码实现

1.安装axios

yarn add axios npm i axios

2.接口文档

请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get

3.created中发送请求，获取数据，存储到data中

 data() {
    return {
      articelList: [],
    }
  },
  async created() {
    const {  data: { result: { rows } }} = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
    this.articelList = rows
  },

4.页面动态渲染

<template>
  <div class="article-page">
    <div class="article-item" v-for="item in articelList" :key="item.id">
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">
        {{item.content}}
      </div>
      <div class="foot">点赞 {{item.likeCount}} | 浏览 {{item.views}}</div>
    </div>
  </div>
</template>

6 面经基础版-查询参数传参

1.说明

跳转详情页需要把当前点击的文章id传给详情页，获取数据

  • 查询参数传参 this.$router.push(‘/detail?参数1=参数值&参数2=参数值’)
  • 动态路由传参 先改造路由 在传参 this.$router.push(‘/detail/参数值’)

2.查询参数传参实现

Article.vue

<template>
  <div class="article-page">
    <div class="article-item" 
      v-for="item in articelList" :key="item.id" 
      @click="$router.push(`/detail?id=${item.id}`)">
     ...
    </div>
  </div>
</template>

ArticleDetail.vue

  created(){
    console.log(this.$route.query.id)
  }

7 面经基础版-动态路由传参

1.实现步骤

  • 改造路由
  • 动态传参
  • 在详情页获取参数

2.代码实现

改造路由

router/index.js

...
  {
      path: '/detail/:id',
      component: ArticleDetail
  }

Article.vue

<div class="article-item" 
     v-for="item in articelList" :key="item.id" 
     @click="$router.push(`/detail/${item.id}`)">
       ....
 </div>

ArticleDetail.vue

  created(){
    console.log(this.$route.params.id)
  }

3.额外优化功能点-点击回退跳转到上一页

ArticleDetail.vue

<template>
  <div class="article-detail-page">
    <nav class="nav"><span class="back" @click="$router.back()">&lt;</span> 面经详情</nav>
     ....
  </div>
</template>

8 面经基础版-详情页渲染

1.实现步骤分析

  • 导入axios
  • 查看接口文档
  • 在created中发送请求
  • 页面动态渲染

2.代码实现

接口文档

 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
 请求方式: get

在created中发送请求

 data() {
    return {
      articleDetail:{}
    }
  },
  async created() {
    const id = this.$route.params.id
    const {data:{result}} = await axios.get(
      `https://mock.boxuegu.com/mock/3083/articles/${id}`
    )
    this.articleDetail = result
  },

页面动态渲染

<template>
  <div class="article-detail-page">
    <nav class="nav">
      <span class="back" @click="$router.back()">&lt;</span> 面经详情
    </nav>
    <header class="header">
      <h1>{{articleDetail.stem}}</h1>
      <p>{{articleDetail.createAt}} | {{articleDetail.views}} 浏览量 | {{articleDetail.likeCount}} 点赞数</p>
      <p>
        <img
          :src="articleDetail.creatorAvatar"
          alt=""
        />
        <span>{{articleDetail.creatorName}}</span>
      </p>
    </header>
    <main class="body">
      {{articleDetail.content}}
    </main>
  </div>
</template>

9 面经基础版-缓存组件

1.问题

从面经列表 点到 详情页，又点返回，数据重新加载了 → 希望回到原来的位置

在这里插入图片描述

2.原因

当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy和destroyed生命周期钩子），重新返回后组件又被重新创建了（会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子），所以数据被加载了

3.解决方案

利用keep-alive把原来的组件给缓存下来

4.什么是keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。

优点：

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，

减少加载时间及性能消耗，提高用户体验性。

App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

问题：

缓存了所有被切换的组件

5.keep-alive的三个属性

① include ： 组件名数组，只有匹配的组件会被缓存

② exclude ： 组件名数组，任何匹配的组件都不会被缓存

③ max ： 最多可以缓存多少组件实例

App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

6.额外的两个生命周期钩子

keep-alive的使用会触发两个生命周期函数

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和deactived钩子，帮我们实现业务需求。

7.总结

1.keep-alive是什么

2.keep-alive的优点

3.keep-alive的三个属性 (了解)

4.keep-alive的使用会触发两个生命周期函数(了解)

10 VueCli 自定义创建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create hm-exp-mobile
  • 选项
Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义
  • 手动选择功能

在这里插入图片描述

  • 选择vue的版本
  3.x
> 2.x
  • 是否使用history模式

在这里插入图片描述

  • 选择css预处理

在这里插入图片描述

  • 选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）
  • 比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

在这里插入图片描述

  • 选择校验的时机 （直接回车）

在这里插入图片描述

  • 选择配置文件的生成方式 （直接回车）

在这里插入图片描述

  • 是否保存预设，下次直接使用？ => 不保存，输入 N

在这里插入图片描述

  • 等待安装，项目初始化完成

在这里插入图片描述

  • 启动项目
npm run serve

11 ESlint代码规范及手动修复

代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？…

没有规矩不成方圆

ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则。

1.JavaScript Standard Style 规范说明

建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候, 遇到错误就查询解决。

下面是这份规则中的一小部分：

  • 字符串使用单引号 – 需要转义的地方除外
  • 无分号 – 这没什么不好。不骗你！
  • 关键字后加空格 if (condition) { ... }
  • 函数名后加空格 function name (arg) { ... }
  • 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
  • …

2.代码规范错误

如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你。

下面我们在main.js中随意做一些改动：添加一些空行，空格。

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')

按下保存代码之后：

你将会看在控制台中输出如下错误：

在这里插入图片描述

eslint 是来帮助你的。心态要好，有错，就改。

3.手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,…）去 ESLint 规则列表中查找其具体含义。

打开 ESLint 规则表，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。

在这里插入图片描述

12 通过eslint插件来实现自动修正

  1. eslint会自动高亮错误显示
  2. 通过配置，eslint会自动帮助我们修复错误
  • 如何安装

在这里插入图片描述

  • 如何配置
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
  • 注意：eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
  • 注意：使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify

settings.json 参考

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/930532.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

新开通的抖店体验分太低，达人不愿意合作怎么办？解决办法如下

新开通的抖店体验分太低，达人不愿意合作怎么办？解决办法如下

我是王路飞。 找达人带货的玩法是最适合新手抖店商家的&#xff0c;同时也是最适合长线去玩的方法。 但是新手前期找达人的时候&#xff0c;会有一个难点&#xff0c;就是自己的抖店因为是新开通的&#xff0c;所以要么没体验分&#xff0c;要么就是体验分太低了&#xff0c;…
阅读更多...
崔东树：汽车行业正在迎来令人兴奋的时代，智能座舱推动私车普及

崔东树：汽车行业正在迎来令人兴奋的时代，智能座舱推动私车普及

随着新能源汽车和智能座舱的不断发展&#xff0c;汽车行业正经历着一场革命性的变革。当前&#xff0c;不仅汽车电动化的进程在加速推进&#xff0c;智能座舱的升级与完善也成为了行业的热点话题。崔东树指出&#xff0c;随着汽车电动化和智能化的发展&#xff0c;智能座舱的快…
阅读更多...
学习高等数学需要的初等数学知识

学习高等数学需要的初等数学知识

文章目录 名词解释常用希腊字符读音幂、根式和对数常用的三角函数值三角函数变换一元二次方程求解充分条件和必要条件切线方程、斜率和法线隐函数极坐标排列组合 名词解释 教材中存在着许多熟悉且陌生的词汇&#xff0c;作者在此进行了整理&#xff1a; 概念&#xff1a;概念…
阅读更多...
开始MySQL之路—— DDL语法、DML语法、DQL语法基本操作详解

开始MySQL之路—— DDL语法、DML语法、DQL语法基本操作详解

DDL语法 DDL&#xff08;Data Definition Language&#xff09; 数据定义语言&#xff0c;该语言部分包括以下内容。 对数据库的常用操作 对表结构的常用操作 修改表结构 对数据库的常用操作 1: 查看当前所有的数据库 show databases; 2&#xff1a;创建数据库 create dat…
阅读更多...
Linux下的Shell基础——流程控制（三）

Linux下的Shell基础——流程控制（三）

前言&#xff1a; 每门编程都有它独特的语法&#xff0c;比如C语言&#xff0c;Java等编程语言&#xff0c;有相同的地方也有自己独特的地方&#xff0c;但都离不开变量、运算符&#xff0c;条件判断、循环和函数这几个地方的学习&#xff0c;下面就让我们学习一下shell编程里…
阅读更多...
CRM软件的功能与报价如何制定？

CRM软件的功能与报价如何制定？

CRM软件很贵吗&#xff1f;CRM价格与系统功能、部署方式、用户数量、附加服务等有关。当然&#xff0c;不同的CRM厂商&#xff0c;也会有不同的定价模式。下面我们就来说说决定CRM系统报价的几个因素。 系统功能&#xff1a; CRM软件的功能越全面、越强大&#xff0c;其定价也…
阅读更多...
携手共进：OpenAI与ScaleAI开展合作，为企业增强GPT模型微调功能

携手共进：OpenAI与ScaleAI开展合作，为企业增强GPT模型微调功能

8 月 26 日消息&#xff0c;OpenAI 近日发布新闻&#xff0c;除了与Scale AI 展开深度合作外&#xff0c;OpenAI 还宣布他们计划扩展GPT系列的大语言模型。通过与Scale AI 的合作&#xff0c;OpenAI 能够在企业环境中定制GPT-3.5 Turbo和即将发布的GPT-4&#xff0c;以满足不同…
阅读更多...
Typora上使用Mermaid语法展示流程图、时序图、甘特图

Typora上使用Mermaid语法展示流程图、时序图、甘特图

你已经安装Typora并打开了一个新文档后，可以按照以下详细步骤在Typora上使用Mermaid语法展示流程图、时序图、甘特图 流程图 使用graph LR声明开始，并使用箭头和连接符号定义节点之间的关系。例如，A --> B表示从节点A指向节点B的箭头连接。graph TB A[界面布局图] -->…
阅读更多...
npm 卸载 vuecli后还是存在

npm 卸载 vuecli后还是存在

运行了npm uninstall vue-cli -g&#xff0c;之后是up to date in&#xff0c;然后vue -V&#xff0c;版本号一直都在&#xff0c;说明没有卸载掉 1、执行全局卸载命令 npm uninstall vue-cli -g 2、删除vue原始文件 查看文件位置&#xff0c;找到文件删掉 where vue 3、再…
阅读更多...
魏副业而战：闲鱼卖货做什么类目好？

魏副业而战：闲鱼卖货做什么类目好？

我是魏哥&#xff0c;与其躺平&#xff0c;不如魏副业而战&#xff01; 做闲鱼&#xff0c;有人做高客单价的&#xff0c;也有人做低客单价的。 之前魏哥有做宠物产品&#xff0c;利润低&#xff0c;每单赚几元&#xff0c;做的很累&#xff0c;但做过一段时间后发现有很多复…
阅读更多...
左耳朵耗子:TCP 的那些事儿（上）

左耳朵耗子:TCP 的那些事儿（上）

原文地址&#xff1a;https://coolshell.cn/articles/11564.html TCP是一个巨复杂的协议&#xff0c;因为他要解决很多问题&#xff0c;而这些问题又带出了很多子问题和阴暗面。所以学习TCP本身是个比较痛苦的过程&#xff0c;但对于学习的过程却能让人有很多收获。关于TCP这个…
阅读更多...
nrm管理源仓库及发布私人npm包

nrm管理源仓库及发布私人npm包

使用nrm管理源及切换源仓库 1.安装nrm源管理器 npm install nrm -g2.查看目前现有的源仓库 通过 nrm ls 查看现有的源 nrm ls 输出&#xff1a;这是目前现有的源 3.切换不同的源 可以通过 nrm use xxx&#xff08;源仓库名&#xff09;来切换不同的源地址 nrm use taobao…
阅读更多...
激活函数总结（二十）：激活函数补充(SQNL、PLU)

激活函数总结（二十）：激活函数补充(SQNL、PLU)

激活函数总结&#xff08;二十&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Square nonlinearity (SQNL)激活函数2.2 Piecewise Linear Unit (PLU)激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PR…
阅读更多...
【Android】相对布局（RelativeLayout）最全解析

【Android】相对布局（RelativeLayout）最全解析

【Android】相对布局&#xff08;RelativeLayout&#xff09;最全解析 一、相对布局&#xff08;RelativeLayout&#xff09;概述二、根据父容器定位三、根据兄弟控件定位 一、相对布局&#xff08;RelativeLayout&#xff09;概述 相对布局&#xff08;RelativeLayout&#x…
阅读更多...
Xtrfy M42W鼠标说明书

Xtrfy M42W鼠标说明书

下载:https://wwtf.lanzoul.com/ikXQh16gnmpe 密码:8h5t
阅读更多...
OpenCV实战（基础知识三）

OpenCV实战（基础知识三）

简介 OpenCV是一个流行的开源计算机视觉库&#xff0c;由英特尔公司发起发展。它提供了超过2500个优化算法和许多工具包&#xff0c;可用于灰度、彩色、深度、基于特征和运动跟踪等的图像处理和计算机视觉应用。OpenCV主要使用C语言编写&#xff0c;同时也支持Python、Java、C…
阅读更多...
RocketMQ零拷贝原理

RocketMQ零拷贝原理

1 PageCache ●由内存中的物理page组成&#xff0c;其内容对应磁盘上的block。 ●page cache的大小是动态变化的。 ●backing store&#xff1a;cache缓存的存储设备。 ●一个page通常包含多个block,而block不一定是连续的。 1.1读Cache ●当内核发起一个读请求时&#x…
阅读更多...
Meta发布AI编码工具，或可实现智能生成代码和调试代码

Meta发布AI编码工具，或可实现智能生成代码和调试代码

据悉&#xff0c;日前Meta推出名为 Code Llama 的AI编码工具&#xff0c;号称“最先进的大型编码语言模型”。 该模型基于Llama 2大型语言模型打造&#xff0c;可以理解为“Llama 2 的写代码专用版”&#xff0c;能够“生成新的代码并调试人类编写的工作”&#xff0c;目前已上…
阅读更多...
Mycat事务补偿设计

Mycat事务补偿设计

1.概述 在使用数据分片场景下&#xff0c;单库下的事务处理无法满足系统的需求&#xff0c;因而需要进行分布式事务处理设计。 2.主要方案对比分析 处理分布式场景下的事务有很多种方案&#xff0c;主要方案如下表所示: 主要技术 优点 缺点 适用场景 XA with 2PC (JTA)、…
阅读更多...
左耳朵耗子:TCP 的那些事儿（下）

左耳朵耗子:TCP 的那些事儿（下）

原文地址&#xff1a;https://coolshell.cn/articles/11609.html 这篇文章是下篇&#xff0c;所以如果你对TCP不熟悉的话&#xff0c;还请你先看看上篇《TCP的那些事儿&#xff08;上&#xff09;》 上篇中&#xff0c;我们介绍了TCP的协议头、状态机、数据重传中的东西。但是T…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023