奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 >

2018 我所了解的 Vue 知识大全

时间:2018-01-11 21:34来源:掘金 作者:admin
年初第一个 flag 就是掌握 vue ,哈哈 Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很多

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

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

 

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

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

Vue 的创建

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

 

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

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

指令


下面是我用上述指令写的一个小案例,刚好所有的指令都上了用场

 

详细请看 demo 源码

自定义指令

 

在代码的实例中

查看代码源

 

Vue API

 

Vue 常用选项


 

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

Vue 组件

 

生命周期钩子

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

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


配合着实例代码效果更佳查看代码源

 


生命周期钩子的函数简单说就是八个函数


 

如何让 Vue 书写更佳优美?


详细 style-guide 请参看官网 进一步学习请参考官方文档

 

部分资源来自网络


作者:sunseekers 

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-22 10:04
栏目列表
推荐内容

关注奔三路小程序,方便你我他