vue的特點

1）遵循 MVVM 模式

2）編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發

3）它本身只關注 UI, 可以輕松引入 vue 插件或其它第三方庫開發項目

Vue 擴展插件

1）vue-cli: vue 腳手架

2）vue-resource(axios): ajax 請求

3）vue-router: 路由

4）vuex: 狀態管理

5）vue-lazyload: 圖片懶加載

6）vue-scroller: 頁面滑動相關

7）mint-ui: 基于 vue 的 UI 組件庫(移動端)

8）element-ui: 基于 vue 的 UI 組件庫(PC 端)

9）它本身只關注 UI, 可以輕松引入 vue 插件或其它第三方庫開發項目

vue的基本使用

<div  id="app">
    <input  type="text"  v-model="username">
    <p>Hello,  {{username}}</p>
</div>

<script  type="text/javascript"  src="../js/vue.js"></script>
<script  type="text/javascript"> 
    new  Vue({
        el:  '#app', 
        data:  {
            username:  'vue'
        }
    })
</script>

模板語法

模板的理解
1）動態的 html 頁面

2）包含了一些 JS 語法代碼

     a.雙大括號表達式

     b.指令(以 v-開頭的自定義標簽屬性)

雙大括號表達式

1）語法:   {{exp}}

2）功能: 向頁面輸出數據

3）可以調用對象的方法

強制數據綁定

1）功能: 指定變化的屬性值

2）完整寫法:

       v-bind:xxx='yyy' //yyy 會作為表達式解析執行
3）簡潔寫法:

      :xxx='yyy'

綁定事件監聽

1）功能: 綁定指定事件名的回調函數

2）完整寫法:

      v-on:keyup='xxx'
      v-on:keyup='xxx(參數)' v-on:keyup.enter='xxx'
3）簡潔寫法:

      @keyup='xxx' @keyup.enter='xxx'

計算屬性和監視
計算屬性

1）在 computed 屬性對象中定義計算屬性的方法

2）在頁面中使用{{方法名}}來顯示計算的結果

監視屬性

1）通過通過 vm 對象的$watch()或 watch 配置來監視指定的屬性

2）當屬性變化時, 回調函數自動調用, 在函數內部進行計算

計算屬性高級

1）通過 getter/setter 實現對屬性數據的顯示和監視

2）計算屬性存在緩存, 多次讀取只執行一次 getter 計算

class 與 style 綁定
1）在應用界面中, 某個(些)元素的樣式是變化的
2）class/style 綁定就是專門用來實現動態樣式效果的技術
class 綁定

1）:class='xxx'

2）表達式是字符串: 'classA'

3）表達式是對象: {classA:isA, classB: isB}

4）表達式是數組: ['classA', 'classB']

style 綁定

1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"

2）其中 activeColor/fontSize 是 data 屬性

列表渲染
列表顯示指令

數組: v-for / index

對象: v-for / key

列表的更新顯示

刪除 item

替換 item

列表的高級處理

列表過濾

列表排序

事件處理
綁定監聽:

1）v-on:xxx="fun"

2）@xxx="fun"

3）@xxx="fun(參數)"

4）默認事件形參: event

5）隱含屬性對象: $event

事件修飾符

1）.prevent : 阻止事件的默認行為 event.preventDefault()

2）.stop : 停止事件冒泡 event.stopPropagation()

按鍵修飾符

1）.keycode : 操作的是某個 keycode 值的鍵

2）.keyName : 操作的某個按鍵名的鍵(少部分)

表單輸入綁定
使用 v-model 對表單數據自動收集

1）text/textarea

2）checkbox

3）radio

4）select