什么是vue的双向绑定以及双向绑定的作用

<template>
  <div>
    <!-- 面试题:双向绑定是什么 -->
    <!-- 双向数据绑定是什么:就是用户修改表单元素时 自动更新绑定的数据 -->
    <!-- {{}} 这个是在双标签用的 input是单标签-->
    <!-- 斜杠是单标签的闭合语法,h5之前要加 之后不用加可以 -->
    <!-- $input是实时监听的 -->
    <!-- V-model的原理  -->
    <input type="text" :value="key" @input="keyChange"/>
    <!-- form表单元素的特点:按钮 单选框 多选框 输入框等 都可以和用户交互 -->
    <br>
    <!-- s实战中可以直接写 -->
    <input type="text" v-model="key">
    <p>key:{{key}}</p>
    <input type="text" v-model="x">
    <div>{{x}}</div>
    <button>{{x}}</button>
  </div>
</template>
<script>
export default {
    methods:{
      //e是事件参数 target是触发事件参数
      keyChange(e){
        console.log(e.target.value);
        this.key=e.target.value;
      }
    },
  data() {
    return {
      key: "skyline",
      x:"111",
    };
  },
};
</script>

<style lang="scss" scoped>

</style>

<template>
  <div>
    <input type="text" placeholder="请输入您的用户名" v-model="uname"><br>
    <input type="password" placeholder="请输入您的密码" v-model="password"><br>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  //需求:同时读取两个输入框的值,并发送登录请求
  
    methods:{
    login(){
      console.log(this.uname);
      console.log(this.password);
    }
  },
  data() {
    return {
      uname: "",
      password:""
    }
  },
};
</script>

<style lang="scss" scoped>
</style>