v-model的基本使用和底层原理

基本使用

基本说明:

          **     通过v-model可以实现数据的双向绑定,实现vue.js变量和表单标签的value 属性**

为什么使用v-model?

                 **   v-model是语法糖作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高**<br />**              前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。**

双向绑定:

                   **数据(data)变化 -> 视图(view)变化同步**<br />**                     视图(view)变化 -> 数据(data)自动同步**

注意: v-model一般情况用于表单元素中(不是一定的)

基本使用:

<template>
  <div> 
    <div>
<!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 | 非数组绑定checked是否选中布尔属性值 -->  
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
      <input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
      <input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
    </div>
    <div>
      <span>性别</span>
      <input type="radio"  v-model="sex" value="男" /><span>男</span>
      <input type="radio"  v-model="sex" value="女" /><span>女</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hobby: [], 
      sex: ""
    };
  }
};
</script>

特别注意:

       1.  **当我们改变input值的时候,会发现data中的定义的变量也同步发生了变化**
     **  2.  v-model, 在input[checkbox]的多选框状态:**<br />**               状态1: **变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用**     **<br />**               状态2: **变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值**     **

底层原理:

简单描述

说明:

v-model就是一个语法糖,首先给元素动态绑定一个value属性,再给元素绑

定一个input事件

原理代码演示

原理简单说明

                      ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1625128471665-bb5e1e6f-4c49-447a-8ba2-7cebd45242a4.png#clientId=ub9a24b9e-2f76-4&from=paste&height=153&id=ub7447ef6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=153&originWidth=558&originalType=binary&ratio=1&size=14009&status=done&style=none&taskId=u9a17ce64-97d3-4eb7-9ec5-24d3b38f952&width=558)

给组件绑定value ,监听了input事件

input和value 其实也是可以改的:

    如果想把input改成input123,可以在子组件里面加一句: <br />     ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624499815623-ca6dd7db-8599-49a2-b895-30d768dd2144.png#clientId=u204b1ce4-b845-4&from=paste&height=105&id=u8091f8d8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=105&originWidth=281&originalType=binary&ratio=1&size=19171&status=done&style=none&taskId=u094b79a9-4a5d-47c7-a93f-b4fce0a196f&width=281)

看似一个简单的v-model数据绑定,其实背后就做了很多的事

情, 上图所示: 父传子(props接收),让父子之间建立通信,,子传父($emit),触发回调函数,把新值

(‘666’)传了过去 父页面的content就从’111’变成了’666’