純 JS 的環境裡要改變 DOM 元素，除了要找到他，還要用 setAttribute, textContent...等等方式來綁定資料，在 Vue 中只要把資料準備好，愛怎麼綁就怎麼綁，馬上來看看這些『v-』指令的神奇吧！

Vue 範例程式碼

接下來的各種功能，都會使用以下這段程式碼內的資料來示範，下面的段落就不會再重複撰寫宣告 Vue 物件的程式碼了。

const vm = Vue.createApp({
  data () {
    return  {
      test: "Hello",
      num: 999,
      testHTML: "<p>Hola</p>"
    }
  }
}).mount('#app');

{{ }}

• 前幾天介紹過的雙大括號，用來綁定標籤內的文字

  <div id="app">
    <h1>{{ test }}</h1>
  </div>
  

• 瀏覽器渲染後

  <div id="app">
    <h1>Hello</h1>
  </div>
  

v-bind

• v-bind: 用來綁定標籤內的『屬性』

  <div id="app">
    <h1 v-bind:id="test">Hi</h1>
  </div>
  

• 瀏覽器渲染後

  <div id="app">
    <h1 id="Hello">Hi</h1>
  </div>
  

• v-bind: 可以直接簡寫成 ":"，非常方便

  <div id="app">
    <h1 :id="test">Hi</h1>
  </div>
  

v-model

• 前面介紹的兩項都是單向綁定，也就是把值取出來然後放到指定位置，v-model 則是雙向綁定，除了把值取出來，也可以把值修改後寫回去原本存放資料的屬性中，通常會搭配 input, textarea, select...等表單元素使用。
• v-model 搭配 input

  <div id="app">
    <input v-model="test">
    <h1>{{ test }}</h1>
  </div>
  

  • 上面的範例碼在瀏覽器渲染後，若在 input 裡面輸入文字，下方的 h1 也會同時變動。

v-model + 修飾子

v-model後面可以接上修飾子，就可以瞬間完成某些原本需要額外判斷的功能

1. <input v-model.lazy="test">
   .lazy 的方法可以在取消鎖定在輸入欄位時才觸發雙向綁定。
2. <input v-model.number="num">
   .number 的方法可以將內容的資料轉成數字格式
3. <input v-model.trim="test">
   .trim 的方法可以將內容的空白字元過濾掉

v-text

除了用 {{}} 來綁定文字內容，也可以用 v-text來綁定。

<div id="app">
  <h1 v-text="test"></h1>
</div>

要注意的是如果標籤內還有其他文字內容，會被 v-text 給覆蓋掉。

v-html

v-text 像是 textContent，只會用純文字顯示，若要達到 innerHTML 的功能，就要使用 v-html，就能把 HTML 渲染出來了。

<div id="app">
  <h1 v-html="testHTML"></h1>
</div>

v-once

v-once 只會做一次綁定，後面就算資料變更了，也不會重新渲染。

<div id="app">
  <h1 v-once>{{ test }}</h1>
</div>

v-once 放置在標籤內，就像個標示一樣，後面沒有銜接資料。

v-pre

v-pre 是 {{}} 的跳脫字元，想在網頁內容顯示雙大括號時可以使用。

<div id="app">
  <h1 v-pre>{{ test }}</h1>
</div>

上面 HTML 渲染結果會顯示 {{ test }}，不會轉換成 Vue 物件內的資料。