很多的web項目,通常在后臺框架中都帶有模版引擎,從后臺來渲染前臺頁面,又或者是直接在前臺模版中,嵌套后端代碼(例如html嵌套php代碼)來渲染,今天我們在沒有框架模板引擎,也沒有代碼可以嵌套,我們怎么辦呢?我們使用現(xiàn)在最流行的前臺js框架,Vue.js來完成前臺頁面的渲染。今天我們就來說說如何使用這個Vue。
首先什么是模版渲染,就是當我們使用ajax來獲取到后端返回的數(shù)據(jù)之后,我們將它按照一定的規(guī)則加載到寫好的模版中,輸出在瀏覽器中顯示的HTML,這個生成內容的過程就是渲染模版,模版渲染可以大致分為,前端渲染和后端渲染,后端渲染之前也說過,就是從服務端獲取數(shù)據(jù)之后服務端生成頁面使用后端模版引擎,而前端則是在瀏覽器中用js和html相結合來渲染,兩種方式各有優(yōu)缺點,需要根據(jù)項目的特點來使用。
前端渲染的優(yōu)點主要在于:
業(yè)務分離,后端只需要提供接口,前端就可以獨自完成剩下的開發(fā)工作,可以提高工作效率
計算量轉移,原本需要后臺服務器渲染的任務交給了前端,減輕了服務器端的壓力
后臺渲染的有點主要在于:
對搜索引擎更友好
頁面加載的時間段,后端渲染后直接顯示頁面,前端需要在打開頁面的時候渲染
渲染條件,vue提供很多指令來說明模版和數(shù)據(jù)間的邏輯關系,基本構成了引擎的主要部分,下面介紹幾個常用指令的用法和場景:
v-if/v-else:v-if和v-else的作用是根據(jù)數(shù)據(jù)值來判斷是否輸出該DOM元素,以及包含的子元素
yes
如果當前vm實例中包含data.yes = true,則模版引擎將會編譯這個DOM節(jié)點,輸出
yes
我們也可以使用v-else來配合v-if使用,例如:
yesno
需要注意的是,v-else必須緊跟v-if,不然該指令不起作用
v-if綁定的元素飽漢子元素則不受影響和v-else的使用例如:
innernot innernonew 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 較好。