iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

我的菜很有Vue味~系列 第 10

Day10 Vue模板語法 & V-text、V-html、V-once介紹

  • 分享至 

  • xImage
  •  

什麼是模板語法?

模板語法是邏輯與頁面之間溝通的媒介,Vue.js 使用了基於HTML 的模板語法,允許開發者聲明式(declaratively)地將DOM 綁定至底層Vue 實例的數據。

常見的Vue模板語法為兩種

  1. 差值Mustache語法
  2. directives(指令) 如:v-on、v-bind、v-model...

今天的話我會先來說說Mustache與V-text、V-html、V-once的適用方式

Mustache語法

Mustache簡單來說就是使用大括號

像這樣就寫好了是不是很簡單

V-text、V-html、V-once

V-text插入:渲染純文字內容
V-html:插入整個html結構
V-once:將 data 內的內容渲染後,不會再有變化

下面我們可以去看到我分別去使用了這三個指令

最後可以看到好像沒錯

今天就先到這了,明天見!


上一篇
Day9 Vue Watch & Computed
下一篇
Day11 Vue directives(v-on & v-bind)
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言