v-model的代码简单实现原理

v-model的代码简单实现原理

v-model是实现数据双向绑定的指令，那么它究竟怎么样实现数据的双向绑定的呢？今天我们就来说一下
今天对v-model又有了些新的理解 所以赶紧记录下来 修改一下以前发的

<!--<input type="text" v-model="message">-->
    <!--v-model实现双向绑定 首先理解所谓双向绑定  即是v-model加入绑定一个输入框 通过输入框的输入使得data中被绑定的数据的值改变
        这个可以通过绑定input输入框的默认input事件(input事件在用户输入时触发，它是在元素值发生变化时立即触发；)
        还有就是data数据中的值改变 可以使input框的value值改变(这个通过v-bind动态绑定数据就可做到) 
        所以说我们只要通过绑定input事件和value属性就可以做到v-model的双向绑定 -->
   <!-- <input type="text" :value="message" @input="changeValue">-->
    <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: '#app',
      data: {
        message: '你好啊'
      },
      methods:{
      //在我们触发事件的时候浏览器会默认创建一个evnet浏览器对象
        changeValue(event){
          this.message=event.target.value
        }
      }
    })

简单来说，v-model的双向绑定就是使用绑定value属性和input事件来实现的，只不过对它们两个进行了封装，这就是v-model实现双向绑定的简单实现。如有错误，欢迎各位大佬进行指正。