很多的web項(xiàng)目，通常在后臺(tái)框架中都帶有模版引擎，從后臺(tái)來(lái)渲染前臺(tái)頁(yè)面，又或者是直接在前臺(tái)模版中，嵌套后端代碼（例如html嵌套php代碼）來(lái)渲染，今天我們?cè)跊](méi)有框架模板引擎，也沒(méi)有代碼可以嵌套，我們?cè)趺崔k呢？我們使用現(xiàn)在最流行的前臺(tái)js框架，Vue.js來(lái)完成前臺(tái)頁(yè)面的渲染。今天我們就來(lái)說(shuō)說(shuō)如何使用這個(gè)Vue。

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

前端渲染的優(yōu)點(diǎn)主要在于：

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

2. 計(jì)算量轉(zhuǎn)移，原本需要后臺(tái)服務(wù)器渲染的任務(wù)交給了前端，減輕了服務(wù)器端的壓力

后臺(tái)渲染的有點(diǎn)主要在于：

1. 對(duì)搜索引擎更友好

2. 頁(yè)面加載的時(shí)間段，后端渲染后直接顯示頁(yè)面，前端需要在打開(kāi)頁(yè)面的時(shí)候渲染

渲染條件，vue提供很多指令來(lái)說(shuō)明模版和數(shù)據(jù)間的邏輯關(guān)系，基本構(gòu)成了引擎的主要部分，下面介紹幾個(gè)常用指令的用法和場(chǎng)景：

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

yes