給你一個不學(xué) Vue 的理由
來源：原創(chuàng) 時間：2017-11-15 瀏覽：0 次
什么是 Vue
Vue 是尤雨溪一個人的項目，是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計。Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用程序提供驅(qū)動。
Vue 通過 Api 來進行統(tǒng)一性的管理，可以讓整個團隊的代碼都用統(tǒng)一的風(fēng)格和方法標(biāo)準(zhǔn)去運作，而且對組件系統(tǒng)也有強大的支持，在封裝組件時通過 Props 和 Event 兩個標(biāo)準(zhǔn)性的原則去調(diào)用，可以讓開發(fā)更加得心應(yīng)手。
請給一個不學(xué) Vue 的理由
如果非要讓我說一個不學(xué) Vue 的理由，可能是它的寫法太方便了……你也可能覺得它借鑒的太多，沒有亮眼的地方，那我只能說同樣實現(xiàn)的東西就是那么方便，簡潔的教程和 Api 文檔接入整個開發(fā)體系，相當(dāng)符合中國市場的開發(fā)——業(yè)務(wù)變動大、版本要求上線快、需求改動頻繁、學(xué)習(xí)成本低……相比之下，同樣有著高效的功能，集成了組件系統(tǒng)和 Virtual DOM。
閱讀這一系列課程你可以學(xué)到什么？
掌握 Vue 主要就是正確理解教程和深入掌握 Api 的用法，不但要會用，更重要的是學(xué)會對癥下藥，在任何一種場景下使用最簡潔、最正確、最合理的代碼才是關(guān)鍵。只有對 Api 和教程有了一定程度的項目實戰(zhàn)和組件庫實戰(zhàn)經(jīng)驗才能把它用的游刃有余。
在 Vue2.0 起步的時候我在掘金上進行了 Vue 課程的一系列套課的講解，從基礎(chǔ)到 Vuex，最后到組件庫的實戰(zhàn)都進行了簡單的講解。期間也經(jīng)過大量的項目實戰(zhàn)和組件庫的實踐，通過一步步總結(jié)，對 Api 文檔的深入理解和測試性模擬，總結(jié)了一些真實場景的正確用法和常用案例需求，讓你在開發(fā)中少走彎路，少刨坑。
掘金的個人主頁
除了 Vue 還能學(xué)到什么
在 Vue 開發(fā)中，我們不但要準(zhǔn)確的運用 Api，還要結(jié)合 es6 的新語法，用更深更強大的新特性來組織代碼，這同樣也是下一代 Javascript 的標(biāo)準(zhǔn)：
let 和 const 命令
變量的解構(gòu)賦值
字符串的擴展
函數(shù)的擴展
數(shù)組的擴展
對象的擴展
Promise 對象
async 函數(shù)
在此次教程中將會展示 es6 大量的新語法進行，只有不斷的進行嘗試，才能有不同的成效。
本課程的優(yōu)勢
如果你想快速上手進行一個特別面向 C 端的 Mobile 產(chǎn)品開發(fā)，甚至是一個中大型的項目開發(fā)，如果你能完全閱讀完所有課程，并且跟著一步步實踐，那么你同樣也能給自己的 C 端產(chǎn)品設(shè)計一套屬于自己的組件庫，畢竟通用型的組件庫仍然具備面對市場競爭需求的獨特性。
本課程分享的內(nèi)容是 Vue 的最新版本，可以說這是一套獨一無二的教程，不但會結(jié)合官方教程和 Api，最主要的是告訴大家在什么場景用什么方式組織代碼，避開不必要的坑。
數(shù)據(jù)驅(qū)動架構(gòu)體系永遠離不開組件模式。在這里我會給大家分享級別組件的劃分內(nèi)部原則性，在自己打造組件庫的同時，也大量借鑒了各大廠商團隊的優(yōu)秀組件寫法，進行比對優(yōu)缺點，總結(jié)相應(yīng)的理論。
課程大綱如下
01 開啟 Vue 之旅
02 靈活的 data，死板的 props
03 $on， $emit， v-on 三者關(guān)系
04 .sync 王者回歸，v-model 使命將至
05 $attrs，$listeners 深組件通信
06 智能組件與木偶組件的正確通信
07 你不知道的中央事件通信
本課設(shè)計想法
當(dāng)我在掘金寫下第一篇文章的時候，雖然只是很基礎(chǔ)的部分，但文章在兩天內(nèi)獲得了大量關(guān)注，這充分顯示出了中國市場的開發(fā)者們對 Vue 的渴望程度。與此同時，我也收集到了一些批評意見，對于讀者的反饋能及時做出響應(yīng)才更能體現(xiàn)出一個課程的價值。
不是能寫出源碼的教程就是對你有幫助，也并不是寫的很基礎(chǔ)就對你沒有幫助。不是每個人都能當(dāng)大上牛、進入大公司的研發(fā)團隊，大多數(shù)程序員都是面對業(yè)務(wù)層面的開發(fā)。因此如何在市場上有立足之地，能快速接手項目，這才是大部分人應(yīng)該最需要發(fā)力的地方。
學(xué)習(xí)本課程你需要做些什么？
學(xué)習(xí)本課程的同學(xué)需要對 Html 和 JavaScript 的基礎(chǔ)知識有一定了解，理解 es6 基礎(chǔ)新特性，了解 npm 和 node 的基本用法。
推薦：
阮一峰老師的es6入門
別浪費時間看別的了，如果你能靜下來看完整本書，比任何 es6 其它書籍都好，為什么呢？平民化，就像 Vue 一樣，很容易讓人理解。
同時在學(xué)習(xí)本教程的時候，盡量跑一遍 Vue 中文官網(wǎng)結(jié)合 Api 你能看懂的示例。
https://cn.vuejs.org/
可能有些 Api 或者教程只有一個簡單的解釋，還特別官方話，沒關(guān)系，跟著我一步一步敲遍所有的 Demo。
開啟 Vue 之旅
在整理好心情開始旅程之時，我們往往都會帶上許多必備工具，同樣 Vue 在面向開源之時，周邊的身態(tài)也向其靠攏。
vue-devtool
以往 Dom 操作的時候，我們都是通過 dubger 斷點來進行錯點查找和基礎(chǔ)數(shù)據(jù)驅(qū)動，dubger 已經(jīng)派不上什么用場了，只有通過觀察數(shù)據(jù)的變化，才能準(zhǔn)確的定位到錯識變化的數(shù)據(jù)和是否執(zhí)行了需要的事件。
github下載地址
有 git 的同學(xué)直接 git clone
下載安成之后打開 cmd 進入 vue-devtools 文件夾把依賴裝好 npm install 之后再進行 npm run build
然后打開 shells>chrome>src>manifest.json 把里面的"persistent": false 改為 true
一切都萬事具備了，打開 Chrome
打開里面的設(shè)置 > 點擊擴展程序 > 點擊開發(fā)者模式
再點擊加載已解壓的擴展程序，然后把shells>chrome這個文件夾放入就ok了
再打開一個用 Vue 寫的網(wǎng)頁，打開Chrom調(diào)試工具你就會發(fā)現(xiàn)——大功告成！
vue-cli
Vue.js提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項目：
進入 Node.js 官網(wǎng)，下載 Node.js 安裝包；
為了下載安裝包快速一點，走 淘寶源 進入 cli 終端；
運行npm install -g cnpm --registry=https://registry.npm.taobao.org
全局安裝 vue-cli
$ npm install --global vue-cli
創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
打開文件夾，本次教程的示例全部通過
Components 文件夾來定義單個組件，進行 SPA 的應(yīng)用開發(fā)，用單 .vue 文件也更加直觀，一個文夾可能是一個 Page，也可能是一個 Component；
在開啟 Vue 的旅程之時，拿 todo-list 嘗試一下它的神奇魔法，通過 Vue 實例和模板進行數(shù)據(jù)與行為的交互綁定；
實例的每個選項如何與定義的模板值進行一一對應(yīng)，通過數(shù)據(jù)驅(qū)動、事件綁定，來輕松高效的實現(xiàn)一個 todoList 應(yīng)用。相比 Juqery 這種操作 Dom 的冷兵器時代，給開發(fā)者的感覺是完全變了一種模式，延續(xù)著 Html 寫法的友好性和適應(yīng)度，同樣還提供了 JSX 語法，Vue 官網(wǎng)說是一個漸進式框加，寫法也同樣是漸近式，讓開發(fā)者以不畏懼的心態(tài)使用，而且 Vue 的數(shù)據(jù)驅(qū)動模式提供了大量的 Api，每個 Api 無論是實例選項還是實例屬性都負責(zé)著自己的職責(zé)，它們就像五金店的零件一樣，只有正確的使用每個 Api 特性并且作用到恰當(dāng)?shù)牡胤?，Vue 工程代碼組織結(jié)構(gòu)和后續(xù)的維護才會顯得易如反掌。在組件化工程化沒到來的時候，業(yè)務(wù)的實現(xiàn)復(fù)雜度并不是最難的，反而令人頭疼的是對代碼后續(xù)的版本迭代、重構(gòu)、復(fù)用等一系列問題，希望通過簡單的 todo-list 應(yīng)用，可以對前端開發(fā)革命有新的認識！
<template>
<div>
<input type="text" v-model.trim="msg" @keyup.enter="push">
<ul>
<li v-for="(item,index) in list" :key="index" @click="deleteItem(index)">
{{index}} {{item.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'todo-list',
data () {
return {
msg: "",
list: []
}
},
methods: {
push () {
this.list.push({name:this.msg})
this.msg = ""
},
deleteItem (index) {
this.list.splice(index,1)
}
}
}
</script>
本章通過這個示例 Demo 表現(xiàn) Vue 數(shù)據(jù)驅(qū)動式框架運作是如何簡單到令人窒息。
一個 todo-list 應(yīng)用集成了兩個事件，兩條 data 數(shù)據(jù)就完成了！
通過 Template 里的 Html 模版能清楚的觀察到綁定信息，數(shù)據(jù)聯(lián)動和時時改動：
v-model 里的 msg 和實列 data 里存放的數(shù)據(jù)進行了綁定
@keyup.enter="push" 對鍵盤事件 keyup 進行監(jiān)聽，同時用 enter 修飾符進行 enter 按鍵進行監(jiān)聽，當(dāng)觸行 methods 里的 push 函數(shù)，向整個 list 列表里添加一條 object 數(shù)據(jù)
通過 v-for 指令循環(huán)出整個 list 里的數(shù)據(jù)，循環(huán)出相對應(yīng)的節(jié)點數(shù)
點擊每個節(jié)點的時候執(zhí)行 deleteItem 事件，刪除對應(yīng)的節(jié)點
對于往時操作dom寫法和當(dāng)前的數(shù)據(jù)驅(qū)動有什么區(qū)別？
數(shù)據(jù)渲染，我們會通過第三方的模版引擎，比如 artTemplate，Jade 等等，渲染完畢之后再 append 到根元素中。
Vue 只是通過一個 v-for 指令循環(huán)所有對應(yīng)的節(jié)點，先前只要在 Html 中寫好循環(huán)模板。
執(zhí)行事件，需要獲取 DOM 元素，對 DOM 元素 addEventlistener 事件，再進行函數(shù)。
Vue 直接通過你的 Template 集成的模版在需要發(fā)生事件的元素上直接綁定事件，只要執(zhí)行一個 v-on 結(jié)合你需要綁定的事件，所有原生的事件都支持。
需要存儲數(shù)據(jù)時，我們需要定一堆變量，有局部變量和全局變量，導(dǎo)致后續(xù)的變量難以維護，甚至可能會導(dǎo)致變量名沖突，作用域調(diào)用錯誤，無法準(zhǔn)確定位到正確的數(shù)據(jù)源。
Vue 通過 data 選項，用每個屬性去保存渲染的數(shù)據(jù)和臨時過度的數(shù)據(jù)，用統(tǒng)一 data 選項去保存，讓使用者一目了然。
所有執(zhí)行的函數(shù)，無論是事件所需要執(zhí)行的，還是封裝所需要調(diào)用的函數(shù)，通過函數(shù)式聲明在 script 標(biāo)簽內(nèi)寫入，代碼量大了，也會存在變量名沖突，和無法準(zhǔn)確的定位方法。
Vue 通過 Methods 選項專門為事件所執(zhí)行的函數(shù)和所封裝需要調(diào)用的函數(shù)，就像垃圾桶一樣，有一個準(zhǔn)確的、可投放的位置，需要找到執(zhí)行和所需調(diào)用的函數(shù)，直接可以準(zhǔn)確定位到 Methods 選項。
平時我們要對有些數(shù)據(jù)進行一些處理，比方說去除有后空格，按鍵的定位，都要通過 js 去過濾或者判斷。
Vue 提供了大量的修飾符封裝了這些過濾和判斷，讓開發(fā)者少寫代碼，把時間都投入的業(yè)務(wù)、邏輯上，只需要通過一個.修飾符去調(diào)用。
以上只是一個簡單 todo-list Demo 總結(jié)出來的例子，文中所提到的也只是部分功能優(yōu)勢，還有很多功能可以讓開發(fā)路徑更加快速。重點在于數(shù)據(jù)驅(qū)動的模式，只要把組件與組件之間的通信掌握了，也就相當(dāng)于你就手握大半江山，因為一切的一切都是基于組件通信模式和結(jié)構(gòu)用法來的。
