zoukankan      html  css  js  c++  java
  • 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实现双向绑定的简单实现。如有错误,欢迎各位大佬进行指正。

  • 相关阅读:
    C# 动态创建SQL数据库(一)
    在Winform中菜单动态添加“最近使用文件”
    转(C# 类似右键菜单弹出窗体)
    为什么不能用Abort退出线程
    C# GDI绘制波形图
    转(C# 实现生产者消费者队列)
    为字段设置初始值
    闲话资源管理
    正确使用 new 修饰符
    减少装箱与拆箱
  • 原文地址:https://www.cnblogs.com/gesh-code/p/14129054.html
Copyright © 2011-2022 走看看