Vue
文章平均质量分 71
scut_少东
Fine, thank you, and you?
展开
-
Vue: 打开弹框的正确姿势
1. 技术选型Vue + ElementUI2. 需求功能分析点击按钮,出现弹框。点击取消或者弹框右上角叉号,关闭弹框。3. 组件树结构4. 实现思路 4.1 方案一 (wrong)用户点击MainContent触发点击事件MainContent通知父组件显示弹框this.$emit('showAlertModal')父组件接收通知并改变showAlert...原创 2018-03-23 23:54:48 · 42522 阅读 · 6 评论 -
Vue:踩不完的异步之坑
Js 的异步确实完美地解决了单线程的问题,但是同时也会带来许多问题。而且随着用的框架越来越多,越来越复杂,定位问题的难度也随之上升。不知为什么,总觉得Vue 的断点调试相比于不使用框架的情况下更难用,这可能也是花了一个小时才找到问题产生的根源的原因。废话少说,以下便是问题产生的全过程以及查找问题的流程与逻辑梳理。1. 任务需求分析1.1 两个页面,两个组件任务需求涉及到两个页面和两个组件之间的恩怨...原创 2018-04-14 18:24:57 · 10488 阅读 · 0 评论 -
Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)
1. 实现效果以get方法向http://192.168.32.12:8080/users 发起请求、获取数据并进行处理this.apiGet('/users', {}) .then((res) => { console.log(res) }, (err) => { console.log(err) })2. 实现步骤一之配置域名前缀2.1...原创 2018-03-27 11:08:21 · 13053 阅读 · 10 评论 -
Vue: 批量更新操作实现与踩坑记录
1. 功能需求从后端获取到的房间列表包含房间号、房间类型、房间人数、性别四个参数。用户在列表中可以修改任意记录的任意参数,点击保存修改的时候将修改提交到服务器,实现批量更新。2. 组件树结构Page|--LocationText|--SideBar|--MainContent |--HeadLine |--RoomUnit(一个单元包含一条完整的记录...原创 2018-04-03 14:56:48 · 5141 阅读 · 0 评论 -
Vuex: 实现同级组件的简单通信
1. Vuex 是什么?Vuex 是专门为Vue 组件化思想带来的组件间通信问题提供的解决方案,主要解决以下两个问题:多个视图依赖于同一状态 来自不同视图的行为需要变更同一状态2. 核心概念State: 可以简单理解为Vue 维持的全局变量(状态)。 Getter: 获取State 中的状态的方法,可以在取出前对数据进行二次处理。 Mutation: 是改变State 中的状态...原创 2018-04-04 19:07:37 · 2401 阅读 · 0 评论 -
Vue-router:路由嵌套及index.js 文件拆分
1. Vue-routerVue-router 是为了配合Vue.js 构建单页面应用而存在的,在使用方面,我们需要做的是,将组件映射到路由,然后告诉Vue-router 在哪里渲染它们。具体教程请移步:https://router.vuejs.org/zh-cn/essentials/getting-started.html. 因为文档中对于嵌套路由的描述不是特别契合应用场景,所以这里重新梳理一...原创 2018-04-17 21:09:18 · 19716 阅读 · 0 评论 -
Vue:细粒度动态权限管理解决方案
权限管理是每个后台管理系统都需要面对的问题。细粒度动态权限管理更是一个不太好啃但是必须解决的硬需求。本文记录了一种基于角色的动态权限管理方法,实现方法不是很优雅,如果以后发现了更优雅的方法再来更新。该方法使用了vuex 作为辅助,所以如果还没有接触vuex 的请移步:Vuex: 实现同级组件的简单通信接下来主要从权限设置(设置角色权限)和权限限制(限制没有权限的人访问不到相应的内容)以及团队w...原创 2018-04-22 12:13:32 · 10279 阅读 · 5 评论 -
一个基于ES6 的Mvvm Demo
很多次面试都被问到双向绑定的原理,从一开始的啥都不知道到后来知道使用Object.defineProperty 劫持属性,使用发布订阅进行消息传递,再后来看了很多篇相关的文章和代码,依然应付不了面试官的追问。还是对其中的原理和实现了解的不透彻,所以最终决定自己亲手写一个。网上写mvvm 的博客有很多,都挺详细的也都贴了大段的代码,想了解的可以直接走下面的传送门,这篇文章的代码实现很大一部分都是参考...原创 2018-08-15 21:49:21 · 367 阅读 · 0 评论 -
Vue 下限制按钮点击频率的全局解决方案
一、场景分析一个很常见的场景:由于网络或者后台处理速度的原因,用户操作发出的请求无法得到快速响应,这个时候用户多半会以为没有点击成功或者因为没有耐心而去再次点击按钮。一般来说,这种重复请求会在后端进行过滤,但是只靠后端无法保证能够处理所有的意外情况,所以最好在前端也加以限制。那么问题来了,全站可能有几十上百个按钮,该如何进行限制?二、解决方案1. 方案一给每个按钮绑定一个变量,在按...原创 2018-12-17 20:49:20 · 8879 阅读 · 4 评论