124

2018 我所了解的 Vue 知识大全

 6 years ago
source link: https://juejin.im/post/5a4b78226fb9a0451a76c1a1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

2018 我所了解的 Vue 知识大全(一)

2018 我所了解的 Vue 知识大全(一)

2018年01月03日 02:14 ·  阅读 20149
2018 我所了解的 Vue 知识大全(一)

年初第一个 flag 就是掌握 vue ,哈哈

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很多;不管选择什么框架,除了对基础的知识有一定的了解掌握,还应该对 ES6 有一定的了解;

160b6ce459a28144~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

这就是我脑海中的 Vue 知识体系;

一句话概况了 Vue 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件;

Vue 的创建

一个简单的 Vue 实例只需要四步即可

160b6ce8b0cd7561~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

我们的学习目的肯定不止于创建简单的 Vue 实例;而是用它去实现更加多变的功能需求;那我们需要进一步去学习 Vue-router 和 Vuex 以及 Vue-cli;

先说说基础的 Vue 吧,在创建了一个简单 Vue 实例之后,我们是否还能在实例中添加更加完善的数据选项,去完成我们多变的功能需求;答案是肯定能的;

160b6d01006d77e2~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image
下面是我用上述指令写的一个小案例,刚好所有的指令都上了用场

160b6d0bb86b9466~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

详细请看 demo 源码

自定义指令

160b6d26a8fdad52~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

在代码的实例中

160b6d2db4d44c30~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image
查看代码源

Vue API

160b6d4518bdf686~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

Vue 常用选项

160b6cee7c28ad9f~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

这就是我在学习 Vue 的时候,在 Vue 实例中添加的比较多的; directives 和 components 在 Vue 实例中为创建的 局部 自定义指令和注册组件,Vue.directive() 和 Vue.component() 则是注册全局

Vue 组件

160b6d4e3bf96776~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

生命周期钩子

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。

在 QQ 群里看到一张生命周期图,我觉得写的特别好,感谢总结这张图的朋友

160b6d545e5aefa2~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image
配合着实例代码效果更佳查看代码源

160b6d5fb581c3c5~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image
生命周期钩子的函数简单说就是八个函数

160b6d6cbfd637c6~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image

如何让 Vue 书写更佳优美?

160b6d64238b93b5~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image
详细 style-guide 请参看官网 进一步学习请参考官方文档

部分资源来自网络;

欢迎继续关注,后续持续更新补全


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK