昨天跟各位介紹了屬性綁定：v-bind 及資料雙向綁定：v-model
相信大家對於 v 開頭的事件也有初步認識了
那接下來我們就來聊聊也是 v 系列的模板綁定吧！

v-text

還記得我們有跟各位提過，如果想透過渲染的方式在網頁上呈現想要的文字時，可以使用兩個大括弧 {{}} 的語法做處理，就像這樣：

<template>
  <p>{{ iThome }}</p>
</template>

<script>
export default {
  data() {
    return {
      iThome: "123",
    };
  },
};
</script>

而網頁會呈現：

那如果使用 v-text 的話，也是能達到一樣的成效的：

<template>
  <div v-text="iThome"></div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "example",
    };
  },
};
</script>

而網頁會呈現：

由此看來兩種用法皆可以得到相同結果，但差別就在於 v-text 可以更新整塊標籤的內容，而 {{}} 模板語法則是只能更新標籤內的局部內容。

v-html

v-html 與 v-text 的指令非常類似。可以把 v-html 和 v-text 想像成 JavaScript 的 innerText 與 innerHTML。即使 data 裡的資料是 html 格式的字串，但如果使用 v-text 或 {{}} 的方式去輸出的話，輸出的結果會是原先的 html 字串，而不是使用 html 渲染而成的，就像這樣：

<template>
  <div v-text="iThome"></div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "<h1>example</h1>",
    };
  },
};
</script>

我們在 data 中將 iThome 的字串中加入標籤，接者渲染至網頁：

可以看到標籤會被直接轉為字串，但如果將 v-text 改為 v-html 的話：

<template>
  <div v-html="iThome"></div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "<h1>example</h1>",
    };
  },
};
</script>

可以發現裡面我們的標籤並不會被定義成字串，而是以 html 的語法呈現。

v-once

V-once 顧名思義，只會將 data 中的內容渲染一次，接者就不再更新

<template>
  <div v-text="iThome"></div>    //v-text
  <div v-html="iThome"></div>    //v-text
  <div v-once> {{iThome}} </div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "<h1>example</h1>",
    };
  },
};
</script>

為了讓大家可以看出差異，這裡我另外加入 v-text 與 v-html 比較，接者來看看網頁：

可以發現與 v-text 一樣無差異，但如果我們新增一個 input 並加上 v-model 讓他可以隨著使用者的輸入而即時更新時：

<template>
  <input v-model="iThome">  //輸入框
  
  <div v-text="iThome"></div>
  <div v-html="iThome"></div>
  <div v-once> {{iThome}} </div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "<h1>example</h1>",
    };
  },
};
</script>

再來我們可以看看網頁的變化：

可以發現當我們的 input 被改變時，v-text 與 v-html 都能及時同步，唯獨 v-once 在初始化後，不論我們輸入甚麼，也都不會有所改變，而這就是其特性。

v-pre

相信經過我們的介紹，大家對於兩個大括弧 {{}} 的模板語法已經不陌生了，他可以讓我們網頁去呈現 data 所以定義的資料。那這時候就有人問了：假如我今天並不想使用模板語法，而是想讓我的網頁去呈現那兩個大括弧與它裡面的資料時，有沒有辦法呢？

恭喜！還真的有呢，vue.js 的開發團隊已經料到日後會有這樣的問題產生，所以很貼心的提供我們 v-pre 的語法，只要在標籤中加上他，我們的網頁內容就不會受限於模板語法的綑綁了：

<template>
  <div v-pre>{{ iThome }}</div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "<h1>example</h1>",
    };
  },
};
</script>

可以看到我們在 data 中定義了一個 iThome 的字串，並讓他呈現在網頁上，但由於我們加上了 v-pre ，讓 vue 可以忽視模板語法，直接將內容呈現：

好啦，那今天我們對於模板綁定四大指令的介紹就到這邊告一段落了
謝謝大家的耐心觀看，那我們就明天見囉！