Vue 近阶段学习总结

引言

随着学习vue2.0的脚步加快,忽然之间感受本身的知识点有一些遗漏,为了巩固所学知识,同时也为了查漏补缺,
以根据本身学习和作项目的状况整理了我我的的vue技术栈,知识点梳理以下:html

开发环境搭建

老话说的好‘工欲善其事,必先利其器’,在咱们程序员的世界里要想开发出一款优秀的项目,一个好的开发环境是必需的。
vue的开发环境是node.js和git的结合,尤为是node.js如今更是成为了咱们前端开发者在面试时的加分项,甚者是必须项,今天的主角是vue,因此node.js就很少讲了。不过能够为喜好他的童鞋提供几篇高质量的文章前端

环境搭建:vue

Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)node

Vue2.0史上最全入坑教程(中)—— 脚手架代码详解jquery

如下两篇是一个实战项目,须要的童鞋能够看一下;webpack

Vue2.0史上最全入坑教程(下)—— 实战案例ios

Vue2.0史上最全入坑教程(完)—— 实战案例git

node.js:程序员

node.js - 收藏集 - 掘金(其中有几十篇高质量文章)github

注:在学习开始以前,先看一篇文章,做为vue学习的引子咱们来看看尤大神谈vue.js

知识点整理

  1. vue-cli
  2. vue指令
  3. vue组件系统
  4. vue-router
  5. vuex
  6. vue插件
  7. axios
  8. webpack
  9. vue前端框架(muse-ui, element-ui)
  10. sass,less, stylus

vue的其余特性

1.异步批量的dom更新:避免一个数据产生多余的dom操做
2.动画系统:使定义animation,transition变得更加单的同时还可使用钩子函数对动画进行控制
3.可扩展性:自定义指令,过滤器,和组件,还有mixins的能够多个组件中复用共同的特性

知识点1 (vue-cli)

vue-cli是咱们建立vue项目的vue依赖环境,而vue-cli的依赖于的node.js,由于vue-cli是node.js的一个插件,
而开发一个项目咱们都会牵涉到项目版本的管理,因此须要一个版本控制系统,而git恰好是这样一个好用的工具,
在项目的开发和发布过程当中须要一个管理工具这个管理工具是webpack,如今很流行的一款工具。

知识点2 (vue指令)

在非MVVM开发过程当中咱们使用的jquery,zepto.js, 咱们使用它最多的是对dom的操做,一部分是ajax请求;
而在MVVM项目中如angular和vue,咱们对dom的操做使用的是指令

补充:在非MVVM项目中咱们采用的模块化开发使用的是sea.js,require.js,对业务模块进行管理;
而在MVVM项目中咱们咱们的模块化在vue中的体现就是组件系统

知识点3 (vue组件系统)

组件vue中的核心概念,几乎全部的应用都是围绕着组件来展开的。在vue的设计中将组件做为基础元素,由它组成了整个应用的布局。
所以整个项目的架构看起来就像是一个组件树

知识点4 (vue-router)

若是按照尤大神说组件系统是vue的核心的话,那么那么若是将组件在形式上链接起来就须要vue-router,为何说是形式上呢?
其一由于一个项目不可能在一个页面上展示全部的业务,这样的应用使用起来不方便,也不利于维护,因此须要将项目分为若干个页面;
另外一点是,vue组件间的通讯有本身的机制,就是props,event up, vue空实例中央总线。

vue官方文档

知识点5 (vuex)

vuex其实能够理解为一个解决方案,在通常的中小项目由于应用的业务比较单一,业务逻辑也不复杂,不一样逻辑间的数据传递使用
props,event up,外加vue空实例中央总线就能够知足,可是大型项目有业务繁多,业务逻辑也比较复杂,因此整个项目的组件会达到数千个,
甚至上万个。这样只凭上面三板斧,通常的程序员没法驾驭这种级别的项目,而vuex正是解决这种状况的官方方案。

知识点6 (vue插件)

有的人认为vue有了组件系统为何还须要插件这个东西,其实也没什么,就好比咱们有了双手后为何还要使用工具同样,解放生产力吗?

知识点7 (axios)

axio原文

axios 官方文档翻译已经很详尽了,若是想快速上手下面有一篇文章

www.jianshu.com/p/8e5fb763c…

知识点8 (webpack)

文章:

系列一: youngwind的github blog项目

系列二: arry_huang的segmentdefault中的系列文章

知识点9 (vue ui组件)

muse-ui(查看开发文档)

element-ui(查看开发文档)

知识点10 (sass, less, stylus)

sass: 阮一峰老师的sass用法指南

stylus: 张鑫旭的使用指南

其余

知道了以上的内容咱们能够开发出更优秀的项目,可是这有一个前提,咱们还须要了解其余的vue知识,这包括

全局配置(待学习)
silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip

全局API
Vue.extend
Vue.nextTick
Vue.set
Vue.delete
Vue.directive
Vue.mixin
Vue.compile
Vue.filter
Vue.component
Vue.use
Vue.version

vue/选项
选项包括:
dom,
数据(data,props,propsData,computed,method,watch),
生命周期钩子,
资源(组件,指令,过滤器),
组合(parent,mixins,extends,provide/inject),
其它
vue的实例

官网提供的其余经常使用组件

transition
slot
keep-alive

现阶段所接触和实现过的大体就是以上的内容,但愿能够给初学的同窗启发

相关文章
相关标签/搜索