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

ArthurSlog

SLog-7

Year·1

Guangzhou·China

July 14th 2018

GitHub

掘金主頁

簡書主頁

segmentfault

去往目的地的列車可能會晚點 但絕不會缺席

vue模板語法官方手冊

我的上一篇文章：使用vue前端框架實現單頁應用（SPA）

切換至桌面路徑

cd ~/Desktop

創建一個新文件夾

mkdir node_vue_TemplateSyntax_learningload

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

cd node_vue_TemplateSyntax_learningload

使用npm指令初始化nodejs項目環境，一路回車，完成初始化

npm init

安裝 koa 和 kao-static

sudo npm install koa koa-static

需要管理員權限，輸入密碼

在當前路徑下創建 index.js 和 index.html 這兩個文件，其中 index.js 實現了一個靜態web服務器：

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");

現在，切換至 ~/Desktop/node_vue_TemplateSyntax_learningload 路徑下

cd ~/Desktop/node_vue_TemplateSyntax_learningload

啟動靜態web服務器

node index.js

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

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"
}

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

index.html

Hello  {{ rawHtml }}                  

index.js

data: {
    rawHtml: "ArthurSlog"
}

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

首先，先把你想執行的 html格式的內容 賦予變量 rawhtml：

rwahtml: "ArthurSlog"

其次，把你的 html標簽 提取出來，這里的 html標簽 指的是 ：

然后，給標簽上 解析指令 v-html：

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

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