從零開始的 Vue3 生活- MVVM 概念和 v-model

前言

這篇要來介紹一下 MVVM 模型，雖然 Vue 沒有完全遵循 MVVM 的概念，但 Vue 的設計也是受到此模型的影響。

---

甚麼是 MVVM?

是一種軟體架構模式，MVVM 的全名為 Model-View-ViewModel，它們分別代表：

• Model 是資料存取層(資料狀態)
• View 是畫面顯示層，也就是你現在看到的網頁(視圖)
• View-Model 是資料與顯示互動中介層(資料聯繫器)

在 MVVM 架構下，View 和 Model 並沒有直接的聯繫，而是透過 View-Model 來進行交流。View-Model 透過資料雙向綁定將 View 和 Model 聯繫起來，使得 View 和 Model 的同步工作是自動的。所以當 Model 改變時，View 也會跟著做改變；反過來也是一樣。

v-model 資料雙向綁定

v-model 這個指令常用在表單元素，為實現資料雙向綁定。

綁定 <input>：

<div id="app">
  <input type="text" v-model="name"/>
  <span>{{ name }}</span>
</div>

const app = Vue.createApp({
  data() {
    return {
      name: '',
    }
  }
}).mount('#app')

---

綁定 <select>：

<div id="app">
  <select v-model="name">
    <option value="tom">tom</option>
    <option value="lucy">lucy</option>
    <option value="tony">tony</option>
  </select>
  <div>
    選擇的名字: {{ name }}
  </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      name: '',
    }
  }
}).mount('#app')

---

綁定 checkbox

checkbox 勾選和沒有勾選時預設會回傳 true 和 false。我們也可以透過 :true-value 和 :false-value 來決定回傳值：

<div id="app">
  <h3>預設取得 boolean 值</h3>
  <input type="checkbox" v-model="markWithBoolean">
  <div>
    以勾選: {{ markWithBoolean }}
  </div>
  <h3>將預設的 true 和 false 值改成其他值</h3>
  <!-- 將 true 和 false 值分別改成 1 跟 0 -->
  <input 
    type="checkbox" 
    v-model="markWithNumber" 
    :true-value="1" 
    :false-value="0"
  >
  <div>
    以勾選: {{ markWithNumber }}
  </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      markWithBoolean: false,
      markWithNumber: 0,
    }
  }
}).mount('#app')

v-model 修飾符

v-model 除了能做資料雙向綁定，還提供額外的修飾符(modifiers)

用法: v-model.xxx

.lazy：使用者離開 input 時才會更新資料

.number：強制將使用者輸入的數值轉成 Number 型別，輸入字串時轉換無效

.trim：將頭尾空白去除

參考資料

掘金論壇
Summer。桑莫。夏天