- 前言随着前端技术的快速发展和前后端分离架构的普及，单页面应用（SPA）已成为现代Web开发的主流。在SPA中，前端路由和状态管理扮演着至关重要的角色。Vue3作为当前流行的前端框架之一，提供了强大的路由（Vue Router）和状态管理（Vuex、Pinia等）解决方案。本章节将深入探讨Vue3中的路由与状态管理，涵盖路由的基本概念、实现原理、搭建与配置、动态与编程式路由、命名路由与视图、... 前言随着前端技术的快速发展和前后端分离架构的普及，单页面应用（SPA）已成为现代Web开发的主流。在SPA中，前端路由和状态管理扮演着至关重要的角色。Vue3作为当前流行的前端框架之一，提供了强大的路由（Vue Router）和状态管理（Vuex、Pinia等）解决方案。本章节将深入探讨Vue3中的路由与状态管理，涵盖路由的基本概念、实现原理、搭建与配置、动态与编程式路由、命名路由与视图、...
- Vue 3.x 的全面升级引入了 Composition API，这是对 Vue 2.x 传统 Options API 的一个重大改进，它提供了更加灵活和模块化的代码组织方式. Vue 3.x 的全面升级引入了 Composition API，这是对 Vue 2.x 传统 Options API 的一个重大改进，它提供了更加灵活和模块化的代码组织方式.
- 一、前言 1 月 2 日消息，Vue.js 作者尤雨溪发文声称，Vue 2 已于 2023 年 12 月 31 日结束生命周期（EOL），目前 Vue 2 已经无法接收到新功能及修复补丁，还在使用 Vue 2 的开发团队应迁移至最新的 Vue 3 版本。 Vue 2.0 最初发布于 2016 年，至今已经有 7 年历史，尤雨溪表示，2.0 版本是 Vue 成为主流框架历程中的一... 一、前言 1 月 2 日消息，Vue.js 作者尤雨溪发文声称，Vue 2 已于 2023 年 12 月 31 日结束生命周期（EOL），目前 Vue 2 已经无法接收到新功能及修复补丁，还在使用 Vue 2 的开发团队应迁移至最新的 Vue 3 版本。 Vue 2.0 最初发布于 2016 年，至今已经有 7 年历史，尤雨溪表示，2.0 版本是 Vue 成为主流框架历程中的一...
- 一、前言对于Vue 渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于改变视图的同时不会向后端发出请求。一、为了达到这个目的，浏览器提供了 hash 与history 两种支持：为什么这两种模式实现了更新视图但不请求页面？hash ——即地址栏URL中的#符号（此hash 不是密码学里的散列运算）。比如这... 一、前言对于Vue 渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于改变视图的同时不会向后端发出请求。一、为了达到这个目的，浏览器提供了 hash 与history 两种支持：为什么这两种模式实现了更新视图但不请求页面？hash ——即地址栏URL中的#符号（此hash 不是密码学里的散列运算）。比如这...
- 一、前言在 Vue 项目中，如果项目结构简单，父子组件之间的数据传递可以使用 props 或者 $emit 等方式 （详参博文《Vue进阶（六）：组件之间的数据传递》）。如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex完美的解决了这个问题。 二、什么是Vuex? 为什么要使用Vuex ?首先，我们需要知道 vue 是以单向数据... 一、前言在 Vue 项目中，如果项目结构简单，父子组件之间的数据传递可以使用 props 或者 $emit 等方式 （详参博文《Vue进阶（六）：组件之间的数据传递》）。如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex完美的解决了这个问题。 二、什么是Vuex? 为什么要使用Vuex ?首先，我们需要知道 vue 是以单向数据...
- 一、什么是 MVVM ？MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过View... 一、什么是 MVVM ？MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过View...
- 一、前言在学习和使用Vue.js 2.0 过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到无法调用plus的H5+接口问题，所以最后拍照上传功能还是使用input file方式解决。但是内心还是不甘，由于项目进度推进，迭代版本，所以不得不放弃，后续我将此功能使用调用H5+接... 一、前言在学习和使用Vue.js 2.0 过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到无法调用plus的H5+接口问题，所以最后拍照上传功能还是使用input file方式解决。但是内心还是不甘，由于项目进度推进，迭代版本，所以不得不放弃，后续我将此功能使用调用H5+接...
- 一、前言Vuex提供了state状态统一管理树，开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然，也可以在接收原值的基础上对这个值做出一些改造，如：computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' }}但是，如果其他组件也要使用这种改造方式去改变这个... 一、前言Vuex提供了state状态统一管理树，开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然，也可以在接收原值的基础上对这个值做出一些改造，如：computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' }}但是，如果其他组件也要使用这种改造方式去改变这个...
- 一、介绍VuePress ,一个全新的基于 vue 实现的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。VuePress 由两部分组成：一个以 Vue 驱动的主题系统简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTM... 一、介绍VuePress ,一个全新的基于 vue 实现的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。VuePress 由两部分组成：一个以 Vue 驱动的主题系统简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTM...
- 一、概述插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name属性的叫具名插槽，不设置name属性的叫不具名插槽，在父组件中使用子组件时候，可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。 二、使用... 一、概述插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name属性的叫具名插槽，不设置name属性的叫不具名插槽，在父组件中使用子组件时候，可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。 二、使用...
- 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ... 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ...
- 一、前言一般情况下，如果需要访问vuex.store中state存放的数据，需要使用this.$store.state.属性名方式。显然，采取这样的数据访问方式，代码略显繁杂，辅助函数为了解决繁杂行问题应运而生。 二、辅助函数通过辅助函数mapGetters、mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实... 一、前言一般情况下，如果需要访问vuex.store中state存放的数据，需要使用this.$store.state.属性名方式。显然，采取这样的数据访问方式，代码略显繁杂，辅助函数为了解决繁杂行问题应运而生。 二、辅助函数通过辅助函数mapGetters、mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实...
- 因为工作原因，笔者先后使用过 SAP UI5 和 Angular 进行过企业级前端界面的开发工作。所谓企业级前端应用，是指为大型企业或组织开发的前端应用，这些应用具有超过一般 2C 软件的技术复杂度，高度定制化和可扩展性，因为企业级前端应用程序，通常需要满足企业特定的业务需求和技术要求，因此除了实现业务需求之外，还必须具备强大的性能、可扩展性、安全性和可维护性。像笔者所在的公司，发布的 SA... 因为工作原因，笔者先后使用过 SAP UI5 和 Angular 进行过企业级前端界面的开发工作。所谓企业级前端应用，是指为大型企业或组织开发的前端应用，这些应用具有超过一般 2C 软件的技术复杂度，高度定制化和可扩展性，因为企业级前端应用程序，通常需要满足企业特定的业务需求和技术要求，因此除了实现业务需求之外，还必须具备强大的性能、可扩展性、安全性和可维护性。像笔者所在的公司，发布的 SA...
- 一、前言在开发前端项目的时候，经常会遇到这样一种开发场景：多个模板页中应用的组件或者页面布局非常相似，比如较为熟悉的el-dialog、el-tooltip和el-table等页面布局。这时候就会考虑：是把它们拆分成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件，就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面... 一、前言在开发前端项目的时候，经常会遇到这样一种开发场景：多个模板页中应用的组件或者页面布局非常相似，比如较为熟悉的el-dialog、el-tooltip和el-table等页面布局。这时候就会考虑：是把它们拆分成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。这些解决方案都不够完美。如果拆分成多个组件，就不得不冒着如果功能变动你要在多个文件中更新它的风险。另一方面...
- 一、前言在vue项目使用vue-resource实现异步加载的过程中，需要在任何一个页面任何一次http请求过程中，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那将会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢？答案是有的!vue-resource中... 一、前言在vue项目使用vue-resource实现异步加载的过程中，需要在任何一个页面任何一次http请求过程中，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那将会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢？答案是有的!vue-resource中...
上滑加载中
推荐直播
-
香橙派AIpro的远程推理框架与实验案例2025/07/04 周五 19:00-20:00
郝家胜 -华为开发者布道师-高校教师
AiR推理框架创新采用将模型推理与模型应用相分离的机制，把香橙派封装为AI推理黑盒服务，构建了分布式远程推理框架，并提供多种输入模态、多种输出方式以及多线程支持的高度复用框架，解决了开发板环境配置复杂上手困难、缺乏可视化体验和资源稀缺课程受限等痛点问题，真正做到开箱即用，并支持多种笔记本电脑环境、多种不同编程语言，10行代码即可体验图像分割迁移案例。
回顾中 -
鸿蒙端云一体化应用开发2025/07/10 周四 19:00-20:00
倪红军 华为开发者布道师-高校教师
基于鸿蒙平台终端设备的应用场景越来越多、使用范围越来越广。本课程以云数据库服务为例，介绍云侧项目应用的创建、新建对象类型、新增存储区及向对象类型中添加数据对象的方法，端侧（HarmonyOS平台）一体化工程项目的创建、云数据资源的关联方法及对云侧数据的增删改查等操作方法，为开发端云一体化应用打下坚实基础。
即将直播
热门标签