v-module双向数据绑定实现原理及修饰符的使用

02学习笔记-v-module双向数据绑定及修饰符的使用

v-module双向数据绑定实现原理

• v-module其实是一个语法糖

• 它主要做了两件事

  • 在input中绑定value:value="message"message是自定义的
  • input本身有个事件叫input，用于监听value的值，在input中监听这个事件，并给它赋值给message

• <input type="text" v-model="message">等同于下面这句

• <input type="text" :value="message" @input="message = $event.target.value">

<div id="app">
  <!-- input本身有个事件叫input，用于监听value的值 -->
  <input type="text" :value="message" @input="change">
    <h2> {{message}} </h2>
</div>

<script src="../js/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      message:"v-module实现原理"
    },
    methods: {
      change(e) {
        this.message = e.target.value;
      }
    }
  });
</script>

v-module的修饰符

• lazy：延迟数据实时更新，当按回车或鼠标移除时再更新数据，像防抖

• number：在input中输入的都是string类型，想要输入数字不在进行类型转换可以使用number

<div id="app">
  <!--1.修饰符 lazy 延迟数据实时更新，当按回车或鼠标移除时更新数据-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
  <!--2. number  将类型转为number-->
  <input type="text" v-model.number="number">
  <h2>{{number}}- {{typeof number}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
    message: 'Vue',
    number: ''
  },
  });
</script>