Vue 中v-model的完整用法及原理

首先我们先来了解一下v-model的基本用法和原理。

v-model的基本用法

在Vue中，v-model被用来实现表单元素和Vue实例之间的双向数据绑定。v-model通常和表单元素input、textarea、select等配合使用。将 v-model 赋值给一个普通的变量，这个变量就可以被修改以响应用户的输入和交互。

v-model的基本语法如下：

<input v-model="message" type="text">

在这个例子中，message 是Vue实例中的一个数据属性，它会被绑定到输入框中。如果用户修改了输入框中的值，message 的值也会自动更新。

v-model的原理

v-model实际上是一个语法糖，它只是一个简便的写法，把原本需要手动绑定数据和监听事件的过程，简化成了一句话。在 input 或 textarea 中，使用v-model相当于同时绑定了 value 属性和 input 事件。

下面是v-model的实现原理：

<input v-bind:value="message"
       v-on:input="message = $event.target.value"
       type="text">

通过上述代码可以看出，v-model的实现原理就是给input元素绑定了一个value属性，同时通过v-on:input绑定了一个input事件监听器。当用户输入时，input事件被触发，然后input事件监听器中的代码会将输入框中的值更新到数据对象中。

接下来，我们来看下v-model的完整用法，包括一些特定的场景的使用。

v-model结合checkbox和radio的使用

在复选框和单选框中，v-model的表现略有不同，我们一起来看看。

checkbox

当复选框被勾选时，v-model绑定的数据属性会变成一个包含每个被勾选复选框的值的数组。例如：

<div id="example-3">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>选中的名字：{{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})
</script>

在上述代码中，当选中Jack和Mike时，checkedNames数组将是['Jack', 'Mike']，这和多选的场景非常类似，因此我们可以使用同样的方式处理复选框绑定的数据。

radio

在单选框中，v-model绑定的数据属性只是单选框的值，而不是包含它的数组。例如：

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>选中的值：{{ picked }}</span>
</div>

<script>
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})
</script>

在上述代码中，当选择One时，picked的值就是'One'，选择Two时，picked的值就是'Two'。

v-model结合多个组件的使用

v-model还可以从一个组件中继承并利用它作为一个自定义事件来自动更新父应用程序的状态。这样就可以让子组件更加可重用和解耦，同时仍能保留应用程序的状态流。

下面是一个实例，实现了一个数值调整器组件，包含加1和减1两个按钮，同时绑定了一个value属性：

<template>
  <div class="field">
    <button v-on:click="decrement">-</button>
    <input type="text" v-model="localValue">
    <button v-on:click="increment">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number
    }
  },
  data () {
    return {
      localValue: this.value
    }
  },
  methods: {
    increment () {
      this.localValue++
      this.$emit('input', this.localValue)
    },
    decrement () {
      this.localValue--
      this.$emit('input', this.localValue)
    }
  }
}
</script>

然后，我们可以在父组件中使用它，将 v-model 绑定到一个计算属性中：

<template>
  <div class="counter">
    <h2>计数器：{{ counter }}</h2>
    <counter v-model="counter"></counter>
  </div>
</template>

<script>
import Counter from './components/Counter.vue'
export default {
  components: {
    Counter
  },
  data () {
    return {
      counter: 0
    }
  },
  watch: {
    counter () {
      console.log(this.counter)
    }
  }
}
</script>

在上述代码中，我们首先在父组件中定义了counter数据属性，并将它作为 v-model 绑定到counter组件的value属性上。当我们在子组件中通过 $emit 发送一个名为 input 的事件时，父组件的计算属性会自动更新。

以上就是v-model的完整用法和原理介绍，如果你理解了这些内容，相信你能更加深入的理解并熟练运用v-model。