在学习 element ui 时，发现组件的过渡用的是 Vue.js 提供的 标签。这里来好好认识下 vue 的过渡到底是如何工作的。 简介废话不多说，详细的内容请看官方文档，里面有详细的分析和例子够你看懂了（就是费时间~）。简单说说我对 vue 过渡的理解。经过一下午的折腾，总结出以下几点： 有四种情况会触发过渡效果：1 v-if2 v-show3 动态组件（如 component 的 is 属性）4 组件根节点发生变化（如 v-if v-else 切换根节点） 过渡效果 CSS 命名规律：（name 属性，默认为 v）-（行为：enter、leave、appear、move）-（阶 ...

消息提示行为是开发中非常常见的功能，Element 为我们提供了非常好用和美观的消息提示组件。这里就简单学习下 Notice 组件的 CSS 和代码逻辑。 简介Notice 包括了五类组件： Alert 用于页面中展示重要的提示信息。 Loading 加载数据时显示动效。 Message 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 MessageBox 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。 Notification 悬浮出现在页面角落，显示全局的通知提醒消息。 本文中不同角度来学习这 ...

闭包、this 和箭头函数是三个常见面试题，也是 js 进阶之路上的拦路虎。这次还用实践熟悉这三个问题。 this 实践demo写了一段代码来验证 this 的指向。console.log('全局环境的this', this)function test (){ console.log('方法中的 this', this) function child(){ console.log('方法中的方法的 this', this) } child()}test()var obj = { name: "o ...

在 element ui 中最让我好奇的组件之一就是 color-picker 着色器组件。这里还是通过几个问题来学习一下如何实现着色器的。 源码地址在前几篇博客中说起过 element 组件都位于 package 目录下，那么本次学习的颜色选择器就是在 package/color-picker 目录中。简单说下目录结构： src 源码文件夹 components 组件文件夹 alpha-slider.vue 透明度选择器 hue-slider.vue 色调选择器 picker-dropdown.vue 下拉界面（几个选择器的组合） sv-panel 颜色选择器 color.js 颜 ...

对于 CSS，由于过度依赖美工导致 CSS 很弱，所以这次好好学习 CSS相关东西。 盒子模型盒子模型是由 margin、border、padding 和 content 属性组成的。 margin 就是 border 外的透明边距区域。如 margin: 10px;。 border 就是边框属性，可以定义边框的宽度、样式和颜色。如 border: 5px solid red。 padding 就是 border 内的透明填充边距。如 padding: 10px;。 content 也就是容器内要显示内容的区域。 盒子模型唯一要注意的就是边框的界定问题。IE 的 width 和 hei ...

在框架盛行的年代，还有多少人记得在没有框架时我们如何控制 dom 的行为呢？作者本人也一直忽视了这方面的学习，直到面试问到这个问题，下决心好好认识认识这个 dom api。 node、document 和 element在学习 dom api 时对这三者还是挺混乱的。理一下他们之间的关系。 nodenode 是一个接口，像 document 和 element 都是继承这个接口的。这个接口提供了 dom 节点的获取和操作方法。node 有许多类型，下图列出了一些 node 的类型码。由图可见 element 的类型码为 1，文本节点类型码为 3，注释节点类型码为 8，document 的类 ...

简单花了一些时间看了几篇前端优化的文章，文章作者写的都很详细。从中学到了不少东西。在这里就不班门弄斧的多讲了。只是在几篇文章的基础上一个小小的总结。 一些性能优化资料 Best Practices for Speeding Up Your Web Site 前端性能优化相关 2017前端性能优化清单 前端性能优化指南 动物书：《高性能JavaScript》、《高性能网站建设进阶指南》、《高性能网站建设指南》 优化方法总结参照着这些资料，总结一下一些优化的知识点。 减少 DOM 和 JavaScript 的交互。避免重复读写，而要先遍历读再遍历写。 使用 requireAnimation ...

select 选择器是个比较复杂的组件了，通过不同的配置可以有多种用法。有必要单独学习学习。 整体结构以下是 select 的 template 结构，已去掉了一部分代码便于查看整体结构：<template> <div> <!-- 多选 --> <div v-if="multiple" ref="tags"> <!-- collapse tags 多选时是否将选中值按文字的形式展示 --> <span v-if="collapseTags && selec ...

作为一个前端，了解下 HTTP 协议是很有必要的。 先说个题外话，从《跃迁》一书中提到，高手获取信息的方式 —— 只获取一手、二手资料。我在学习 HTTP 协议的时候犯了的毛病是 —— 百度了一堆 HTTP 相关文章，内容不一、质量参差不齐，看得云里雾里。最后干脆去Google查 HTTP，发现在 MDN 上有详细的 HTTP 相关资料，于是抛弃三手、四手资料，直接去看 MDN 上的内容。所以学习知识，必须得先认清资料的来源和专业程度，在知识源头学习可以提高学习的效率和准确性。 简介 HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行 ...

这算是 element 源码学习的番外篇，因为 element 中使用了大量 sass 来写样式。而 UI 框架的核心其实就是样式。所以，抽空把 sass 学了一遍，写了些小 demo 实践，总结成此文。 SASS 安装和调试简单说下 sass 如何安装和编译调试。参照官网，需要使用 gem 来安装 sass。如果是windows用户没有 gem 需要先安装 Ruby$ gem install sass 如果有权限问题，需要加上 sudo 。$ sudo gem install sass 最后，通过查询 sass 版本号验证是否安装成功。$ sass -v 编译命令很简单，在项目目录下编译 ...