SegmentFault 技術週刊 Vol.1 - Vue.js 起手式

2014 年 3 月，Vue.js 0.10 發佈，10 月開始逐漸被大範圍發現使用，12 月 SegmentFault 社區內出現第一篇關於 Vue.js 的文章，2015 年 1 月首次有人就 Vue 相關的使用開始提問。

至今，SegmentFault 社區內已有 900 多個 vue.js 相關的問題，300 多篇相關的文章。

Vuex、vue-router、vue-loader、vue-cli……如今，咱們給你們帶來 Vue 的內容特輯 - 《Vue.js 起手式》，做爲 SegmentFault 技術週刊的第一期主題。

什麼是 Vue.js？

Reactive Components for Modern Web Interfaces.

根據官網 https://vuejs.org 的介紹，可簡述爲一句話。（具體要了解它能夠跳到下文第三節閱讀《Vue.js: a (re)introduction》）

其特色是

• 簡潔 HTML 模板 + JSON 數據，再建立一個 Vue 實例，就這麼簡單

• 數據驅動 自動追蹤依賴的模板表達式和計算屬性

• 組件化 用解耦、可複用的組件來構造界面

• 輕量 ~24kb min+gzip，無依賴

• 快速 精確有效的異步批量 DOM 更新

• 模塊友好 經過 NPM 或 Bower 安裝，無縫融入你的工做流

相關項目地址：

• https://github.com/vuejs/vue

• https://github.com/vuejs/vue-router

• https://github.com/vuejs/vue-loader

• https://github.com/vuejs/vuex

• https://github.com/vuejs/vue-cli

起手式

vue + webpack 起手式 // @andyyu0920

前端的世界變化之快速，從 2010 開始小弟經歷了 jQuery, Backbone, Angular, 到 React。這一路走來雖然學習到了許多高明開發者融合於框架或函式庫中的智慧，卻也因為不斷快速變化感到疲憊。時至 2016 小弟認為在實務與理想之間取得一個完美平衡的前端框架大概就屬 vue.js 了…

Vue.js 快速入門 // @FullStackDeveloper

Vue.js 是一個輕巧、高性能、可組件化的 MVVM 庫，同時擁有很是容易上手的 API。做者是尤雨溪，寫下這篇文章時 vue.js 版本爲 1.0.7 …

從零開始學 Vue // @嘉寶Appian

一直讓 Vue 引覺得豪的是它的便捷性、執行力、靈活性，這篇教程的目的就是經過一些例子，讓你可以概覽一些基本的概念和特性。在接下來的其餘教程裏，你會學到 Vue 更多的有用的特性，從而用 Vue 搭建一個可擴展的項目。

vue 自定義指令實現 v-tap 插件 // @二哲

vue-touch 基於 hammer，對於普通簡單手勢的頁面來講過於龐大！因而想本身實現一個最經常使用的手勢 tap。順着自定義指令和插件文檔，昨晚實現了一個 v-tap 指令，丟出這篇乾貨。

Vue 源碼解析之一：transition // @一拳超人

最近公司的項目選型使用了 vue，因此用 vue 開發了一個項目，期間在處理一些動畫的時候，發現 vue-transition 雖然用起來簡單，可是侷限性很大，好比沒法處理一個組件中父子元素的聯動動畫。因此打算研讀一下源碼，而後研究一下如何解決這個問題。

Vue 源碼分析之二：Vue Class

這段時間折騰了一個 vue 的日期選擇的組件，爲了達成我一向的使用舒服優先原則，我決定使用 directive 來實現，可是經過這個實現有一個難點就是我如何把時間選擇的組件插入到 dom 中，因此問題來了，我是否是又要看 Vue 的源碼…

(1/2) Vue 構建單頁應用最佳實戰 // @二哲

咱們將會選擇使用一些 vue 周邊的庫 {1. 使用 node.js 後臺，瞭解到如何獲取數據 2. 實現單頁路由 3. 實現 HTTP 請求咱們的 node 4. 單項數據流 5. 使用 .vue 文件進行開發} 最終咱們將會構建出一個小 demo…

