概念

Vue.js 一套構建用戶界面的漸進式框架，Vue 只關注視圖層，採用自底向上增量開發的設計；它的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。

Vue.js 模板語法

Vue.js 使用了基於HTML 的模板語法，允許開發者聲明式的將 DOM 綁定至底層 Vue 實例的數據，它的核心是一個採用了簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。

插值

• 文本：數據綁定最常見的形式就是使用 {{...}} 雙大括號的文本插值。
• HTML：使用 v-html 用於輸出 HTML代碼。
• 屬性：HTML中的屬性值應該使用 v-bind 指令。
• 表達式

指令：帶有 v- 前綴的特殊屬性，用於在表達式的值改變時，將某些行為應用到 DOM上。

• 參數：在指令後面以 : 指明。
• 修飾符：以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。

用戶輸入：在 input 輸入框中我們可以使用 v-model 指令來實現雙向數據綁定

過濾器：Vue.js 允許自定義過濾器，被用作一些常見的文本格式化。

函數接受表達式的值作為第一個參數；可以串聯；是JavaScript函數。

縮寫：Vue.js 為兩個最為常用的指令提供了特別的縮寫：v-bind 和 v-on。

條件語句

• v-if：指令將根據表達式的值（true或false）來決定是否插入元素。
• v-else：可以用它給 v-if 添加一個 else 塊。
• v-else-if：用作v-if 的 else-if 塊。可以鏈式的多次使用。
• v-show：根據條件展示元素。

循環語句

v-for 指令，需要以 site in sites 形式的特殊語法，sites 是源數據數組並且 site 是數組元素迭代的別名，它可以綁定數據到數組來渲染一個列表。

• 迭代對象，通過一個對象的屬性迭代數據。
• 迭代整數，也就是循環整數。

計算、監聽屬性

計算關鍵詞：`computed

監聽關鍵詞：watch，通過它來響應數據的變化。

樣式綁定

class 和 style 是HTML元素的屬性，用於設置元素的樣式，可以用 v-bind 來設置樣式屬性。

事件處理

v-on 指令，接收一個定義的方法來調用。

事件修飾符

• .stop
• .prevent
• .capture
• .self
• .once

組件

組件是 Vue.js 最強大的功能之一，它可以擴展HTML元素，封裝可重用的代碼。組件系統可以讓我們用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹。

註冊全局組件語法：Vue.component(tagName, options)

閱讀更多 MAO大俠 的文章

關鍵字: JavaScript 設計 HTML