【掘金小册·Vue组件精讲-20】写在最后
亲爱的读者,到这里本小册就要结束了,你是否从中学习到了属于你的知识呢?我们来回顾一下小册的内容吧。 Vue.js 在开发独立组件时,由于它的特殊性,无法使用 Vuex、Bus 这样的第三方插件来做组件通信,因此小册提到了 3 种组件间的通信方法,都是支持跨多级的: provide / inject:由父 ...
【掘金小册·Vue组件精讲-19】拓展:如何做好一个开源项目(下篇)
持续运营 项目有了一定的规模和进展后,需要持续运营,让更多的人知道和使用。运营并不是个技术活,对于程序员来说,还是或缺的技能。最简单的运营手段,就是在一些技术社区分享“软文”,iView 在早期就是这样做的,还总结出了一个 “500 star 定律”,也就是说,每一次分享文章,差不多能在 GitHub 带来 500 个 star。star 对于 ...
【掘金小册·Vue组件精讲-18】拓展:如何做好一个开源项目(上篇)
iView 的故事 毕业四年以来,我一直觉得自己是一个很幸运的人,幸运参与过创业,幸运一路有大牛带,幸运开源了 iView 项目。 2016 年初,我还是一名普通的前端工程师,那时候还是 Vue.js 1.x 的时代,知名度也远不如现在,在大部分人眼中,Vue.js 就是一个轻量级的 Angular。 我 ...
【掘金小册·Vue组件精讲-17】拓展:Vue.js 面试、常见问题答疑
在过去的很多面试中,我会经常问候选人一些关于 Vue.js 的问题。这些问题从题面来看很简单,但仔细想又不是那么简单,不同的人,会答出不同的层次,从而更好地了解一个人对 Vue.js 的理解程度。 题目 v-show 与 v-if 区别 第一题应该是最简单的,提这个问题,也是想让候选人不那么紧张,因为但凡用过 Vue.j ...
【掘金小册·Vue组件精讲-16】拓展:Vue.js 容易忽略的 API 详解
前面的 15 小节已经覆盖了 Vue.js 组件的绝大部分内容,但还是有一些 API 容易忽略。本节则对 Vue.js 的一些重要且易忽略的 API 进行详细介绍。 nextTick nextTick 是 Vue.js 提供的一个函数,并非浏览器内置。nextTick 函数接收一个回调函数 cb,在下一个 DOM 更新循环之 ...
【掘金小册·Vue组件精讲-15】实战 7:树形控件——Tree
本小节基于 Vue.js 的递归组件知识,来开发一个常见的树形控件—Tree。 Tree 组件是递归类组件的典型代表,它常用于文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。 本节要实现的 Tree 组件具有以下功能: ...
【掘金小册·Vue组件精讲-14】递归组件与动态组件
递归组件 递归组件就是指组件在模板中调用自己,开启递归组件的必要条件,就是在组件中设置一个 name 选项。比如下面的示例: <template> <div> <my-component></my-component> </div> </template> < ...
【掘金小册·Vue组件精讲-13】实战 6:可用 slot-scope 自定义列的表格组件——Table
上一节,我们基于 Render 函数实现了在表格中自定义列模板的组件 Table,虽说 Render 函数能够完全发挥 JavaScript 的编程能力,实现几乎所有的自定义工作,但本质上,使用者写的是一个庞大的 JS 对象,它不具备 DOM 结构,可读性和可维护性都比较差。对于大部分写 Vue.js 的开发者来说,更倾向于使用 templ ...
【掘金小册·Vue组件精讲-12】实战 5:可用 Render 自定义列的表格组件——Table
表格组件 Table 是中后台产品中最常用的组件之一,用于展示大量结构化的数据。大多数组件库都提供了表格组件,比如 iView,功能也是非常强大。正规的表格,是由 <table>、<thead>、<tbody>、<tr>、<th>、<td> 这些标签组成,一般分为表头 ...
【掘金小册·Vue组件精讲-11】更灵活的组件:Render 函数与 Functional Render
Vue.js 2.x 与 Vue.js 1.x 最大的区别就在于 2.x 使用了 Virtual DOM(虚拟 DOM)来更新 DOM 节点,提升渲染性能。 一般来说,我们写 Vue.js 组件,模板都是写在 <template> 内的,但它并不是最终呈现的内容,template 只是一种对开发者友好的语法,能够一眼 ...