0.MVVM
什么是MVVM？就是Model-View-ViewModel。
ViewModel是Vue.js的核心，它是一個Vue實例。
1.基礎示例
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> </head> <body> <div id="didi-navigator"> <ul> <li v-for="tab in tabs"> {{ tab.text }} </li> </ul> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#didi-navigator', data: { tabs: [ { text: '巴士' }, { text: '快車' }, { text: '專車' }, { text: '順風車' }, { text: '出租車' }, { text: '代駕' } ] } }) </script> </body> </html>
使用Vue的過程就是定義MVVM各個組成部分的過程的過程。
· 定義View
· 定義Model
· 創建一個Vue實例或"ViewModel"，它用於連接View和Model
2.數據綁定
2.1 插值
有時候只需渲染一次數據，后續數據變化不再關心，可以通過“*”實現：
<span>Text: {{*text}}</span>
雙大括號標簽會把里面的值全部當作字符串來處理，如果值是HTML片段，則可以使用三個大括號來綁定：
<div>Logo: {{{logo}}}</div> Logo: ‘<span>DDFE</span>’
2.2 表達式
Mustache標簽也接受表達式形式的值。
3.指令（上）
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
- v-model指令
v-if：是否渲染。
v-show：肯定渲染，是否顯示。
其中，v-show不支持<template語法>。一般來說，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁地切換，則使用v-show較好；如果在運行時條件不大可能改變，則使用v-if較好。另外，將v-show用在組件上時，因為指令的優先級v-else會出現問題，可以用另一個v-show替換v-else。
3.1 關於v-for
使用基礎可參看http://www.cnblogs.com/xulei1992/p/6015416.html。
補充：
Vue.js增加了兩個方法觀測變化：$set、$remove。
3.1.1 應該盡量避免直接設置數據綁定的數組元素
因為這些變化不會被Vue.js檢測到，因而也不會更新視圖渲染。這時，我們可以使用$set方法：
demo.item.$set(0,{childMsg:’Changed!’})
$remove是splice的語法糖，用於從目標數組中查找並刪除元素。
demo.item.$remove(item)
3.1.2 有時可能需要用全新對象來替換數組
Vue.js應盡可能地復用已有實例。如果沒有唯一的鍵供追蹤，則可以使用track-by=”$index”，它強制讓v-for進入原位更新模式：片段不會被移動，而是簡單地以對應索引的新值刷新。這時DOM節點不再映射數組元素順序的改變，不能同步臨時狀態（比如<input>元素的值），以及組件的私有狀態。
因為js的限制，Vue.js不能檢測到下面數組的變化：
- 直接用索引設置元素，如vm.items[0]={}。
- 修改數據的長度，如vm.items.length = 0。
前一個問題可用$set解決，后一個問題只需用一個空數組替換items即可。
3.1.3 v-for可以和vue.js提供的內置過濾器（filterBy）或排序（orderBy）數據一起使用
filterBy的例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input v-model="searchText" /> <ul> <li v-for="user in users | filterBy searchText in 'name'">{{user.name}}</li> </ul> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var haha = new Vue({ el:'body', data:{ users:[ { name:'快車', tag:'1' }, { name:'慢車', tag:'2' }, { name:'好車', tag:'3' }, { name:'破車', tag:'4' } ] } }) </script> </body> </html>
當我搜破車的時候：
orderBy的例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li v-for="user in users | orderBy field reverse">{{user.name}}</li> </ul> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var demo = new Vue({ el:'body', data:{ field:'tag', reverse:false, // 顛倒 users:[ { name:'快車', tag:'2' }, { name:'慢車', tag:'3' }, { name:'好車', tag:'1' }, { name:'破車', tag:'0' } ] } }) </script> </body> </html>
其他：
v-bind指令可以縮寫為一個冒號，v-on指令可以縮寫為@符號。
v-model指令后面可以添加number、lazy、debounce參數。
- Number可以將用戶的輸入轉換為Number類型（如果原值的轉換結果為NaN，則返回原值）。
- 在input中時添加lazy將數據改到在change事件中發生。
- Debounce可設置延時。