支配vue框架之模版語法 v-html

ArthurSlog

SLog-7

Year·1

Guangzhou·China

July 14th 2018

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

開發環境MacOS(High Sierra 10.13.5)

需要的信息：

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

index.js

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

cd ~/Desktop/node_vue_TemplateSyntax_learningload

啟動靜態web伺服器

node index.js

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

請注意到

index.html

index.js

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

index.html

index.js

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

index.html

index.js

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

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

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

然後，給標籤上 解析指令 v-html：

最後，把變數 rawhtml 賦值給 v-html 指令，rawhtml 要加上雙引號 「rawhtml」：

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！