小兔鲜Vue3

在这里插入图片描述

  • counterStore里面包含着对象返回的东西。
    在这里插入图片描述
  • getters就是conputer
    在这里插入图片描述
    在这里插入图片描述
  1. git init
  2. git add .
  3. git commit -m " "

在这里插入图片描述

  • jsconfig进行路径提示。
  • vite.config.js进行实际路径转化。

在这里插入图片描述

在这里插入图片描述

  • 第一个文件做好就是一个axios实例了,可以直接调用方法。 在第二个文件是实例.get
    在这里插入图片描述
  1. 写好路由规则,
  2. 在App.vue中写好routeView标签。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
1.样式放在main.js

在这里插入图片描述

 css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      },
    },
  },
  • 先加载这里两个文件,项目启动自动加载。
$primark:#1dc779;

 .test{
  color: $priceColor囗;
 }

在这里插入图片描述+ 使用阿里矢量库的font-class。

在这里插入图片描述
在这里插入图片描述

  • 两个组件使用一样的数据,就把数据放在pinia。

  • 在

  • 在父文件运行pinia的方法获得数据,在子组件获得pinia的数据。可以避免重复请求。

在一级路由里面包含多个组件。

  • 组件复用的话可以使用数据传递。

在这里插入图片描述

  • 一个面板里面包含是面板的组件,传递2个数据和插槽数据。

图片懒加载

在这里插入图片描述
在这里插入图片描述

app.directive("img-lazy",{
  mounted(el,binding){
    console.log(el,binding.value);

  useIntersectionObserver(
      el,
      ([entry]) => {
        if (entry.isIntersecting) {
            el.src=binding.value
        }
      },
    )
    
  }
})

在这里插入图片描述

  • 指令逻辑本来是在main的,但是太多会影响初始化.

在这里插入图片描述

参数

在 Vue Router 中,category/1000 中的 1000 是一个 动态路由参数(Params),而不是查询参数(Query)。这两种参数在路由中有着不同的用途和表现形式。

1. 动态路由参数(Params)

动态路由参数是通过路径中的占位符(如 :id)传递的值。它们是路径的一部分,通常用于标识资源或页面的唯一性。

示例
const routes = [
  {
    path: '/category/:id', // `:id` 是动态路由参数
    name: 'Category',
    component: CategoryView
  }
];

在上面的路由配置中,/category/:id 表示路径中的 :id 是一个动态参数。当访问 /category/1000 时,1000 就是动态参数的值。

如何获取动态参数

在组件中,可以通过 $route.params 获取动态参数:

export default {
  mounted() {
    const categoryId = this.$route.params.id; // 获取动态参数
    console.log(categoryId); // 输出:1000
  }
};

2. 查询参数(Query)

查询参数是附加在 URL 的末尾,以 ? 开始,以 & 分隔的键值对。它们通常用于传递额外的过滤条件或状态信息。

示例
const routes = [
  {
    path: '/category/:id',
    name: 'Category',
    component: CategoryView
  }
];

访问 URL:/category/1000?sort=asc&filter=active

在这个 URL 中:

  • 1000 是动态路由参数(Params)。
  • sort=ascfilter=active 是查询参数(Query)。
如何获取查询参数

在组件中,可以通过 $route.query 获取查询参数:

export default {
  mounted() {
    const sort = this.$route.query.sort; // 获取查询参数 sort
    const filter = this.$route.query.filter; // 获取查询参数 filter
    console.log(sort); // 输出:asc
    console.log(filter); // 输出:active
  }
};

3. 区别

  • 动态参数(Params)

    • 是路径的一部分,用于标识资源或页面的唯一性。
    • 通过 $route.params 获取。
    • 示例:/category/1000,其中 1000 是动态参数。
  • 查询参数(Query)

    • 是附加在 URL 末尾的键值对,用于传递额外的过滤条件或状态信息。
    • 通过 $route.query 获取。
    • 示例:/category/1000?sort=asc&filter=active,其中 sort=ascfilter=active 是查询参数。

4. 使用场景

  • 动态参数(Params)

    • 用于标识资源的唯一性,例如文章 ID、用户 ID 等。
    • 通常用于 RESTful 风格的路由设计。
  • 查询参数(Query)

    • 用于传递额外的过滤条件、排序方式、分页信息等。
    • 通常用于搜索结果页、分页等场景。

