v-model的基本使用

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

<script>


export default {
  name: 'App',
  data() {
    return {
      message: 'hello'
    }
  },

}
</script>

v-model 相当于两个指令(v-bind 和 v-on)的结合

v-model其实就是一个语法糖 他的本质其实就是两个操作

1.v-bind绑定一个value 属性

2.v-on绑定一个input事件

<template>
  <div id="app">
    <!-- input事件可以监听用户输入 -->
  <input type="text" :value='message' @input="newValue" >
  <h2>{{message}}</h2>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {
      message: 'hello'
    }
  },
  methods:{
    newValue(e){
      // e.target.value 可以获取到输入框变化后的值
      // 然后把获取到的值赋给 message
      this.message= e.target.value
    }
  }
}
</script>