vue语法v-model原理与实现

vue model 编程技术

发布日期 2023-07-16 更新日期 2023-07-16 阅读次数 122 文章字数 586

在vue官方文档中说到，v-model只是语法糖

在v-model内部为不同的输入元素使用不同的属性并抛出不同的事件

text-textarea元素使用value属性和input事件
checkbox和radio使用checked属性和change事件
select字段将value作为prop并将change作为事件

按照顺序，是先触发事件然后在事件里修改对应的值，如果没有触发对应的事件【例如js直接修改元素属性值，并不会触发dom元素对应的事件】，就无法双向绑定了。

手工实现v-model例子：

  <div id="app">
    <p>v-model绑定的数据为：{{value1}}</p>
    <input type="text" v-model="value1">

  <p>绑定的数据为：{{value2}}</p>
  <input type="text" :value="value2" @input="changeVal">
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        value1: '',
       value2: ''
      },
    methods: {
      changeVal (e) {
        this.value2 = e.target.value
      }
    }
    })
  </script>

文章作者: 朱丰华

文章链接: https://smart.52dixiaowo.com/blog/post-451.html

vue model