回到顶部 Fork me on GitHub

随笔分类 -  Vue

使用Vue封装暂无数据占位图组件
摘要:1. 前言 在日常开发中,页面上肯定有展示数据的需求,但是当某些时候该展示数据的地方此时数据为空时,就会留下一片空白,对用户体验不是很好,那么接下来我们就封装一个空数据时的占位展示图,告诉用户此时用户为空,并非数据没有加载出来,不用让用户盲目的等待。 2. 使用示例 该组件可以直接引入到项目中使用, 阅读全文

posted @ 2019-11-13 18:36 难凉热血,码梦为生! 阅读(3460) 评论(0) 推荐(1) 编辑

Vue组件间通信方式到底有几种
摘要:1. 前言 的一个核心思想就是组件化。所谓组件化,就是把页面拆分成多个组件 ( ),每个组件依赖的 、`JavaScript`、模板、图片等资源放在一起开发和维护。组件是资源独立的,组件在系统内部可复用,组件和组件之间可以嵌套。 我们在用 开发实际项目的时候,就是像搭积木一样,编写一堆组件拼装生成页 阅读全文

posted @ 2019-10-25 16:16 难凉热血,码梦为生! 阅读(793) 评论(0) 推荐(0) 编辑

通俗易懂了解Vue中nextTick的内部实现原理
摘要:1. 前言 是 中的一个核心功能,在 内部实现中也经常用到 。在介绍 实现原理之前,我们有必要先了解一下这个东西到底是什么,为什么要有它,它是干嘛用的。 2. nextTick到底是什么 官方文档对 的功能如是说明: 在下次 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 阅读全文

posted @ 2019-09-29 22:10 难凉热血,码梦为生! 阅读(1478) 评论(0) 推荐(0) 编辑

