vue-数据响应式 与 双向数据绑定

vue-数据响应式 与 双向数据绑定

1. 数据响应式（单向：将数据填充到页面）

   1. 如何理解响应式
      1. html5中的响应式（屏幕尺寸的变化导致样式的变化）
      2. 数据的响应式（数据的变化导致页面内容的变化）
   2. 什么是数据绑定
      1. 将数据填充到标签中
      2. 数据响应式：script中的数据驱动html的内容发生改变，不需要去操作DOM（用指令与插值表达式进行数据绑定时默认就是响应式的，也就是在改数据的时候，页面内容会自己发生变化）

2. 双向数据绑定（双向）

   1. 主要体现在用户输入域：用户输入域影响数据的改变，数据改变又影响页面内容的变化

   2. 双向数据绑定有一个重要概念与其相关：MVVM设计思想(把不同功能的代码放在不同模块，通过特定的方式建立关联，意思就是把数据和视图（本质上是document）分开写，通过VM链接)

      M ：model (就是data中的数据)

      V ：view （视图，也就是我们写的模板，本质上是document）

      VM ：View-model（中介：提供控制逻辑将V与M结合在一起）

   3. 从V--到--M用的是事件监听：

      可以看到DOM改变会有事件监听，所以说v-model这个指令的底层用到了事件监听，只是看不到。

      从M--到--V用的是数据绑定：

      就是把data中的数据填充到页面，也就是所说的数据响应式