文章 2025-05-12 来自:开发者社区

Vue 3 中的 nextTick 使用详解与实战案例

Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。 什么是 nextTick...

文章 2024-09-26 来自:开发者社区

Vue2与Vue3插槽使用的区别及案例

Vue.js,作为前端开发领域的一颗明星,以其数据驱动和组件化的设计理念受到广泛欢迎。Vue的版本迭代带来了许多新特性和优化,尤其是在插槽(slots)功能上,Vue 3与Vue 2之间的差异体现了框架设计的进步和发展方向。以下,我们将详细探讨Vue 2和Vue 3在插槽使用上的不同,...

文章 2023-12-12 来自:开发者社区

vue3 element图片上传案例

cv走就可以用,在这里就不多说了<template> <el-upload class="upload-demo" action="https://c2c.kuxia.top/webapi/index/upload" :on-success="handleSuccess" :on-error="handleError" :on-pre...

文章 2023-10-17 来自:开发者社区

Vue3案例-todoMVC-pinia版 (可跟做练手)

列表展示功能(1) 在main.js中引入piniaimport { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' import './styles/base.css' import './styles/index.css' const pinia = createPi....

文章 2023-10-17 来自:开发者社区

Vue3案例-todoMVC (可跟做练手)

列表展示功能(1)在App.vue中提供数据&lt;script setup&gt; import TodoHeader from './components/TodoHeader.vue' import TodoMain from './components/TodoMain.vue' import TodoFooter from './components/TodoFooter.vue' /....

文章 2023-09-23 来自:开发者社区

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

9 面经基础版-缓存组件1.问题从面经列表 点到 详情页,又点返回,数据重新加载了 → 希望回到原来的位置2.原因当路由被跳转后,原来所看到的组件就被销毁了(会执行组件内的beforeDestroy和destroyed生命周期钩子),重新返回后组件又被重新创建了(会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子),所以数据被加载了3.解决....

Vue2向Vue3过度核心技术综合案例2
文章 2023-09-23 来自:开发者社区

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

1 面经基础版-案例效果分析1.面经效果演示2.功能分析通过演示效果发现,主要的功能页面有两个,一个是列表页,一个是详情页,并且在列表页点击时可以跳转到详情页底部导航可以来回切换,并且切换时,只有上面的主题内容在动态渲染3.实现思路分析:配置路由+功能实现1.配置路由首页和面经详情页,两个一级路由首页内嵌套4个可切换的页面(嵌套二级路由)2.实现功能首页请求渲染跳转传参 到 详情页,详情页动态渲....

Vue2向Vue3过度核心技术综合案例1
文章 2023-09-05 来自:开发者社区

vue3列表页面开发最佳实践案例

近些年写了太多的列表页面, 也见过很多人写的列表组件代码, 这里分析并记录一下个人认为的最佳实践方案按照常规的需求先说列表需要的数据(加载数据过程中的loading等状态不在本文的考虑范围内):1.  列表页面首要保存的肯定是要展示的数据 list:Array 了2.  一般来说有列表大部分会有翻页功能, 所以我们需要  pageNo:Number, pageSiz....

文章 2023-06-28 来自:开发者社区

【三十天精通Vue 3】第二十七天 Vue 3的实战案例-接口进度条

引言在Web应用程序中,经常会遇到需要向服务器发送请求并等待响应的情况。这种等待时间可能会很长,导致用户感觉网站速度很慢。为了提高用户体验,我们可以使用接口进度条来显示请求的进度,让用户知道请求正在处理中,从而提高用户的满意度。CSDN博主「陈书予」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。一、安装进度条插件1.1 安装NProgress插件1.2 在Vu....

文章 2023-06-20 来自:开发者社区

Vue(Vue2+Vue3)——47.TodoList案例_pubsub、48.TodoList案例_编辑

47  TodoList案例_pubsub把TodoList案例按照pubsub改造一下订阅如下发布如下功能也是一样的48 TodoList案例_编辑本次给TodoList案例新增一个编辑功能首先是给todo待办鼠标悬浮的时候给一个编辑按钮然后就是编辑的时候让todo称为一个输入框和逻辑

Vue(Vue2+Vue3)——47.TodoList案例_pubsub、48.TodoList案例_编辑

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注