随笔分类 - Vue.js
摘要：众所周知，在组件式开发中，最大的痛点就在于组件之间的通信。在 Vue 中，Vue 提供了各种各样的组件通信方式，从基础的 props/$emit 到用于兄弟组件通信的 EventBus，再到用于全局数据管理的 Vuex。 在这么多的组件通信方式中，provide/inject 显得十分阿卡林（毫无存
阅读全文
摘要：聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是： Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方
阅读全文
摘要：ElementUI 作为当前运用的最广的 Vue PC 端组件库，很多 Vue 组件库的架构都是参照 ElementUI 做的。作为一个有梦想的前端（咸鱼），当然需要好好学习一番这套比较成熟的架构。 目录结构解析 首先，我们先来看看 ElementUI 的目录结构，总体来说，ElementUI 的目
阅读全文
摘要：Layout 布局 row 布局组件中的父组件，用于控制子组件。很简单的一个布局标签，主要通过 justify 和 align 控制子元素的对齐方式，使用 render 函数通过传入的 tag 属性控制生成的标签。 在这里推荐学习下 render 函数和 JSX 的写法，因为之后比较复杂的组件都是通
阅读全文
摘要：由于之前的 Vue 项目打包成果物一直是嵌入集成平台中，所以一直没有关注过项目的 title。直到最近，突然有个需求，要求点击按钮在集成平台外新开一个页面，此时我才发现，原来我的项目的 title 一直是万年不变的 vue project 。理所应当的，这个问题被测试爸爸提了一个大大的缺陷。 犯了错
阅读全文
摘要：在 开发中，组件通信一直是一大痛点。 当项目是很简单的 或者多入口项目时，可以靠着 自带的 进行组件通信；规模再大一些，可以搭配使用 总线进行兄弟组件通信；项目再大一些，出现更复杂的组件关系时，复杂的组件通信可以让你写得怀疑人生。 万幸的是， 官方出品了 ，通过全局式的状态管理，解决了这一痛点。 虽
阅读全文
摘要：力有不逮的对象 众所周知，在 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。 这是什么原因？ 原因在于： 的响应式系统是基于 这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是
阅读全文
摘要：Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能，在Vue内部实现中也经常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。 那么，我们就先来看看nextTick是什么。 nextTick功能 看看官方文档的描述： 在下
阅读全文
摘要：在工作中，我们经常会写出这种代码： 即，需要引入公共文件，但是公共文件的文件路径里当前文件很远，那么就会形成上面示例中的那种路径很长的情况。 而因为文件目录是约定俗成的，不可轻易更改，无法修改相对路径。那么该怎么办呢？ 大家都知道，Vue中的js可以通过配置webpack别名（alias）来避免一长
阅读全文
摘要：今天在初始化项目中，出现了一个奇怪的情况：明明路径是对的，但是编译的时候，一直报“This dependency was not found”的错。 代码如下： 控制台一直报错，表示无法找到 ，然而，路径是通过ide补全填写的，不可能出现错误，那又是为什么？ 多次测试发现，Vue中的引入文件时，需要
阅读全文
摘要：Prop 基本用法 Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 tips：由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，驼峰写法需要转化为短横线写法。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为。 P
阅读全文
摘要：何为scoped？ 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了s
阅读全文