框架（framework）：有著自己的語法特點、都有對應的各個模塊。

庫（library）：專注于一點。

框架的好處：

• 提到代碼的質量，開發速度

• 提高代碼的復用率

• 降低模塊之間的耦合度（高內聚低耦合）

  
  

UI：user interface

GUI：graphical user interface

CLI：command line interface

API：application interface

思維模式的轉換：從操作DOM的思維模式 切換到以數據為主。

1、what

是一個漸進式的構建用戶界面的js框架

2、where

小到的簡單的表單處理，大到復雜的數據操作比較頻繁的單頁面應用程序

3、why

• 方便閱讀的中文文檔

• 容易上手 （學習曲線比較緩和）

• 體積小

• 基于組件化的開發方式

• 代碼的可讀性、可維護性得到了提高

4、how

工作方式：可以通過豐富的指令擴展模板，可以通過各種各樣的插件來增強功能

方式1

全局安裝 vue-cli

$ npm install --global vue-cli

創建一個基于 webpack 模板的新項目

$ vue init webpack my-project

安裝依賴

$ cd my-project

  $ npm install

  $ npm run dev

方式2

直接引入對應的js文件

1、雙花括號

mustache(胡子)/interpolation（插值表達式）

語法：

<any>{{表達式}}</any>

作用：將表達式執行的結果 輸出當調用元素的innerHTML中；還可以將數據綁定到視圖。

2、指令-循環指令

基本語法1：

<any v-for="tmp in array"></any>

基本語法2：

<any v-for="(value,index) in array"></any>

作用：在遍歷array這個集合時，將臨時變量保存在tmp中，創建多個any標簽。

3、指令-選擇指令

語法：

<any v-if="表達式"></any>

  <any v-else-if="表達式"></any>

  <any v-else="表達式"></any>

作用：根據表達式執行結果的真假，來決定是否要將當前的這個元素，掛載到DOM樹。

4、指令-事件綁定

語法：

<any v-on:eventName="handleEvent"></any>

作用：給指定的元素 將handleEvent的方法綁定給指定eventName事件。

5、指令-屬性綁定