Vue 的雙向綁定：v-model

寫在前面

Vue 框架早已經不是 MVVM（Mode-View-View-Model） 雙向綁定了。早在 Vue 1.0 時代，Vue 在剛出世的時候的確是 MVVM 雙向綁定。自 Vue 2.0 以來，Vue 就再也不是雙向綁定了，而是像 React 同樣是單向綁定 MV（Model-View）了。可是，在 Vue 中仍保留了雙向綁定的接口，v-model 就是。

1. 基本用法

<template>
  <div id="app">
    <input v-model="x">
    {{x}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      x: 'init'
    }
  }
}

在 JS 中修改 x 的值，input 輸入框裏也會隨之改變。一樣地，在頁面中的 input 輸入框內手動輸入值，變量 x 的值也會隨之改變。對象裏的變量改變會影響視圖的 input 的改變，視圖中 input 的改變會影響對象裏變量 x 值的改變。這就是雙向綁定（Model-View-View-Model）。

2. v-model 實質

上述使用 v-model 的代碼等價於以下代碼：

<template>
  <div id="app">
    <input :value="x" @input="x = $event.target.value">
    {{x}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      x: 'init'
    }
  }
}
</script>

v-model 幫咱們作的事就是，爲 input 的 value 值設置一個動態綁定，而後在輸入框的 input 事件觸發後實時修改動態綁定的 value 的變量值。所以 v-model 實質是上述方式的語法糖。

$event 是原生 DOM 事件裏的 event 事件對象。

其他表單的輸入綁定詳見 vue 表單

3. v-model 的修飾符

全部修飾符都是起一個輔助的做用，其實能夠在函數裏本身判斷條件實現。

.lazy

v-model 默認監聽的是輸入框的 input 事件，原生 DOM 的 input 事件就是記錄實時的輸入變化值。可是，咱們有時不須要實時記錄結果，只須要記錄最終輸入的結果值就能夠了。
input 的原生 DOM 事件中還有一個 change 事件，該事件是在 輸入框失去焦點時 或 按下回車鍵時 執行的。v-model 裏以 .lazy 修飾符的方式切換至該監聽模式。

<template>
  <div id="app">
    <input v-model.lazy="x">
    {{x}}
  </div>
</template>

等價於：

<template>
  <div id="app">
    <input :value="x" @change="x = $event.target.value">
    {{x}}
  </div>
</template>

.number

.number 修飾符是在輸入內容改變後進行變量賦值時，自動使用 parseFloat() 函數將其變成數字。
使用該修飾符時變量的初始值必須是數字。

<template>
  <div id="app">
    <input v-model.number="x">
    {{x}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      x: 0
    }
  }
}
</script>

.trim

.trim 修飾符是將輸入的內容改變後進行變量賦值時，自動忽略和去除先後的空格。更爲精準地記錄輸入的字符串內容。

<template>
  <div id="app">
    <input v-model.trim="x">
    {{x}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      x: 'init'
    }
  }
}
</script>

4. 自定義輸入框的 v-model

v-model 的基本用法僅僅適用於 原生的輸入框元素，對於用戶本身封裝的輸入框，能夠用以下方式使用 v-model。
當用在組件上時，v-model 的實質以下：

<custom-input v-model="x"></custom-input>

等價於：

<custom-input :value="x" @input="x = $event"></custom-input>

所以，在自定義表單組件裏的寫法以下：

<template>
    <div class="wrapper">
        <input :value="value" @input="$emit('input', $event.target.value)">
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String
        }
    }
}
</script>

<style scoped>
    .wrapper{
        border: 2px solid blue;
        display: inline-block;
    }
    .wrapper input{
        color: red;
    }
</style>

<template>
  <div id="app">
    <MyInput v-model="x"/>
    {{x}}
  </div>
</template>

<script>
import MyInput from './components/MyInput'
export default {
  data(){
    return {
      x: 0
    }
  },
  components:{
    MyInput
  }
}
</script>

補充：若想在自定義組件裏面的原生輸入框也使用 v-model，能夠根據組件 v-model 的實質，使用計算屬性的賦值方式爲 = 使用。