這篇文章介紹的內容是Vue.js如何在瀏覽器內實現模版渲染，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
渲染：取得後端的數據，依照一定的規則載入到寫好的範本中，輸出成在瀏覽器中顯示的HTML.vue.js是在前端(即瀏覽器內)進行的範本渲染。
前後端渲染對比
後端：在伺服器端進行渲染，伺服器程序從資料庫取得資料後，利用前端模板引擎，將資料加載產生HTML，然後透過網路傳輸到使用者的瀏覽器中，然後被瀏覽器解析成可見的頁面。
前端：在瀏覽器裡利用JS把資料和HTML模板進行組合。
前段渲染的優點在於：
#1.業務分離，後端只需要提供資料接口，前端在開發時不需要部署對應的後端環境，透過一些代理伺服器工具就能遠端後去後端資料進行開發，能夠提升開發效率。
2.計算量轉移，原本需要後端渲染的任務轉移給了前端，減輕了伺服器的壓力。
後端渲染的優點
1.對搜尋引擎友善。
2.首頁載入時間短，後端渲染載入完後就直接顯示HTML，但前端渲染在載入完成後還需要有段js渲染的時間。
條件渲染
1.v-if/v-else
依據資料值判斷是否輸出該DOM節點，以及包含的子元素。
<p v-if="yes">yes</p> //若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出<p>yes</p>
<p v-if="yes">yes</p>
<p v-else>no</p> //注：v-else必须紧跟v-if使用。v-if绑定的元素包含子元素则不影响和v-else的使用。
<p v-if="yes">
<p v-if="inner">inner</p>
<p v-else>not inner </p>
</p>
<p v-else>no</p> new Vue({
data: {
yes: true,
inner :false
}
})輸出結果為：
<p>
<p>not inner</p>
</p>2.v-show
<p v-show="show">show</p>
<p v-show="show">show</p>
<p v-else>hidden</p>註：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"></p>
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>相關推薦：
jquery jtemplates.js模板渲染引擎的詳細用法
#以上是Vue.js如何在瀏覽器內實現模版渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！
