Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
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.jb51.net/article/96364.htm。
補充：
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可設置延時。
參考：大神寫的：http://www.jb51.net/article/96426.htm《vue.js權威指南》
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。