总结

category/1000 中的 1000 是一个 动态路由参数(Params),而不是查询参数(Query)。动态参数是路径的一部分,通过 $route.params 获取;查询参数是附加在 URL 末尾的键值对,通过 $route.query 获取。

在这里插入图片描述
这是因为在你给出的代码示例中,paramsquery 的使用是有差异的,具体的行为取决于你使用的 HTTP 库的内部实现。

1. params vs query:

  • params: 在大多数 HTTP 库中,params 通常会被自动解析并转换成 URL 查询参数,附加在 URL 后面。这是一个比较常见的做法,尤其是用于 GET 请求。
  • query: 如果你使用的是一些不同的 HTTP 客户端,query 参数可能是一个手动指定的方式来传递查询字符串。但是,许多库中 queryparams 是可以互换的,具体的行为取决于你使用的 HTTP 库。

你代码中 params 的工作原理:

export const getCategoryAPI = (id) => {
  return httpInstance({
    url: '/category',
    method: 'get',
    params: {
      id
    }
  })
}

在这个示例中:

  • params 会自动被转换成查询字符串,并附加到 URL 后。例如:/category?id=1005000
  • 这通常是默认的行为,特别是在使用如 Axios 这类 HTTP 请求库时。

如果使用 query,则可能需要手动拼接:

export const getCategoryAPI = (id) => {
  return httpInstance({
    url: '/category',
    method: 'get',
    query: {
      id
    }
  })
}

这会导致 query 需要在请求的发送时手动处理,不一定会像 params 那样自动拼接成查询字符串。具体会是什么样的结果,取决于你使用的 HTTP 库。如果 httpInstance 是基于 Axios 或类似的库,使用 query 可能不会按预期自动生成查询字符串,或者 query 并不是标准的请求参数名称。

总结:

在大多数 HTTP 请求库中,使用 paramsquery 更常见,并且会自动将对象转换为 URL 查询字符串。如果你使用 query,你需要确保库正确地处理了它,或者手动进行拼接。

你可以检查 httpInstance 实际上使用的是哪个 HTTP 库,以及它如何处理这些参数。通常推荐使用 params 来自动拼接查询参数。

  • 面包屑是拿到url的id参数之后,之后请求接口,获得对应id的信息.
    在这里插入图片描述
  • 一个接口可以设定默认值.

在这里插入图片描述

  • 在router-link里面加这个属性.
    在这里插入图片描述

在这里插入图片描述
不同的分类路由切换时候,有一样的组件的话是会复用的,就是生命周期不会再次调用.

在这里插入图片描述

  • 分类组件使用了很多个,之间切换的话,会导致组件复用,所以需要进行
onBeforeRouteUpdate(to => {
    console.log('路由变化了')
    getCategory(to.params.id)
  })
  • 需要更新组件的数据.

在这里插入图片描述

  • 居中的话是 margin:0 auto;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三级导航

  • 可选链 : goods对象里面有category这个字段后 或者 请求数据后才可以继续运行[1].id,需要加上 ?.

好的,我现在要解决用户遇到的Vue3错误:“Cannot read properties of undefined (reading ‘1’)”出现在index.vue的第7行。用户提供的错误堆栈显示在渲染过程中访问了未定义的属性。我需要结合用户提供的搜索结果来分析可能的原因和解决方案。

首先,查看用户提供的搜索结果,尤其是涉及Vue3属性未定义的几个网页。比如,网页6、7、8都提到了属性在渲染时未定义的问题。网页6和7指出,当模板中访问的属性未在实例中定义时,Vue会发出警告。这可能意味着用户在模板中使用了某个变量,但该变量未被正确初始化或传递。

错误信息中的“reading ‘1’”可能暗示用户正在访问数组或对象的某个索引或属性,比如array[1],但该数组可能未定义或长度不足。这时候,当尝试访问索引1时,由于数组是undefined,就会抛出错误。

