v-model其实就是一个语法糖，它的背后本质上是包含两个操作：

  • 1.v-bind 绑定一个value属性
  • 2.v-on 指令给当前元素绑定input事件

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="vue">
  <!--方式1-->
  <!--<input type="text" v-model="message">-->

  <!--方式2-->
  <!-- :value 等同于 v-bind -->
  <!--这种方法可以进行监听输入参数，并进行校验-->
  <!--如果监听事件不带参数，而方法中带参数，那么vue会自动把对象传到方法中去-->
  <input type="text" :value="message" @input="valueChange">

  <!--方式3-->
  <input type="text" :value="message" @input="message = $event.target.value">

  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>

<script>

  const app = new Vue({
    el: '#vue',
    data: {
      message: '你好！华为'
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  });
</script>

</body>
</html>