通俗易懂了解Vue内置组件keep-alive内部原理
摘要:1. 官方介绍及其用法 1.1 组件介绍 要想搞明白 组件,官网如下介绍: Vue DOM` 元素,也不会出现在父组件链中。当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 这句话的意思简单来说:就是我们可以把一些不常变动的组件或者需要缓存的组件用 就会帮我们把组件保存在内存中,而不是直 阅读全文

posted @ 2019-09-10 14:11 难凉热血,码梦为生! 阅读(8677) 评论(0) 推荐(1) 编辑

如何让elemengUI中的表格组件相同内容的单元格自动合并
摘要:1. 前言 这两天在工作中遇到这样一个需求:将某个 中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与 中一致。在原始 文件中,对每一行相同的数据都进行了合并,使得数据比较有层次性,而在页面表格中,也需要将相同内容的单元格进行合并。博主手头的项目使用的UI框架是 ,`elemengUI`中的 阅读全文

posted @ 2019-08-01 16:45 难凉热血,码梦为生! 阅读(1280) 评论(0) 推荐(1) 编辑

如何在Vue中,当鼠标hover上元素时,给元素加遮罩层
摘要:介绍 当鼠标hover 上元素时,给元素加一层遮罩层。 效果图 使用 示例 组件代码 完整代码请戳☞ "Vue Components Library/VueHoverMask" (完) 阅读全文

posted @ 2019-06-26 16:53 难凉热血,码梦为生! 阅读(7953) 评论(0) 推荐(2) 编辑

如何在Vue-cli项目中使用JTopo
摘要:1.前言 "jTopo(Javascript Topology library)" 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。其体积小,性能优异,由一群开发爱好者来维护。唯一感觉不足的是它是一个纯 库,没有像使用 语法,不能像模块化开发那样使用 导入, 由于博主的项目是 阅读全文

posted @ 2019-06-14 12:25 难凉热血,码梦为生! 阅读(4948) 评论(2) 推荐(0) 编辑

如何在Vue项目中给路由跳转加上进度条
摘要:1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示)。虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验。本篇文章就来教你如何在Vue项目中实现这样的进度条。 2.安装Np 阅读全文

posted @ 2018-12-23 01:56 难凉热血,码梦为生! 阅读(2783) 评论(0) 推荐(0) 编辑

Vue+element UI实现“回到顶部”按钮组件
摘要:介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部。 使用方法 由于该组件是基于 进行二次封装的,所以在使用该组件时请务必安装 ( "安装方式猛戳这里" ),安装好 后,只需将该组件文件夹 导入到现有项目中即可使用。 使用示例 选项 | 属性 | 阅读全文

posted @ 2018-12-19 11:30 难凉热血,码梦为生! 阅读(12694) 评论(1) 推荐(0) 编辑

Vue+element UI实现表格数据导出Excel组件
摘要:介绍 这是一个可以将页面中的表格数据导出为 文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成 文件。 使用方法 由于封装该组件内部引用了 ,`file saver.js elementUI`,因此在使用该组件时,请先安装如下依赖: 安装好依赖后 阅读全文

posted @ 2018-12-18 21:26 难凉热血,码梦为生! 阅读(11458) 评论(3) 推荐(2) 编辑

如何在Vue项目中使用Typescript
摘要:0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发。本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段。 1.初始化项目 首先,创建一个新的项目目录。 接着,在目录中创建如下目录结构。 TypeScript文件将位于src目录下,经过Ty 阅读全文

posted @ 2018-12-03 13:57 难凉热血,码梦为生! 阅读(1010) 评论(0) 推荐(0) 编辑

通俗易懂了解Vue双向绑定原理及实现
摘要:1. 前言 每当被问到Vue数据双向绑定原理的时候,大家可能都会脱口而出:Vue内部通过 方法属性拦截的方式,把 对象里每个数据的读写转化成 /`setter`,当数据变化时通知视图更新。虽然一句话把大概原理概括了,但是其内部的实现方式还是值得深究的,本文就以通俗易懂的方式剖析Vue内部双向绑定原理 阅读全文

posted @ 2018-10-31 18:10 难凉热血,码梦为生! 阅读(48321) 评论(24) 推荐(36) 编辑

vue中组件的data为什么是一个函数
摘要:1. 前言 在学习 的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给出的原因为基础,并加上具体的例子,来阐述这么设计的原因。 2.正文 组件是可复用的 实例,一个组件被创建 阅读全文

posted @ 2018-10-30 13:12 难凉热血,码梦为生! 阅读(48010) 评论(1) 推荐(9) 编辑

vue+element UI递归方式实现多级导航菜单
摘要:介绍 这是一个是基于 的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的 菜单数据,动态渲染多级菜单的功能。 使用方法 由于该组件是基于 进行二次封装的,所以在使用该组件时请务必安装 ( "安装方式猛戳这里" ),安装好 后,只需将该组件文件夹 导入到 阅读全文

posted @ 2018-10-13 10:55 难凉热血,码梦为生! 阅读(10332) 评论(0) 推荐(1) 编辑

vue2-preview引用时报错解决办法
摘要:1.报错信息 在完全按照官方文档安装引入 时出现报错,报错信息如下: 从图中标记处可以知道出错是因为在 中找不到 这个文件所致的。 2.解决办法 在作者没有解决之前暂时修改插件,不知道有没有后续问题 进入到 文件中,将以下错误地方 修改成: 阅读全文

posted @ 2018-09-27 14:39 难凉热血,码梦为生! 阅读(565) 评论(0) 推荐(0) 编辑

vue+element UI + axios封装文件上传及进度条组件
摘要:1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人。 项目用的是Vue框架,UI库使用的是element UI,前后端交互请求使用的是Vue官方推荐的axios。其中,UI方面主要使用了element UI库中的 阅读全文

posted @ 2018-09-25 17:30 难凉热血,码梦为生! 阅读(6504) 评论(0) 推荐(0) 编辑

在vue中如何使用axios
摘要:1.前言 在Vue1.0的时候有一个官方推荐的 ajax 插件 vue resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue resource。 关于为什么放弃推荐? 尤大原话 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch 阅读全文

posted @ 2018-09-20 11:49 难凉热血,码梦为生! 阅读(416) 评论(0) 推荐(0) 编辑

使用vue-cookies操作cookie
摘要:1.前言 在vue中如果想要操作cookie,除了使用之前我们自己封装好的操作cookie的方法之外,我们还可以使用 插件,这是一个简单的Vue.js插件,专门用于在vue中处理浏览器的cookie操作, 没有依赖关系,它可以独立存在,对vuejs友好。本篇博文就来介绍如何使用 插件。 2.安装vu 阅读全文

posted @ 2018-09-16 16:01 难凉热血,码梦为生! 阅读(6087) 评论(1) 推荐(1) 编辑

vue+element UI以组件递归方式实现多级导航菜单
摘要:介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能。 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方 阅读全文

posted @ 2018-09-03 15:57 难凉热血,码梦为生! 阅读(19932) 评论(7) 推荐(1) 编辑

通俗易懂了解Vuex
摘要:1.前言 在使用Vue进行开发的时候,关于vue组件通信的方式,除了通俗易懂了解Vue组件的通信方式这篇博文谈到三种通信方式,其实vue更提倡我们使用vuex来进行组件间的状态管理以及通信问题。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 2.引例 在学习vuex之前,我们不妨先 阅读全文

posted @ 2018-09-01 17:04 难凉热血,码梦为生! 阅读(1253) 评论(5) 推荐(0) 编辑

导航

点击右上角即可分享
微信分享提示