不管选择什么框架,除了对基础的知识有一定的了解掌握,还应该对 ES6 有一定的了解;
![](https://img.haomeiwen.com/i15327675/b9ef9f9a442633ae.png)
这就是我脑海中的Vue 知识体系;
一句话概况了Vue通过尽可能简单的API 实现响应的数据绑定和组合的视图组件;
一个简单的Vue 实例只需要四步即可
![](https://img.haomeiwen.com/i15327675/807111e49df5fc9f.png)
我们的学习目的肯定不止于创建简单的Vue 实例;而是用它去实现更加多变的功能需求;那我们需要进一步去学习 Vue-router 和 Vuex 以及 Vue-cli;
先说说基础的Vue 吧,在创建了一个简单 Vue 实例之后,我们是否还能在实例中添加更加完善的数据选项,去完成我们多变的功能需求;答案是肯定能的;
![](https://img.haomeiwen.com/i15327675/ec1f7595fbb4b195.png)
![](https://img.haomeiwen.com/i15327675/af75a85c0167a305.png)
![](https://img.haomeiwen.com/i15327675/765bf7abbf7d9d4a.png)
![](https://img.haomeiwen.com/i15327675/0652f5f2deca7e7e.png)
![](https://img.haomeiwen.com/i15327675/2c3fc5c3d27b82cc.png)
这就是我在学习Vue 的时候,在 Vue 实例中添加的比较多的; directives 和 components 在 Vue 实例中为创建的 局部 自定义指令和注册组件,Vue.directive() 和 Vue.component() 则是注册全局
每个Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
在QQ群里看到一张生命周期图,我觉得写的特别好,感谢总结这张图的朋友。
![](https://img.haomeiwen.com/i15327675/5ea6a1c292258644.png)
配合着实例代码效果更佳查看代码源
![](https://img.haomeiwen.com/i15327675/78655250202e34e6.png)
生命周期钩子的函数简单说就是八个函数
![](https://img.haomeiwen.com/i15327675/ddd0be59e84ca6c0.png)
![](https://img.haomeiwen.com/i15327675/d74888bdae61bb16.png)
学习Vue过程中,感觉此文帮助很大,抄载下来以便学习。
本文抄载自GitHub,原文地址:传送门
网友评论