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 相關技術社區的活躍度。