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

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

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

這篇文章介紹的內容是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>


相關推薦:

前端範本與渲染

jquery jtemplates.js模板渲染引擎的詳細用法

#模版資料分離渲染方式的設計與實作

flask使用渲染模板#

微信小程式 - 複雜資料結構模版渲染

#

以上是Vue.js如何在瀏覽器內實現模版渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn