首頁 > 文章 > web前端 > Vue.js如何在瀏覽器內實現模版渲染

Vue.js如何在瀏覽器內實現模版渲染

零到壹度原創: 2018-04-21 11:05:482260瀏覽

這篇文章介紹的內容是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: &#39;#app&#39;,        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:&#39;title-changed&#39;})  
 或者  vm.$set(&#39;items[0]&#39;,{title:&#39;title-also-changed&#39;});

在清單渲染的時候，決定數組中的唯一識別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:&#39;#app&#39;,        data: {
            objectDemo : {
                a:&#39;a-value&#39;,
                b:&#39;b-value&#39;,
                c:&#39;c-value&#39;
            }
        }
    })

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>

Vue.js如何在瀏覽器內實現模版渲染

相關文章