Vue.js 學習旅程Mile 6 – 資料單向綁定篇：v-text & v-html

資料單向綁定

藉由改變 data 來改變畫面 view

v-text

更新文字內容，如同 js 中的 textContent。

<div v-text=""> 可用 {{ mustache }} 簡寫。

v-text 與 {{ mustache }} 的不同之處在於，v-text 會更新整塊標籤的內容（包含本身），但 {{ mustache }} 只會更新標籤內的局部內容。

範例

<div id="app">
  <p v-text="message">這是原本的文字，</p>
  <p>這是原本的文字，{{message}}</p>
</div>

let app = new Vue({
  el: "#app",
  data: {
    message: "這是後來的文字"
  }
});

v-html

可渲染出 HTML，如同 js 中的 innerHtml

範例

<div id="app">
  {{ message }}
  <div v-text="message"></div>
  <div v-html="message2"></div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '哈囉',
    message2: '<span style="background-color: yellow;">hi</span>'
  }
})

XSS 攻擊

注意：任意在網站上動態渲染 HTML 是非常危險的，因為容易導致 XSS 攻擊。

XSS(Cross-site scripting，跨網站指令碼攻擊)：藉由網頁開發時留下的漏洞，利用巧妙的方法注入惡意指令代碼到網頁，使用戶載入並執行攻擊者惡意製造的網頁程式。
關於XSS攻擊，可參考這篇文章，內有詳細的解說。
因此，盡量避免在表單或是留言區使用 v-html，因為很有可能會被有心人力從外部寫入惡意程式碼。

v-html 套用 CSS 樣式

單一元件(.vue)中 v-html 的內容不會套用有寫 scoped 的 CSS style，因為 v-html 的內容並沒有被 Vue 模板編譯器編譯過。

在不設為全域變數下，若想要讓 v-html 能套用 CSS scoped 樣式，有三種方式：

1. 使用 CSS modules
2. 在全域變數中，透過特殊的命名（例如：BEM）
3. 使用 Deep Selectors

範例(使用 Deep Selectors)：

<template>
  <div class="a" v-html="content"></div>
</template>

<script>
  export default { 
    data() {
      return {
        content: 'this is a <a class="b">Test</a>',
      }
    },
  }
</script>

<style scoped>
  .a >>> .b {
    color: red;
  }
</style>

參考與延伸閱讀資料

• Vue.js API
• [Vue學習筆記]（三）Vue指令（上） — v-text, v-html, v-if, v-show, v-for
• 跨網站指令碼
• 【網頁安全】給網頁開發新人的 XSS 攻擊 介紹與防範
• BEM
• BEM 規範思維 – 讓 CSS 更利於開發與維護 (一)
• Scoped styles with v-html
• vue 中控制v-html 中的樣式，但不影響全局的小技巧
• CSS Modules 用法教程