Vue框架学习笔记——v-bind数据单向绑定和v-model数据双向绑定

布满荆棘的人生 2024-02-18 13:23 50阅读 0赞

#### 文章目录 ####

*  v-bind，数据单向绑定
 *   *  简写形态（省略v-bind，只留冒号）
     *  示例一（将输入框数据改为：哈哈哈哈哈）：
     *  实例二（将Vue实例中的name改为字符串："单向绑定"）：
 *  v-model，数据双向绑定（并非所有属性均可使用）
 *   *  简写形态（保留v-model，删除冒号和value，即":value"）：
     *  示例一（将v-model对应的输入框输入数据：哈哈哈）：
     *  示例二（将Vue实例中的name改为字符串"我不知道"）：
 *  无法使用v-model的情况：
 *   *  示例一（使用v-bind成功）：
     *  示例二（使用v-model失败）：

--------------------

## v-bind，数据单向绑定 ##

当我们将代码写成这样的时候，只使用v-bind单向绑定标签内元素的属性：

<body>
      <div id="box">
        <input type="text" v-bind:value="name">
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
    
        new Vue({
          
          el: '#box',
          data: {
          
            name: "这里是name的值",
          }
        })
      </script>
    </body>

会呈现如下的效果：  
![在这里插入图片描述][518b037dfde348c287732b10185c43ed.png]  
标签中的数据和Vue实例中的数据是单向绑定的，Vue实例中的对应数据改变会带着标签中的数据改变，但是标签中的数据改变则不会带着Vue实例中的数据改变。

### 简写形态（省略v-bind，只留冒号） ###

展示图片（未刷新页面，未修改代码，仅在该页面直接修改或者使用Vue开发者工具）：

### 示例一（将输入框数据改为：哈哈哈哈哈）： ###

Input输入框中的数据无法带动Vue实例中的数据一起变化  
![在这里插入图片描述][9008f241b5ce4043a239a1d0d215fe24.png]  
效果：Input中的数据改变了，但是Vue实例中的数据没有改变

### 实例二（将Vue实例中的name改为字符串：“单向绑定”）： ###

修改Vue实例数据可以改变Input输入框数据  
![在这里插入图片描述][3b0268330dcb4c79a0a71a4e18471ac3.png]  
效果：Vue实例中的数据改变可以带动Input中的数据改变

## v-model，数据双向绑定（并非所有属性均可使用） ##

多应用于表单类元素，其他元素会出错。  
将上述的代码修改为：

<body>
      <div id="box">
        v-bind:<input type="text" v-bind:value="name">
        <p></p>
        v-model:<input type="text" v-model:value="name">
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
    
        new Vue({
          
          el: '#box',
          data: {
          
            name: "这里是name的值",
          }
        })
      </script>
    </body>

就像v-bind可以简写一样，v-model针对于value值，也可以简写。

### 简写形态（保留v-model，删除冒号和value，即":value"）： ###

不会出现错误

使用v-model就可以实现数据的双向绑定，也就是input输入框中的数据会影响Vue实例中的数据，Vue实例中的数据也会影响Input输入框中的数据。

展示图片（未刷新页面，未修改代码，仅在该页面直接修改或者使用Vue开发者工具），存在数据双向绑定和数据单向绑定的连锁反应，可以仔细自考

### 示例一（将v-model对应的输入框输入数据：哈哈哈）： ###

![在这里插入图片描述][7b18c33de8fb4bb28dd0bebfe5b89da3.png]  
效果：修改v-model的数据会改变Vue实例中的数据，进而带动单向数据绑定的v-bind输入框一起变化

### 示例二（将Vue实例中的name改为字符串"我不知道"）： ###

![在这里插入图片描述][2e03baceb4b647c3ba0728f1ea3fafe4.png]  
效果：修改Vue实例中的数据会改变v-model的数据，也会改变v-bind输入框的数据

## 无法使用v-model的情况： ##

v-model只能用于表单情况，输入类元素，存在value值的情况。  
不存在value值的元素无法捕捉用户的输入数据，根本不存在从元素改变数据的路径。

单选框，多选框，Input，select等等都行，它们都存在value值

### 示例一（使用v-bind成功）： ###

样例代码：

<body>
      <div id="box">
        <h1 v-bind:x="name">这里</h1>
    
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
    
        new Vue({
          
          el: '#box',
          data: {
          
            name: "这里是name的值",
          }
        })
      </script>
    </body>

实例图片（使用v-bind，元素界面x属性没有丢失）：  
![在这里插入图片描述][17b12813b57b458bbd2a38012780cbcb.png]

### 示例二（使用v-model失败）： ###

样例代码（将示例一代码中的v-bind修改为v-model）：

![在这里插入图片描述][0c0be80c51bb418c8535c089c6cfd05a.png]  
h1标签中的x属性丢失，且可以在控制台（console）发现错误（模版编译失败）：  
![在这里插入图片描述][e1bf85dcae324644a1d8909f8395bec4.png]

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[518b037dfde348c287732b10185c43ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/89258519583d4c9090b9d041cb2a6d6b.png
[9008f241b5ce4043a239a1d0d215fe24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/8dc91b16852d4c8493adfbc537886aa2.png
[3b0268330dcb4c79a0a71a4e18471ac3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/42d1465cff234fe3bd8715ac0146ea3d.png
[7b18c33de8fb4bb28dd0bebfe5b89da3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/26981ed7b96f499ea123edc1f382739f.png
[2e03baceb4b647c3ba0728f1ea3fafe4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/451272eb17f04916af90f247f6fc4d18.png
[17b12813b57b458bbd2a38012780cbcb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/9bbc3a823fab41c4b99e1d0436ff3dd9.png
[0c0be80c51bb418c8535c089c6cfd05a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/4dd3e7fb143242c3ae01f8bf255b742e.png
[e1bf85dcae324644a1d8909f8395bec4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/31ab3777c9a04dbfb47a994d96953509.png