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

現階段所接觸和實現過的大體就是以上的內容,但願能夠給初學的同窗啓發

相關文章
相關標籤/搜索