- 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系,父子关系、兄弟关系和隔代关系,简化点可以分为父子关系和非父子关系,下面就讲讲vue父子组件通信以及非父子组件通信的方法。使用代码格式会比较乱,所以直接使用图片演示。 1.父子组件 (... 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系,父子关系、兄弟关系和隔代关系,简化点可以分为父子关系和非父子关系,下面就讲讲vue父子组件通信以及非父子组件通信的方法。使用代码格式会比较乱,所以直接使用图片演示。 1.父子组件 (...
- 上一篇已经对Vue2和Vue3的组件开发区别讲了一部分,如需了解请移步: 带你体验Vue2和Vue3开发组件的区别(一), 主要讲了template、data、methods、Lifecyle Hooks这几个的区别,接下来我们再讲讲另外几个属性的变化。 1.Computed Properties Computed Pro... 上一篇已经对Vue2和Vue3的组件开发区别讲了一部分,如需了解请移步: 带你体验Vue2和Vue3开发组件的区别(一), 主要讲了template、data、methods、Lifecyle Hooks这几个的区别,接下来我们再讲讲另外几个属性的变化。 1.Computed Properties Computed Pro...
- Vue项目开发中,有这么两个属性比较容易混淆,如果不特别注意,用法比较相似,这两个属性就是computed和watch,其实这两个还是有很大差别,下面就讲讲这两个属性的用法及不同 先说说为什么比较像,我们看下面代码。 <template> <div>  ... Vue项目开发中,有这么两个属性比较容易混淆,如果不特别注意,用法比较相似,这两个属性就是computed和watch,其实这两个还是有很大差别,下面就讲讲这两个属性的用法及不同 先说说为什么比较像,我们看下面代码。 <template> <div>  ...
- Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。本文重点介绍在Vue项目中简单封装Axios Vue推荐我们使用Axios,vue-resource在Vue2.0后就不再更新,本文对Axios的用法不做过多的介绍,只是在项目上简单封装及使用,如果有需要了解的,可以访问gi... Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。本文重点介绍在Vue项目中简单封装Axios Vue推荐我们使用Axios,vue-resource在Vue2.0后就不再更新,本文对Axios的用法不做过多的介绍,只是在项目上简单封装及使用,如果有需要了解的,可以访问gi...
- 1 Options API Options API 可以翻译为选项API,字面意思可供使用者挑拣的分类条目,就是框架定义好选项,我们可以把我们的功能写在选项里,如props 里面设置接收参数、data 里面设置变量、computed 里面设置计算属性、watch 里面设置监听属性、methods 里面设置事件方法你会发现 Opt... 1 Options API Options API 可以翻译为选项API,字面意思可供使用者挑拣的分类条目,就是框架定义好选项,我们可以把我们的功能写在选项里,如props 里面设置接收参数、data 里面设置变量、computed 里面设置计算属性、watch 里面设置监听属性、methods 里面设置事件方法你会发现 Opt...
- 最近一直在更新Vue项目中配置及使用一些内置的方法,今天讲一讲Vue项目中使用iconfont图标库,不管是管理平台还是官网展示之类的显示页面,都会用到一些小图标,如果我们用img标签,那我们的资源库会非常的大,而且后期如果我们针对图标调整大小,改色等之类的操作,就需要用到Photoshop等专业类工具,上手困难不说,而且比较麻烦... 最近一直在更新Vue项目中配置及使用一些内置的方法,今天讲一讲Vue项目中使用iconfont图标库,不管是管理平台还是官网展示之类的显示页面,都会用到一些小图标,如果我们用img标签,那我们的资源库会非常的大,而且后期如果我们针对图标调整大小,改色等之类的操作,就需要用到Photoshop等专业类工具,上手困难不说,而且比较麻烦...
- Vite — 一个Vue作者开发的Web开发工具,它具有快速的冷启动、及时的模块热更新、真正的按需加载。 Vite基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。既然这么好,那就赶紧体验下。 1.创建并运行Vue +... Vite — 一个Vue作者开发的Web开发工具,它具有快速的冷启动、及时的模块热更新、真正的按需加载。 Vite基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。既然这么好,那就赶紧体验下。 1.创建并运行Vue +...
- 在Vue项目上,有时需要对页面元素进行展示和隐藏,Vue框架就提供了条件渲染的指令v-show和v-if。 那这两个有什么区别呢,我们先看下官方v-show和v-if的对比解释: 官方解释 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的:如果在... 在Vue项目上,有时需要对页面元素进行展示和隐藏,Vue框架就提供了条件渲染的指令v-show和v-if。 那这两个有什么区别呢,我们先看下官方v-show和v-if的对比解释: 官方解释 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的:如果在...
- watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。 简单来说就是,vue是数据双向绑定,当页面数据发生变化时,我们通过watch可以拿到变化前和变化后的值,之后做一系列操作,下面我们通过例子来解释。 1.监听单个值变化 <template>&nbs... watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。 简单来说就是,vue是数据双向绑定,当页面数据发生变化时,我们通过watch可以拿到变化前和变化后的值,之后做一系列操作,下面我们通过例子来解释。 1.监听单个值变化 <template>&nbs...
- 今天分享的源码是我很早之前gitee上开源的一个管理后台模版,是基于vue和elementUI的一个基础版,技术栈使用:vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont,可以说基本上使用了vue全家桶,对新手来说,是个不错的上... 今天分享的源码是我很早之前gitee上开源的一个管理后台模版,是基于vue和elementUI的一个基础版,技术栈使用:vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont,可以说基本上使用了vue全家桶,对新手来说,是个不错的上...
- WebSocket 协议自2008年诞生2011年成为国际标准以来。目前所有浏览器都已经支持了。因此我们不需要担心在项目中使用是否会有其他问题,WebSocket实现了浏览器与服务器全双工通信,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。 MDN上面有详细的文档,这里就不过多介绍,我们直接在vue项目上使用W... WebSocket 协议自2008年诞生2011年成为国际标准以来。目前所有浏览器都已经支持了。因此我们不需要担心在项目中使用是否会有其他问题,WebSocket实现了浏览器与服务器全双工通信,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。 MDN上面有详细的文档,这里就不过多介绍,我们直接在vue项目上使用W...
- 使用脚手架搭建的Vue3项目默认使用的路由版本是4,由于Vue3和Vue2写法差异较大,所以需要从新熟悉Router用法,本篇文章比较下两个版本的写法差异,不做深层次的讲解,主要是我也不懂。 1 Vue2配合Vue-router3 说多了没用,直接上代码 import Vue from ... 使用脚手架搭建的Vue3项目默认使用的路由版本是4,由于Vue3和Vue2写法差异较大,所以需要从新熟悉Router用法,本篇文章比较下两个版本的写法差异,不做深层次的讲解,主要是我也不懂。 1 Vue2配合Vue-router3 说多了没用,直接上代码 import Vue from ...
- 前面已经讲了浅谈Vue2中provide和inject使用,今天讲讲在Vue3中如何使用provide和inject Vue3的写法已经和Vue2有所不同,因此需要熟悉Vue3的写法,其实变动不大,现在官方文档也有详细介绍,有兴趣的可以去了解. 1 使用 Provide 在 setup() 中使用 pro... 前面已经讲了浅谈Vue2中provide和inject使用,今天讲讲在Vue3中如何使用provide和inject Vue3的写法已经和Vue2有所不同,因此需要熟悉Vue3的写法,其实变动不大,现在官方文档也有详细介绍,有兴趣的可以去了解. 1 使用 Provide 在 setup() 中使用 pro...
- 项目基于Vue-cli3.x进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面的国际化,一是ant-design-vue内部组件的国际化,二是国际化我们的业务显示,业务显示我们选用vue-i18n进行国际化。 安装vue-i18n yarn add vue-i18n 在public... 项目基于Vue-cli3.x进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面的国际化,一是ant-design-vue内部组件的国际化,二是国际化我们的业务显示,业务显示我们选用vue-i18n进行国际化。 安装vue-i18n yarn add vue-i18n 在public...
- 点击上方“ 青年码农 ”关注 回复“特效源码”可获取各种资料 前面讲了关于vue组件间数据传递,如果没有看过,关注公众号,有历史推荐,讲的比较详细,有代码,新手也能看懂,今天说一说$attrs和$listener。 疫情之前,在家关了这么久,也没怎么更新,最近在看大佬的项目,学习下新的思路。之前项目上,父子组件传递数据,都是用pr... 点击上方“ 青年码农 ”关注 回复“特效源码”可获取各种资料 前面讲了关于vue组件间数据传递,如果没有看过,关注公众号,有历史推荐,讲的比较详细,有代码,新手也能看懂,今天说一说$attrs和$listener。 疫情之前,在家关了这么久,也没怎么更新,最近在看大佬的项目,学习下新的思路。之前项目上,父子组件传递数据,都是用pr...
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家;李炎-华为云码道产品专家;彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战,从0到1打通消息通道;码道鸿蒙端云一体化实战,快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人;蒋春阳-华为云AI开发者案例开发专家
本期直播内容: AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了:看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签