小白入门学习vue和vue实例,vue总结
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css vue Jan 9, 2018
font vue案例 Jan 4, 2018
img delect Sep 4, 2018
inheritAttris inheritAttris May 2, 2018
js vue Jan 9, 2018
onlineEdu login Feb 27, 2018
Examples.html vue Jan 9, 2018
Model.html Model Feb 27, 2018
README.md vue Feb 26, 2018
README(一 ).md
axios.html img Jan 10, 2018
bus.html bus Feb 26, 2018
directive.html vue文档 Jan 2, 2018
directive1.html add Jan 21, 2018
dome1.html vue Jan 9, 2018
dome2.html
dynamicComponents.html Add files via upload May 25, 2018
emit.html vue案例 Jan 4, 2018
emit2.html vue Jan 9, 2018
inheritAttrs inheritAttris+$attrs的数据传递 Apr 28, 2018
is.html vue案例 Jan 4, 2018
mounted.html vue案例 Jan 4, 2018
register.html vue案例 Jan 4, 2018
routerTransform.html vue Jan 9, 2018
searchCursor.html vue案例 Jan 4, 2018
slot.html vue Jan 9, 2018
swiper.html vue案例 Jan 4, 2018
this.$router.html this.$router 和 $route 的区别 Feb 17, 2018
v-for.html vue-router Jan 27, 2018
vue-router.html vue Jan 9, 2018
vue-router.md vue-router.md Jan 21, 2018
vue-router2.html
vue-routername.html add Jan 21, 2018
vuex.html vuex Jan 12, 2018
watch.html add Jan 21, 2018

README.md

2018 我所了解的 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 的时候,在 Vue 实例中添加的比较多的; directives 和 components 在 Vue 实例中为创建的 局部 自定义指令和注册组件,Vue.directive() 和 Vue.component() 则是注册全局

生命周期钩子

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

在QQ群里看到一张生命周期图,我觉得写的特别好,感谢总结这张图的朋友 配合着实例代码效果更佳查看代码源 生命周期钩子的函数简单说就是八个函数

如何让 Vue 书写更佳优美?

详细 style-guide 请参看官网