模板渲染
渲染：獲取后端的數據，按照一定的規則加載到寫好的模板中，輸出成在瀏覽器中顯示的HTML.vue.js是在前端(即瀏覽器內)進行的模板渲染。
前后端渲染對比
后端：在服務器端進行渲染，服務器進程從數據庫獲取數據后，利用前端模板引擎，將數據加載生成HTML，然后通過網絡傳輸到用戶的瀏覽器中，然后被瀏覽器解析成可見的頁面。
前端：在瀏覽器里利用JS把數據和HTML模板進行組合。
前段渲染的優點在於：
1.業務分離，后端只需要提供數據接口，前端在開發時也不需要部署對應的后端環境，通過一些代理服務器工具就能遠程后去后端數據進行開發，能夠提升開發效率。
2.計算量轉移，原本需要后端渲染的任務轉移給了前端，減輕了服務器的壓力。
后端渲染的優點
1.對搜索引擎友好。
2.首頁加載時間短，后端渲染加載完后就直接顯示HTML，但前端渲染在加載完成后還需要有段js渲染的時間。
條件渲染
1.v-if/v-else
依據數據值來判斷是否輸出該DOM節點，以及包含的子元素。
<div v-if="yes">yes</div> //若當前vm實例中包含data.yes = true，則模板引擎將會編譯這個DOM節點，輸出<div>yes</div>
<div v-if="yes">yes</div>
<div v-else>no</div>
//注：v-else必須緊跟v-if使用。
v-if綁定的元素包含子元素則不影響和v-else的使用。
<div v-if="yes">
<div v-if="inner">inner</div>
<div v-else>not inner </div>
</div>
<div v-else>no</div>
new Vue({
data: {
yes: true,
inner :false
}
})
輸出結果為：
<div>
<div>not inner</div>
</div>
2.v-show
<div v-show="show">show</div>
<div v-show="show">show</div>
<div v-else>hidden</div>
注：v-show元素，無論綁定值為true或false，均會渲染並保持在DOM中。綁定值的改變只會切換元素的css屬性display。v-if元素，頁面不會顯示該標簽。
3.v-if vs v-show
1.v-if切換時，引起了dom操作級別的變化。v-show僅發生了樣式的變化。所以，從切換的角度考慮，v-show消耗的性能要比v-if小。
2.v-if切換時，vue.js會有一個局部編譯/卸載的過程，因為v-if中的模板也可能包括數據綁定或子組件。v-show則仍會進行正常操作，然后把css樣式設置為display：none。
總的來說，v-if有更高的切換消耗而v-show有更高的初始渲染消耗。所以，需要根據實際的使用場景來選擇合適的指令。
列表渲染
v-for指令主要用於列表渲染，將根據接收到數組重復渲染v-for綁定到的DOM元素及內部的子元素，並且可以通過設置別名的方式，獲取數組內數據渲染到節點中。
v-for遍歷數組：
<ul>
<li v-for="item in items">
<h3>{{ item.title}}</h3>
<p>{{item.description}}</p>
</li>
</ul>
var vm = new Vue({
el: '#app',
data: {
items: [
{_id:1,title:"title-1",description:"description-1"},
{_id:2,title:"title-2",description:"description-2"},
{_id:3,title:"title-3",description:"description-3"},
{_id:4,title:"title-4",description:"description-4"},
]
}
});
//items為data中的屬性名，item為別名，可以通過item來獲取當前數組遍歷的每個元素。
v-for內置了$index變量，可以在v-for指令內調用，輸出當前數組元素的索引。
另外，我們也可以自己制定索引的別名：
<li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>
注:vue.js對data中數組的原生方法進行了封裝，所以在改變數組時能觸發視圖更新，但以下兩種情況時無法觸發視圖更新的：
1.通過索引直接修改數組元素，例如：vm.items[0] = {title:'title-changed'};
2.無法直接修改"修改數組"的長度，例如：vm.items.length = 0
對於第一種情況，Vue.js提供了$set方法，在修改數據的同時進行視圖更新，可以寫成：
vm.items.$set(0,{title:'title-changed'})
或者 vm.$set('items[0]',{title:'title-also-changed'});
在列表渲染的時候，確定數組中的唯一標識id。通過trace-by給數組設定唯一標識。使Vue.js在渲染過程中會盡量復用原有的對象的作用域及DOM元素。
<li v-for="item in items" track-by="_id"></div>
v-for遍歷對象，作用域內可以訪問內置變量$key，也可以使用(key,value)形式自定義key變量。
<li v-for="(key,value) in objectDemo">
{{ key }} - {{ $key }} : {{ value }}
</li>
var vm = new Vue({
el:'#app',
data: {
objectDemo : {
a:'a-value',
b:'b-value',
c:'c-value'
}
}
})
v-for可以接受單個整數，用作循環次數：
<li v-for="n in 5">{{ n }}</li>
template標簽用法
將指令作用到template標簽上，但最后的渲染結果里不會有它。
<template v-if="yes">
<p>this is first dom</p>
<p>this is second dom</p>
</template>
//輸出結果
<p>this is first dom</p>
<p>this is second dom</p>
template標簽也支持使用v-for指令，用來渲染同級的多個兄弟元素。
<template v-for="item in items">
<p>{{ item.name }}</p>
<p>{{ item.desc }}</p>
</template>