三年前,我开始接触 Vue.js 框架,当时就被它的轻量、组件化和友好的 API 所吸引。与此同时,我也开源了 iView 项目。三年的磨(cǎi )砺(kēng),沉淀了不少关于 Vue.js 组件的经验,于是乎,将 Vue.js 最精髓的内容,编写了一本掘金小册 《Vue.js组件精讲》 。本小册的内容也许不会让你的技术一夜间突飞猛进,但绝对使你醍醐灌顶。
全网的 Vue.js 文章已经足够多了,不妨来看看这本不一样的小册吧。
👉👉 小册购买地址 👈👈
↓↓↓↓↓以下内容摘自我的掘金小册↓↓↓↓↓
小册介绍
![](https://i-blog.csdnimg.cn/blog_migrate/c5b36de6d32592384e6c86aec9bfeb72.png)
Vue.js 无疑是前端最热门的框架之一,而 Vue.js 最精髓的,正是它的组件。写一个 Vue 工程,也就是在写一个个的组件。换言之,学好了 Vue.js 的组件,也就能很好的驾驭 Vue.js 框架和千变万化的复杂业务场景。
如今,关于 Vue.js 的教程已经非常丰富,大部分开发者阅读文档后,都可以很快上手 Vue.js 的开发,而写好每一个组件,成了当前众多开发者的一个难题。
Vue.js 的组件和组件化在使用中有非常多的技巧和最佳实践,本小册则针对 Vue.js 最核心的部分—组件,来深入讲解,带着完整示例来解决一个个与组件相关的疑难点和知识点。
同时,作为 Vue.js 知名组件库 iView 的作者,深入开发超过 50 个极其复杂的通用组件,包含了 Vue.js 组件的各个场景,对 Vue.js 的组件开发,有着独树一帜的见解和经验。
作者介绍
![](https://i-blog.csdnimg.cn/blog_migrate/6f299a90fea8c38aaf32b55789bfd57b.png)
Aresn,基于 Vue.js 的开源 UI 组件库 — iView 的作者(GitHub 超过 18000 星)。现担任大数据公司 TalkingData 前端架构师。畅销书籍《Vue.js实战》的作者(Vue.js 作者尤雨溪作序,销量超 3 万册)。在掘金发表众多关于 Vue.js 的技术文章,获得点赞 7000+,阅读 24 万+。更多介绍可以阅读文章 《2016我的心路历程:从 Vue 到 Webpack 到 iView》。
你会学到什么?
- 了解 Vue.js 组件开发的精华
- Vue.js 组件知识全覆盖
- 掌握多种 Vue.js 组件开发的模式
- 独立组件不依赖 Vuex 和 Bus 情况下,各种跨级通信手段(provide / inject、broadcast / dispatch、findComponents 系列)
- 7 个完整的 Vue.js 组件示例
- 如何做好一个开源项目
- Vue.js 容易忽略的 API 详解
- Vue.js 面试、常见问题答疑
小册的内容
因为本小册是围绕 Vue.js 组件展开的,所以第二节会讲解 Vue.js 组件的三个 API:prop
、event
、slot
,当然,如果你已经开发过一些独立组件,完全可以跳过这节内容。
3 - 7 小节会介绍组件间通信的一些方法和黑科技,一部分是 Vue.js 内置的,一部分是自行实现的,在实际开发中,会非常实用。同时也利用这些方法完成了两个具体的实战案例:
- 具有数据校验功能的表单组件 —— Form;
- 组合多选框组件 —— CheckboxGroup & Checkbox。
本小册都会以这种核心科技 + 对应实战的形式展开。
8 - 10 小节介绍 Vue 的构造器 extend 和手动挂载组件 $mount 的用法及案例。Vue.js 除了我们正常 new Vue()
外,还可以手动挂载的,这 3 节将介绍手动挂载一个 Vue 组件的使用场景。其中涉及到两个案例:
- 动态渲染 .vue 文件的组件 —— Display;
- 全局通知组件 —— $Alert。
Display 组件用于将 .vue
文件渲染出来,线上的案例是 iView Run,它不需要你重新编译项目,就可以渲染一个标准的 Vue.js 组件。
$Alert 是全局的通知组件,它的调用方法不同于常规组件。常规组件使用方法形如:
<template>
<Alert content="通知内容" :duration="3"></Alert>
</template>
<script>
import Alert from '../components/alert.vue';
export default {
components: { Alert }
}
</script>
而 $Alert
的调用更接近 JS 语法:
export default {
methods: {
showMessage () {
this.$Alert({
content: '通知内容',
duration: 3
});
}
}
}
虽然与常规 Vue 组件调用方式不同,但底层仍然由 Vue 组件构成和维护。
11 - 12 小节介绍 Render 函数与 Functional Render,并完成一个能够渲染自定义列的 Table 组件。Render 函数也是 Vue.js 组件重要的一部分,只不过在大多数业务中不常使用。本小节会介绍它的使用场景。
13 小节介绍作用域 slot(slot-scope),并基于这种方法同样实现 Table 组件。slot 用的很多,但 slot-scope 在业务中并不常用,但在一些特定场景下,比如组件内部有循环体时,会非常实用。
14 - 15 小节介绍递归组件,并完成树形控件 —— Tree。
16 - 19 小节是综合拓展,会着重讲解 Vue.js 容易忽略却很重要的 API,以及对 Vue.js 面试题的详细分析。除此之外,还会总结笔者在两年的 iView 开源经历中的经验,除了技术细节外,还包括开源项目的持续性发展、推广等。
准备出发
那么,请准备好一台电脑和一杯咖啡,一起来探索 Vue.js 的精髓吧。
👉👉 小册购买地址 👈👈