接下来,根据搜索结果中的解决方案,可以分步骤排查:

  1. 检查变量定义:根据网页6和7的建议,确保在组件实例中正确定义了所有在模板中使用的变量。例如,用户可能在data选项或setup函数中没有初始化某个数组,导致在渲染时该数组为undefined。这时候访问array[1]就会出错。用户需要检查index.vue的第7行,确认访问的变量是否已正确声明和初始化。

  2. 异步数据加载问题:网页5提到在onMounted中获取props可能为null的情况,如果数据是异步加载的,可能在渲染时数据还未到达。此时,用户可能在模板中直接访问异步数据的某个索引,导致未定义错误。解决方案是使用v-if或默认值,确保数据存在后再渲染相关部分。例如,使用v-if="array && array.length > 1"来避免访问不存在的索引。

  3. props传递问题:如果变量是通过props从父组件传递的,需检查父组件是否正确传递了该属性,并且子组件中正确声明了props。网页5中提到子组件的mounted可能在父组件mounted之前执行,导致props未准备好。此时使用watch或watchEffect来监听props的变化会更可靠。

  4. 条件渲染问题:网页2和3提到条件渲染(如v-if)可能导致组件未挂载,进而引发钩子函数未执行或数据未准备好的问题。用户需要检查是否有条件渲染导致变量未被正确初始化的情况,可以改用v-show或在数据加载完成后再渲染组件。

  5. 代码语法和导入问题:网页4指出如果未正确导入Vue3的API(如onMounted)会导致undefined错误,但当前错误是访问属性’1’,可能与之无关。不过仍需检查相关变量是否被正确导入或声明。

总结可能的原因:用户在模板中访问了一个未初始化或异步加载的数组/对象,导致在渲染时该变量为undefined,进而访问其索引1时出错。解决方案包括确保变量正确初始化、处理异步数据、使用条件渲染控制访问时机,以及使用可选链操作符(如array?.[1])避免直接访问未定义的属性。


原因分析

  1. 访问未定义的数组/对象属性
    错误信息中的 reading '1' 表明代码中试图访问数组或对象的索引 1,但该数组/对象可能未正确初始化或异步加载未完成,导致其值为 undefined。例如:array[1] 中的 array 未定义或长度不足。

  2. 异步数据未就绪时渲染
    如果在模板中直接使用了异步加载的数据(如接口返回的数组),在数据加载完成前渲染模板会因数据未定义而报错。

  3. Props传递问题
    如果数据通过 props 从父组件传递,可能父组件未及时传递或子组件的生命周期钩子(如 onMounted)执行时 props 尚未准备好。

出现问题

 <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path: `/category/${goods.categories?.[1].id}`}"> {{goods.categories [1].name}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path: `/category/sub/${goods.categories?.[0].id}`}"> {{goods.categories?.[0].name}}</el-breadcrumb-item>
          <el-breadcrumb-item  >{{goods.desc}}</el-breadcrumb-item>
        </el-breadcrumb>

我的这些数据是在onMount(()=>{
  getGoods()
})生命周期进行请求的,但是为什么报错index.vue:131 
 Uncaught (in promise) ReferenceError: onMount is not defined

解决方案

1. 确保变量正确定义

• 在 datasetup 中初始化变量,避免直接访问未定义的属性。
javascript // Vue3 Composition API 示例 const array = ref([]); // 初始化为空数组

