Vue数据绑定

Myth丶恋晨 2022-08-28 10:54 177阅读 0赞

> **单向绑定模式  v-bind： **

之前说的指令语法只是说了一个 v-bind：及其简写模式 ：，但是 v-bind：是一个单向绑定模式，只能将data中的数据解析到页面上，但是在页面上做的更改不会同步更新data中的数据

<div id="root">
      <h1>数据绑定</h1>
      <div> <span>单项数据绑定：</span> <input type="text" v-bind:value='value'> </div>
    </div>
    
    <script>
      Vue.config.productionTip = false
    
      new Vue({
        el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
        // el: document.getElementById('#root'), // 也可以通过document点出来
        data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
          value: '1234'
        }
      })
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16][]

通过 v-bind 绑定了data中的 value 数据，且展示在了 输入框内部，但是我们在输入框内部改变 value 之后，我们会发现，只有页面上展示的数据改变了，实际上data中的数据是没有改变的

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

那么为了实现双向数据绑定，我们需要使用另外一个指令语法那就是  v-model

> **双向数据绑定 v-model**

<div id="root">
      <h1>数据绑定</h1>
      <div> <span>单项数据绑定：</span> <input type="text" v-bind:value='value'> </div>
      <div> <span>双向数据绑定：</span> <input type="text" v-model='value'> </div>
    </div>
    
    <script>
      Vue.config.productionTip = false
    
      new Vue({
        el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
        // el: document.getElementById('#root'), // 也可以通过document点出来
        data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
          value: '1234'
        }
      })
    </script>

双向绑定的意思就是，既能从 data 中读取数据绑定到页面上，也能在页面上改变数据，同步到 data 中，如下所示：此时data中的数据是：1234，

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

当我改变双向绑定数据input框中的输入值时，就能看到单向和双向的区别在哪里了

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

此时，我们可以看到两个input框和data中的数据都是 1234qwer ，造成这一原因就是因为 双向数据绑定的输入框内的值改变时，同步改变了 data 中的数据，通过 v-bind 单向绑定的 input 框也同步读取了 data 中的数据，所以也展示了相同的数据

> ** 错误示例**

上面说了两种绑定方法，那么如果我试着将 v-model 用在标签自定义属性上进行双向绑定会有什么效果呢？

<h2 v-bind:x='x'>你好啊1</h2>
    <h2 v-model:x='x'>你好啊2</h2>
    
    <script>
      Vue.config.productionTip = false
    
      new Vue({
        el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
        // el: document.getElementById('#root'), // 也可以通过document点出来
        data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
          value: '1234',
          x: 'al'
        }
      })
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

可以看到，在DOM元素上，通过 v-bind：绑定的自定义标签属性，进行了正确的展示，但是通过 v-model绑定了数据没有展示出来，且在控制台上还报错了

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

翻译一下就是

![956f3640fde64113bb39f4ae727822cf.png][]

说的就是 v-model 不适用于这样的元素，那我们反思一下，既然是双向绑定，那就是要在页面上能有一个交互的地方，去改变data中的数据，能做到这一点的，只有表单元素，例如：input，checkBox，radio等等元素，这些元素才能做到在用户输入之后，通过捕获 表单元素的 value 值，然后实时修改data中的数据，这样才能做到双向绑定，类似 h2 这样的元素，连输入的value都捕获不了，怎么和data中的数据做连动呢？

> **说到底 v-model 绑定的其实就是 表单元素的 value 值**

v-model:value ：其实这才是 v-model 的完整写法，但是因为 v-model 只能绑定 表单元素，所以也就相当于 默认只能绑定表单元素的 value

<div> <span>双向数据绑定：</span> <input type="text" v-model:value='value'> </div>

所以为了方便，基本上都用的简写方式，直接使用 v-model

<div> <span>双向数据绑定：</span> <input type="text" v-model='value'> </div>

> **本章总结**

1、单向绑定 v-bind 绑定的数据，只能从 data 流向 页面

2、双向绑定 v-model ：绑定的数据，不仅能从 data 流向页面，还能从页面流向 data

*  双向绑定一般都是 用在表单元素上
 *  v-model:value 可以简写为 v-model，因为 v-model 默认的就是绑定的 value

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ca8e65ea91a04cd9be2e418d68d32d31.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/b54cc6903a7b4081b4fd50f86f2be2f9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/30d63b0b0ac5413c8f239fdd07538de7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/b29345806ea14582a4dd4ef55fceba58.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/ad5dadca4bcf460c975f32137c3fee4b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/a443a00a1acd4b4ea6f88364d72b84ca.png
[956f3640fde64113bb39f4ae727822cf.png]: /images/20220828/1baea9d53fb84871817eca0472ca34e0.png