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


Posted by yuhantaiwan on 2020-03-29

資料單向綁定

藉由改變 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>

參考與延伸閱讀資料


#w3HexSchool #Vue #javascript







Related Posts

Stetho - Android 調試與開發必備工具

Stetho - Android 調試與開發必備工具

Git 版本控制入門(2)- branch

Git 版本控制入門(2)- branch

ROS以控制空拍機

ROS以控制空拍機



Comments