• 如果变量通过 props 传递,需在子组件中声明并设置默认值:
javascript props: { list: { type: Array, default: () => [] // 默认空数组 } }

2. 处理异步数据

• 使用 v-ifv-show 控制渲染时机,确保数据加载完成后再访问索引:
vue <template> <div v-if="array && array.length > 1"> {{ array[1] }} </div> </template>

• 结合 watchEffectwatch 监听数据变化:
```javascript
import { watchEffect } from ‘vue’;

 watchEffect(() => {
   if (array.value?.length > 1) {
     console.log(array.value[1]);
   }
 });
 ```
3. 使用可选链操作符(Optional Chaining)

• 在模板或逻辑代码中通过 ?. 避免直接访问未定义的属性:
vue <template> {{ array?.[1] }} </template>

4. 检查组件生命周期顺序

• 如果数据来自父组件的 props,需注意子组件的 onMounted 可能在父组件数据加载前执行,此时 props 可能为 null。可以通过 watch 监听 props 变化:
```javascript
import { watch } from ‘vue’;

 watch(
   () => props.list,
   (newList) => {
     if (newList && newList.length > 1) {
       console.log(newList[1]);
     }
   }
 );
 ```
5. 排查代码逻辑

• 检查 index.vue 第 7 行的代码(如 array[1]),确认变量是否正确定义、初始化或传递。
• 使用浏览器开发者工具的断点调试功能,观察变量在渲染时的状态。


总结

此错误通常是由于访问未初始化或异步加载中的变量导致。解决方法包括:初始化变量控制渲染时机(如 v-if)、使用可选链操作符监听数据变化。若问题仍存在,建议结合具体代码逻辑进一步排查异步加载或组件间通信的时序问题。

好的,用户的问题是关于在Vue中传递大量数据时,渲染时字段未到达的情况。我需要根据提供的搜索结果来给出解决方案。

首先,查看用户的问题描述,用户提到数据量大导致渲染时字段未到达,这可能是因为数据加载过程中,数据尚未完全到达前端,导致渲染时某些字段缺失。需要优化数据加载和渲染策略。

接下来,参考搜索结果中的各个网页内容。网页1提到了分页加载、按需加载、虚拟列表和缓存技术,特别是使用axios获取数据并缓存到本地存储,这可能有助于减少一次性加载的数据量,确保数据分块到达。网页2和网页3讨论了虚拟滚动和分页加载,使用vue-virtual-scroll-list库来只渲染可见区域的数据,减少DOM操作。网页4和网页5提到异步加载、懒加载以及使用计算属性和缓存,这可以在数据到达前先渲染部分内容,避免空白。网页6和7指出频繁的DOM操作和响应式追踪会导致性能问题,建议使用v-once、冻结数据对象以及分片更新。

综合这些信息,解决方案应包括分块加载数据、虚拟滚动减少渲染量、使用缓存和占位符优化用户体验。同时,异步加载和懒加载确保数据按需到达,避免一次性处理大量数据。此外,优化响应式数据和减少不必要的计算也能提升性能。

需要确保每个建议都有对应的引用,比如分页加载来自网页1,虚拟滚动来自网页2和3,懒加载和异步渲染来自网页4和5,缓存和占位符来自网页1和5,响应式优化来自网页6和7。这样回答就能覆盖多个相关策略,并正确引用来源。

问题

在Vue中处理大量数据时,若因数据传递延迟导致渲染时字段未到达,可通过以下综合策略优化加载和渲染性能:

1. 分块加载与异步处理

分页/分片加载:将数据拆分为多块,通过接口分页或滚动加载逐步请求数据(如axios.get配合分页参数),避免一次性加载全部数据导致前端等待时间过长。
异步渲染:使用async/awaitPromise控制数据加载流程,确保数据到达后再触发渲染。例如,在createdmounted生命周期中异步获取数据,并通过v-if控制渲染时机。

2. 虚拟滚动优化渲染量

仅渲染可见区域:使用虚拟滚动库(如vue-virtual-scroller),仅渲染当前视窗内的数据条目,减少DOM节点数量。例如,一个包含1万条数据的列表,实际渲染的DOM可能仅保留几十条。
代码示例
vue <template> <virtual-scroller :items="largeData" :item-height="50"> <template v-slot="{ item }"> <div>{{ item.field }}</div> <!-- 确保字段存在后再渲染 --> </template> </virtual-scroller> </template>

3. 数据预加载与缓存

本地缓存:首次加载后,将数据存入localStoragesessionStorage,后续优先读取缓存,避免重复请求。若数据更新,再通过接口增量获取。
占位符优化体验:在数据未到达时,使用骨架屏或loading状态占位,避免页面空白。例如:
vue <div v-if="dataLoaded">{{ data.field }}</div> <div v-else class="skeleton-placeholder"></div>

4. 响应式数据优化

冻结非动态数据:对静态数据使用Object.freeze(),避免Vue对其做深度响应式追踪,减少初始化开销。
惰性加载字段:若部分字段依赖后续计算(如汇总值),可先渲染基础数据,再通过watchcomputed异步补充字段。

5. 后端接口配合

按需返回字段:与后端协商接口设计,仅返回当前渲染所需的字段(如GraphQL或字段筛选参数),减少单次传输的数据量。
数据压缩传输:启用GZIP等压缩方式,加快大数据量的传输速度。

总结

通过分块加载降低单次数据量虚拟滚动减少渲染压力缓存与占位符提升用户体验,以及优化响应式数据处理,可有效解决因数据传递延迟导致的渲染字段未到达问题。若需进一步实现细节,可参考Vue生态库(如vue-virtual-scroller)或结合具体场景调整策略。

  1. 可选链
  2. v-if
  3. 分页查询.

在这里插入图片描述

  • 心得:使用可选链条可以让先到的数据先渲染,后到达的数据到达后渲染。
    在这里插入图片描述
import  ImagesViews from '@/components/ImagesViews/index.vue'
import XtxSku  from '@/components/XtxSku/index.vue'
export const  componentPlugin={
  install(app){
      app.component("ImagesViews",ImagesViews)
      app.component("XtxSku",XtxSku)
  }
}


import {componentPlugin} from "@/components/index.js"

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(componentPlugin)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

驱动 AI 边缘计算新时代!高性能 i.MX 95 应用平台引领未来

智慧浪潮崛起&#xff1a;AI与边缘计算的时代 正悄然深植于我们的日常生活之中&#xff0c;无论是火热的 ChatGPT 与 DeepSeek 语言模型&#xff0c;亦或是 Meta 智能眼镜&#xff0c;AI 技术已经无形地影响着我们的生活。这股变革浪潮并未停歇&#xff0c;而是进一步催生了更高…

STM32之软件SPI

SPI传输更快&#xff0c;最大可达80MHz&#xff0c;而I2C最大只有3.4MHz。输入输出是分开的&#xff0c;可以同时输出输入。是同步全双工。仅支持一主多从。SS是从机选择线。每个从机一根。SPI无应答机制的设计。 注意&#xff1a;所有设备需要共地&#xff0c;时钟线主机输出&…

深度学习系列79:Text2sql调研

参考 https://github.com/topics/text-to-sql 这里是一些资源&#xff1a;https://github.com/eosphoros-ai/Awesome-Text2SQL/blob/main/README.zh.md 这里是综述文章&#xff1a;https://zhuanlan.zhihu.com/p/647249972 1. 数据集 Spider: 一个跨域的复杂text2sql数据集&a…

【Unity】 HTFramework框架(六十一)Project窗口文件夹锁定器

更新日期&#xff1a;2025年3月7日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 Project窗口文件夹锁定器框架文件夹锁定自定义文件夹锁定限制条件 Project窗口文件夹锁定器 在Project窗口中&#xff0c;文件夹锁定器能够为任何文件夹加…

nginx服务器实现上传文件功能_使用nginx-upload-module模块

目录 conf文件内容如下html文件内容如下上传文件功能展示 conf文件内容如下 #user nobody; worker_processes 1;error_log /usr/logs/error.log; #error_log /usr/logs/error.log notice; #error_log /usr/logs/error.log info;#pid /usr/logs/nginx.pid;even…

基于云的内容中台核心优势是什么?

弹性云架构赋能资源整合 现代企业通过弹性云架构实现多源数据资源的深度整合&#xff0c;其动态扩展能力可自动适配业务流量波动。基于分布式存储与容器化部署&#xff0c;系统能够无缝对接CRM、ERP等企业软件集成&#xff0c;实现跨平台数据实时同步。值得注意的是&#xff0…

*图论基础(5)

持续更新... 1.图的基本概念 不写了&#xff0c;网上有好多资料ovo 2.图的存储和遍历 2.1存储&#xff1a; 3.最小生成树 3.2Kruskal算法 4.拓扑排序 拓扑排序的⽬标是将有向⽆环图中的所有结点排序&#xff0c;使得排在前⾯的结点不能依赖于排在后⾯的结 点。在课程问题中…

DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)示例3: 行选择

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…

DevSecOps CI/CD 管道中数字供应链安全的集成策略

前言&#xff1a; 在敏捷开发的模式下&#xff0c;应用程序会通过 DevSecOps 的敏捷软件开发生命周期&#xff08;SDLC&#xff09;范式进行开发&#xff0c;并使用持续集成/持续交付&#xff08;CI/CD&#xff09;管道的流程。 然而&#xff0c;在软件开发、供应和交付运营中…

JmeterHttp请求头管理出现Unsupported Media Type问题解决

JmeterHttp请求头管理出现Unsupported Media Type问题解决 大多数的app与pc端压测的时候都会出现这种情况 当我们在jemter测试当中当中遇见Unsupported Media Type&#xff0c;有一种可能就是我们请求的网页的content-Type的类型与我们测试的时候的类型不一致 解决方法 可以添…

STM32 子设备通过CAN发送数据到主设备

采集ADC、GPS经纬坐标、温湿度数据、大气压数据通过CAN方式发送给主设备端&#xff0c;帧ID按照如下定义&#xff1a; 我尼玛一个标准帧ID位数据是11位&#xff0c;扩展帧才是111829位&#xff0c;它说最开头的是四位是真类型&#xff0c;并给我如下解释&#xff1a; 它把帧的定…

基于深度学习的青花瓷图像检索系统开发与实现

目录 1.研究背景与目的 1.1课题背景 1.2研究目的 二、调研资料情况 2.1图像分割研究现状 2.2图像检索调研 2.2.1选择深度学习进行检索的原因及优势 2.2.2基于深度学习的图像检索技术的发展 2.2.3基于深度学习的图像检索的研究重点 2.3基于深度学习的图像检索方法调研 …

FreeRTOS学习(七):通过实例深入理解栈的作用(二)

FreeRTOS学习&#xff08;七&#xff09;&#xff1a;通过实例深入理解栈的作用&#xff08;二&#xff09; 文章目录 FreeRTOS学习&#xff08;七&#xff09;&#xff1a;通过实例深入理解栈的作用&#xff08;二&#xff09;前言一、栈的深度局部变量调用深度 总结 前言 看…

[傻瓜式教学]如何将MathType公式编辑器内嵌到WPS工具栏中

[傻瓜式教学]如何将MathType公式编辑器内嵌到WPS工具栏中 将MathType公式编辑器内嵌到WPS工具栏中 下载好所需文件 我用夸克网盘分享了「mathtype安装教程超简单易上手.zip」&#xff0c;点击链接即可保存。打开「夸克APP」 链接&#xff1a;https://pan.quark.cn/s/4726c684…

网络安全整改措施复函

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 以计算机安全的主要因素为突破口&#xff0c;重点防范各种不利于计算机网络正常运行的措施&#xff0c;从不同角度全面了解影响计算机网络安全的情况&#xff0c;…

基于大数据的全国地铁数据可视化分析系统

【大数据】基于大数据的全国地铁数据可视化分析系统&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 &#x1f31f; 技术特点✔️ PythonFlask黄金架构&#xff0c;Bootstrap塑造友好交互界面 ✔…

react 和 react-dom

react开发的时候&#xff0c;一般下载两个包&#xff0c;一个是react&#xff0c;一个是react-dom&#xff0c;其中react是react的核心代码。 react只包含了web和Mobile通用的核心部分&#xff0c;Dom操作在react-dom中&#xff0c;Mobile在react-native中&#xff1b;react的核…

安科瑞新能源充电桩解决方案:驱动绿色未来,赋能智慧能源

安科瑞顾强 引言 在“双碳”目标与新能源汽车产业高速发展的双重驱动下&#xff0c;充电基础设施正成为能源转型的核心环节。安科瑞电气股份有限公司凭借在电力监控与能效管理领域20余年的技术积淀&#xff0c;推出新一代新能源充电桩解决方案&#xff0c;以智能化、高兼容性…

Vue-flow中动态流程图的实现

一、实现 在Vue-flow官网中&#xff0c;关于动态流程图的部分长这样 他可以让你的流程变得可动&#xff0c;更加容易理解 Examples中提供了各个文件的代码以及importMap&#xff0c;但是当我复制文件过来之后发现无法渲染,控制台报警告 我们只需要在index.vue中引入 import…

Python数据可视化创意分享:探索数据背后的故事

Python数据可视化创意分享&#xff1a;探索数据背后的故事 在数字化浪潮汹涌澎湃的当下&#xff0c;每一组数据都宛如隐藏着神秘密码的线索&#xff0c;等待着敏锐的探索者去破译。今天&#xff0c;让我们一同踏上这场由 Python 驱动的数据可视化奇妙之旅&#xff0c;揭开数据…