Vue中v-model实现数据双向绑定的另外一种方式

Vue中v-model实现数据双向绑定的另外一种方式

<div id="app">
  <input type="text" v-model="message">
  <b>{{message}}</b>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var app = new Vue({
   el:'#app',
   data:{
     message:"Vue之父-尤雨溪"
   },
  })
</script>

因为input通过v-model指令绑定了message，所以会实时将输入的内容(input.value)传递给message，message发生改变。
当message发生改变，我们通过Mustache语法( 也就是{{}} )将message的值插入到DOM中，所以DOM会发生响应的改变。
这也就是通过v-model实现数据的双向绑定。


数据的双向绑定还可以用另外一种方式实现，也就是通过v-bind指令和v-on指令。

<div id="app">
  <!-- <input type="text" :value="message" @input="message = $event.target.value"> -->
  <input type="text" :value="message" @input="valueChange">
  <b>{{message}}</b>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var app = new Vue({
    el:'#app',
    data:{
      message:"Vue之父-尤雨溪"
    },
    methods:{
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>

这种方式的实现原理：
1：通过v-bind指令绑定input的value属性，将message的值传递给value
2：通过oninput事件监听文本框内容的改变，内容只要发生变化，通过event.target.value获取到文本框内容并赋值给message，这样message就会改变。