Vue.js 十五分鐘入門 薦
TypeScript 為 JavaScript 帶來靜態型別檢查，讓 JavaScript 編寫中大型應用的時候可以應用工具來避免部分錯誤。
Vue 很早就支援 TypeScript，但配置起來比較麻煩，幸好有了 Vue CLI 3.0。安裝好 vue-cli 之後，使用 vue create 專案名稱 來建立專案，vue 指令碼手架自動建立以專案名稱命名的目錄。
vue-cli 3 生成的專案結構比較科學，尤其是通過 components 和 views 將作為控制元件的元件和作為頁面的元件分離開來，結構更清晰。可以理解為 views 中定義的元件是要配置在路由中的，而 componets 中定義的元件是被其它元件呼叫的。
HTML 需要定義一個 <div> 作為 Vue 應用的容器，main.ts 中會通過 new Vue(...) 生成應用例項並將之與容器繫結。注意 HTML 中定義的 <div id="app"></div> 會被 App.vue 模板中定義的 <div id="app">...</div> 替換掉。
Vue 是一個元件化的框架，元件是 Vue 的基本元素。一個 Vue 應用是由若干元件構成的，元件與元件之間的巢狀或並列關係，最終可以用樹形來表示。main.ts 中建立的 Vue 例項是最頂層元件。
每個 Vue 元件都有三個組成部分，即骨架（HTML）、樣式（CSS/LESS/SCSS）和指令碼（JavaScript/TypeScript）。可以在一個 .vue 檔案中寫完三個部分，也可以將樣式和指令碼部分分別寫成獨立的檔案。筆者推薦獨立檔案的方式。
既然我們選用 TypeScript，使用上圖所示的 class-style 來實現 Vue 元件更為適合。
除了 class-style 之外，也可以使用 config-style。配置風格是最早支援的風格，將 Vue 的各類成員（屬性、資料、計算屬性、方法等）獨立定義，易於理解 Vue 例項的內部結構，但初學者容易搞不清楚 this 指向。
Vue 定義的元件需要註冊才能在其它元件中使用。註冊的方式分為全域性和區域性兩種。使用 TypeScript 和類風格開發 Vue 應用時，推薦使用區域性註冊。區域性註冊比較符合模式化開發思想。
Vue 可以通過 {{ }} 語法在文字中插值。但是如果要將值插入屬性，則應使用 : 號修飾屬性名。元件屬性（指 HTML 標籤引數）可隨意定義，加 @Prop() 修飾即可，如果屬性是必須的，應該使用 : 來定義；可選屬性則使用 !: 來定義。
在 HTML 或自定義元件標籤中使用 @ 字首的事件名，可以繫結事件處理函式。Vue 實現了部分 HTML 事件，比如 @click 可以直接繫結。元件也可以“定義”自己的事件，不需要提前宣告，只需要 this.$emit() 直接觸發即可。
Vue 本身是資料驅動渲染，所以資料（包括屬性、計算屬性等）變化可以觸發介面資料呈現，但是介面的輸入要反饋給元件，就需要用觸發事件的方式來反饋。雙向繫結是用於更新屬性事件的語法糖，使用 :屬性名.sync="..." 繫結。子元件中通過觸發 update:屬性名 事件來更新父元件中繫結的資料。
路由主要用於組織檢視（頁面）關係。最基本的要求是為路由配置每個路徑對應的元件。 name 可以當作路徑的簡短別名。路由操作一般會使用注入到 Vue 例項中的 $router 物件，常用 $router.push() 和 $router.replace() 來跳轉，二者的區別在於對 URL 歷史的影響（可以想像）
路由項配置中的 component 可以指定為匯入的的元件類，也可以指定一個非同步（返回 Promise 的）函式，該函式動態載入元件並返回包含該元件類的 Promise 物件。上例中使用的 import() 動態引入語法。
做一個簡單的登入介面加深對前面知識的理解和記憶。該示例特意避免了 Ajax 呼叫，以降低其複雜程度。
沒有 Ajax 實現的遠端認證，我們只能假設使用者輸入 pass 時為正確密碼。使用者名稱可任意輸入，如果驗證成功則會顯示該使用者已登入。
專案仍然是由 vue-cli 3 建立的。建立好之後去掉了 About 和 HelloWorld ，加入了 Login ，並將 Home 改造成三部分各自獨立的檔案結構。當然，順便還按自己（或團隊）的開發規範調整了下 tslint.json 中的配置。
App.vue、main.ts 和 router.ts 可以算得上是一個 Vue 應用的入口和基本配置。App.vue 中直接把控制權交給了 vue-router。注意， import 的時候不能省略 .vue 副檔名。
Login 元件中用到了雙向繫結，由於屬性（由 @Prop() 修飾）不可以在內部修改，甚至可以把它宣告為 readonly （也許 Vue 3 會定義相關的規範）。注意到 keypress 事件有一個字尾，這在 Vue 中稱為事件修飾符，可以用於快速處理一些特殊情況，比如 keypress.enter 表示Enter按下時。
在 Home 中使用 Login 元件時， Home 的 user 資料欄位繫結到了 Login 的 user 屬性上， .sync 修飾符表示這是一個雙向繫結。前面 Login 的程式碼中，如果登入成功，Login 會通過 $emit("update:user", {...}) 來通知繫結資料發生變化，Vue 框架接收到這個通知並更新了繫結的 Home.user ，這會導致計算屬性 message 重算，並最終觸發呈現“某使用者已登入”。
Vue 入門很簡單吧！
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應用，仍然需要了解大量 Vue 設計概念和操作技巧。建議讀者們仔細閱讀 Vue 官方提供教程和 API 手冊，並保持在 Vue 相關技術社群的活躍度。
原碼下載： ofollow,noindex" target="_blank">百度網盤
全棧說起來是一個比較全面的知識棧，直白一點來說就是軟體開發的各個部分都要了解一些。Web 全棧是其中一個分支，技術棧傾向於 Web 相關的知識，最主要的就是包含 Web 前端技術和後端技術。
Web 後端涉及的技術非常多，但前端開發最重要的一門技術就是 JavaScript。Node.js 把 JavaScript 帶入後端之後，JavaScript 可以前後通吃。所以基於 JavaScript 的全棧技術在前後兩端至少可以做到語言複用和大量 SDK 複用，減輕全棧技能點負擔。
歡迎訂閱我的專欄： JavaScript 全棧工程師養成記
本專欄是作者 20 年軟體開發的經驗總結，藉助 JavaScript 語言來描述。本專欄不是從純粹的語言層面來講的，而是稍稍深入了一點，講到了軟體內涵相關的一些東西。其中有軟體工程相關的東西，比如開發過程，需求，設計、工程技術等；有內容構建的東西，比如演算法，資料結構，設計方法，模式和重構等。
專欄前半部分講了大量與語言無關的東西，當然舉例是用 JavaScript。這些東西是任何一個軟體，任何一端都需要的內涵；後半部分則相對具體一些，會講到具體的技術，比如應用框架和一些技術細節。
