這篇文章介紹的內容是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中文網其他相關文章!