(2/2) Vue 構建單頁應用最佳實戰

本章節，將會把全部的請求全寫爲跨域請求。不知道爲何，不少人一用了框架就會不知所措。給你們一個忠告，享受框架帶來的便利，別忘了時刻提醒本身學好基礎知識。

發展史

Vue.js: a (re)introduction // @尤雨溪

做者 @尤雨溪 親做撰文，讓你瞭解 Vue.js 到底提供了什麼，和其餘框架有何不一樣，在已經有了 Angular、React、Ember 的狀況下爲何還值得關注。「我我的傾向於把它看作是一套能夠靈活選擇的工具組合」。

vue.js 2015 回顧（譯） // @limichange

2015 年對 Vue.js 來講是高速發展的一年。這個項目的發展已經超出了個人預期，因此我打算作一個回顧並闡述一些觀點…

vue-cli 發佈（譯） // @limichange

當咱們真正開發一個應用的時候，咱們不可避免的會用到一大堆的工具，模塊化、預處理器、熱模塊加載、代碼校驗和測試。這些工具對於一個須要長期維護的大型應用是必須的，可是項目初始化將會是讓人痛苦的事情。這就是爲何咱們作了 vue-cli，讓一個簡單的命令行工具來幫助你快速的構建一個擁有強大構建能力的 Vue.js 項目。

記念即將逝去的 Vue 過濾器 // @嘉寶Appian

Vue 2.0 想要把 filter 去掉。不過我想，若是是用 1.0 的朋友仍是很須要用到過濾器的……在這個教程中，咱們將會經過幾個例子，瞭解和學習 Vue.js 的過濾器。

Vue 2.0 升（cai）級（keng）之旅 // @DiscipleD

用 Vue 1.10+ 搭建了新博客，並漸漸地往裏添加一些新學到的東西 ES6, webpack, docker 等，在不久以前，Vue 如約發佈了 2.0 版本，正如計劃之初，博客 Vue 的版本也將升級到 2.0。

The State of Vue // @尤雨溪

Vue 2.0 RC1 發佈，API 再也不會有大的變更。

「 We announced Vue 2.0 back in April, and today I am very excited to release the first release candidate for Vue 2.0! From this stage on we will be in API freeze and there will be no more breaking changes before official release. 」

深閱讀

單文件組件下的 vue，能夠擦出怎樣的火花 // @leftstick

2016 註定不是個平凡年，不管是即將問世的 Angular2（雖然到目前爲止 2016-05-20 仍沒有 release date），仍是全面走向穩定的 React，都免不了面對另外一個競爭對手 Vue。

解析神奇的 Object.defineProperty //@楊川寶

這個方法了不得啊，vue.js 是經過它實現雙向綁定的，並且 Object.observe，也被草案發起人撤回了。。因此 defineProperty 更有必要了解一下了…

vue 源碼分析之如何實現 observer 和 watcher //@楊川寶

本文能幫你作什麼？好奇 vue 雙向綁定的同窗，能夠部分緩解好奇心，還能夠幫你瞭解如何實現 $watch…

組件改變生活_揭開Vue組件的神祕面紗 // @嘉寶Appian

在這一節裏，咱們將會了解到 Vue 的組件，理解組件是如何工做的，並利用一系列的例子證實，用組件化的思想開發項目，會給你帶來不同感覺。若是咱們理解了 Vue 的組件化思想，咱們就能夠利用這個思想構造一個簡化的評論投票系統，一個用戶能夠發佈評論，其餘用戶能夠在任意的評論上面投「同意票」或者投「反對票」。

（本期完）

這期關於 Vue.js 的內容就先到這裏，以後咱們會將 Vue 的實踐應用再單獨作一期特輯。也歡迎你們「關注」或者「訂閱」本專欄，你將收到每週一期的主題內容推薦。

下週二見~

---

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週二更新，敬請關注。同時，歡迎你們在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。