摘要：掘金主頁簡書主頁去往目的地的列車可能會晚點(diǎn)但絕不會缺席開發(fā)環(huán)境需要的信息模板語法官方手冊我的上一篇文章使用前端框架實(shí)現(xiàn)單頁應(yīng)用開始編碼切換至桌面路徑創(chuàng)建一個(gè)新文件夾切換至新建的文件夾路徑下使用指令初始化項(xiàng)目環(huán)境，一路回車，完成初始化安裝和

ArthurSlog

SLog-7

Year·1

Guangzhou·China

July 14th 2018

GitHub

掘金主頁

簡書主頁

segmentfault

去往目的地的列車可能會晚點(diǎn) 但絕不會缺席

vue模板語法官方手冊

我的上一篇文章：使用vue前端框架實(shí)現(xiàn)單頁應(yīng)用（SPA）

切換至桌面路徑

cd ~/Desktop

創(chuàng)建一個(gè)新文件夾

mkdir node_vue_TemplateSyntax_learningload

切換至新建的文件夾路徑下

cd node_vue_TemplateSyntax_learningload

使用npm指令初始化nodejs項(xiàng)目環(huán)境，一路回車，完成初始化

npm init

安裝 koa 和 kao-static

sudo npm install koa koa-static

需要管理員權(quán)限，輸入密碼

在當(dāng)前路徑下創(chuàng)建 index.js 和 index.html 這兩個(gè)文件，其中 index.js 實(shí)現(xiàn)了一個(gè)靜態(tài)web服務(wù)器：

index.html

    
    
    
    
    
    
    
        

        
Hello  {{ rawHtml }}                  
        
Hello   
        
        
    

index.js

const serve = require("koa-static");
const Koa = require("koa");
const app = new Koa();

// $ GET /package.json
app.use(serve("."));

app.listen(3000);

console.log("listening on port 3000");

現(xiàn)在，切換至 ~/Desktop/node_vue_TemplateSyntax_learningload 路徑下

cd ~/Desktop/node_vue_TemplateSyntax_learningload

啟動靜態(tài)web服務(wù)器

node index.js

打開瀏覽器，地址欄輸入 127.0.0.1:3000， 回車，正常執(zhí)行會有以下結(jié)果：

Hello ArthurSlog

Hello ArthurSlog

上面的第二行，顯示的 ArthurSlog 會顯示紅色

請注意到

index.html

Hello  {{ rawHtml }}                  
Hello   

index.js

index.html 里使用了 v-html 指令，把 index.js 里的 rawHtml 作為 html 格式

index.html

Hello   

index.js

data: {
    rawHtml: "ArthurSlog"
}

另一個(gè)沒有使用 v-html 指令，而用 {{}}（無邏輯模板） 的，會解釋為給定的值

index.html

Hello  {{ rawHtml }}                  

index.js

data: {
    rawHtml: "ArthurSlog"
}

上面要說的，就是，當(dāng)你使用 v-html 指令的時(shí)候，可以把給定的值按照 html格式 解析，使用方法是：

首先，先把你想執(zhí)行的 html格式的內(nèi)容 賦予變量 rawhtml：

rwahtml: "ArthurSlog"

其次，把你的 html標(biāo)簽 提取出來，這里的 html標(biāo)簽 指的是 ：

然后，給標(biāo)簽上 解析指令 v-html：

最后，把變量 rawhtml 賦值給 v-html 指令，rawhtml 要加上雙引號 “rawhtml”：

至此，我們了解了 vue框架 的模版語法中 v-html 指令的使用。