久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

25
2018/08

如何使用Vue.js來渲染前臺模版-相當詳細版

發(fā)布時間:2018-08-25 11:14:13
發(fā)布者:pengyifeng
瀏覽量:
0

很多的web項目,通常在后臺框架中都帶有模版引擎,從后臺來渲染前臺頁面,又或者是直接在前臺模版中,嵌套后端代碼(例如html嵌套php代碼)來渲染,今天我們在沒有框架模板引擎,也沒有代碼可以嵌套,我們怎么辦呢?我們使用現(xiàn)在最流行的前臺js框架,Vue.js來完成前臺頁面的渲染。今天我們就來說說如何使用這個Vue。

首先什么是模版渲染,就是當我們使用ajax來獲取到后端返回的數(shù)據(jù)之后,我們將它按照一定的規(guī)則加載到寫好的模版中,輸出在瀏覽器中顯示的HTML,這個生成內容的過程就是渲染模版,模版渲染可以大致分為,前端渲染和后端渲染,后端渲染之前也說過,就是從服務端獲取數(shù)據(jù)之后服務端生成頁面使用后端模版引擎,而前端則是在瀏覽器中用js和html相結合來渲染,兩種方式各有優(yōu)缺點,需要根據(jù)項目的特點來使用。

前端渲染的優(yōu)點主要在于:

  1. 業(yè)務分離,后端只需要提供接口,前端就可以獨自完成剩下的開發(fā)工作,可以提高工作效率

  2. 計算量轉移,原本需要后臺服務器渲染的任務交給了前端,減輕了服務器端的壓力

后臺渲染的有點主要在于:

  1. 對搜索引擎更友好

  2. 頁面加載的時間段,后端渲染后直接顯示頁面,前端需要在打開頁面的時候渲染

渲染條件,vue提供很多指令來說明模版和數(shù)據(jù)間的邏輯關系,基本構成了引擎的主要部分,下面介紹幾個常用指令的用法和場景:

v-if/v-else:v-if和v-else的作用是根據(jù)數(shù)據(jù)值來判斷是否輸出該DOM元素,以及包含的子元素

yes

vue標簽.jpg

如果當前vm實例中包含data.yes = true,則模版引擎將會編譯這個DOM節(jié)點,輸出

yes

我們也可以使用v-else來配合v-if使用,例如:

yes
no

需要注意的是,v-else必須緊跟v-if,不然該指令不起作用

標簽.jpg

v-if綁定的元素飽漢子元素則不受影響和v-else的使用例如:


    inner
    not inner no     new Vue({     date:{         yes:true,         inner:false      }    });      輸出結果為:  
     
not inner
 

v-show,除了v-if,v-show也是可以根據(jù)條件展示元素的一種指令。例如:

show

v-if 是“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建。v-if 也是惰性的:如果在初始渲染時條件為假,則什么也不做——直到條件第一次變?yōu)檎鏁r,才會開始渲染條件塊。

相比之下,v-show 就簡單得多——不管初始條件是什么,元素總是會被渲染,并且只是簡單地基于 CSS 進行切換。

一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好。


關鍵詞:
返回列表