Vue笔记：v-model的使用

一，v-model的基本使用

在了解v-model之前，我们务必要明白v-model本质上是一种语法糖，它其实是由动态属性绑定和input事件绑定而形成的双向数据绑定。

（1）v-model的基本使用

<template>
  <h2>{
  { message }}</h2>
  <input type="text" v-model="message">
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  }
}
</script>

<style scoped>

</style>

当表单使用v-model时，v-model会绑定一个变量，这个变量与表单的value是互相影响的，如果我们改变message时，表单的内容（即value）会发生相应的变化。同样地，如果我们手动修改表单的内容，这种影响也会反映到message上，结果就是h2的内容发生变化。 

（2）v-model的绑定原理

在看完上方的v-model的使用方式后，如果理解的没问题的话，目前其实是可以跳过这一段的，但是在后面组件v-model得学习原理才能够明白，所以还是推荐这里看一下原理，方便以后理解。

<template>
  <h2>{
  { message }}</h2>
  <!-- <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="getValue"> 
</template>

<script>
export default {
  data(){
    return {
      message:"Hello Vue"
    }
  },
  methods:{
    getValue(e