07_表单输入绑定

v-model 指令在表单 <input>、<textarea>及 <select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-mode 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

说白了这个model用于监听用户输入v-model 就像是连接用户输入和程序数据的一座桥，让两边的数据可以互相同步，这样你就不需要写很多额外的代码来处理这些同步了

html 复制代码

<template>
  <div id="hello">
    <input v-model="msg" placeholder="开始输入吧...">
    <p>{{msg}}</p>
    <button @click="getUserName">获取用户名</button>
  </div>
</template> 

<script>  

export default {
  name: 'HelloComponent',
  data(){
    return{
      msg: ''
    }
  },
  methods: {
   getUserName(){
    console.log(this.msg)
   }
  },
};
</script>

修饰符

.lazy

在默认情况下，v.mode 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 azy 修饰符，从而转为在 change，事件之后进行同步

change事件就是说他不会立刻同步，而是在失去焦点或者回车的时候才会得到同步，因为实现同步的性能其实消耗也是蛮大的

说人话就是：

有时候我们并不需要实时更新，而是希望等到用户完成输入并触发了"change"事件（比如用户输入完内容后，把光标从输入框移开或者按下回车键）之后，再把输入框里的内容更新到后台数据里。这种情况下，就可以通过添加一个"azy"修饰符（可以理解为一种特殊的标记或指令），来改变同步的时机，从实时同步（input 事件后同步）变成在 change 事件后同步。

简单来说，就是通过添加一个标记，改变输入框内容和后台数据同步的时机，从实时同步变成在用户完成输入操作后同步。

普通项目没有必要在输入的同时向服务器请求数据，一般是回车了，失去焦点了才搞！

html 复制代码

<template>
  <div id="hello">
    <input v-model.lazy="msg" placeholder="开始输入吧...">
    <p>{{msg}}</p>
    <!-- <button @click="getUserName">获取用户名</button> -->
  </div>
</template> 

<script>  

export default {
  name: 'HelloComponent',
  data(){
    return{
      msg: ''
    }
  },
  methods: {
  //  getUserName(){
  //   console.log(this.msg)
  //  }
  },
};
</script>

.trim

如果要自动过滤用户输入的首尾空白字符，可以给model添加trim修饰符

说人话就是->用户输入了无关精要的空格我直接帮你处理了