MVVM 由 Model(数据模型) View(视图) 和 VM(ViewModel) 组成

核心思想

实现 数据 与 视图 的 双向绑定

各自的作用

• Model(数据模型): 操作数据
• View(视图): 显示数据
• VM: 模型与视图间的双向操作

---

在 MVVM 之前, 开发人员需要从后端获取数据, 然后通过 DOM 操作 Model 渲染到 View 中.

当用户操作了视图, 再通过 DOM 获取 View 中的数据, 同步到 Model 中

而 VM 的作用就是把 DOM 操作完全的封装起来, 开发人员不用再关心 Model 和 View 之间如何影响

• 只要 Model 发生改变, View 就可以自然的表现出来
• 只要用户操作了 View, Model 中的数据也会跟着变化

案例

实现如下效果, 当在输入框中输入字符时, 同步显示到页面中

1 完成 Vue 的三步曲

在 src 目录下创建一个新的文件: 02_MVVM模型.html

1) 引入 vue.js

示例

<!-- 1. 引入vue.js -->
<script src="../node_modules/vue/dist/vue.js"></script>

演示

2) 编写 div 元素

示例

<!-- 2. 编写div元素 -->
<div id="app"></div>

演示

3) 编写 vue 实例

示例

<!-- 3. 编写vue实例 -->
<script>
  const vm = new Vue({
    el: '#app',
    data: {},
  })
</script>

演示

2 编写页面

分析

页面由文字, input 框, 内容显示三部分组成

示例

<!-- 2. vue的主操作区 -->
<div id="app">
    在这里输入的内容会在下面显示: <input v-model="msg" type="text">
    <h3>{{ msg }}</h3>
</div>

• v-model 表示双向绑定, 将输入框中的内容和 vue 实例中的 msg 属性绑定
• {{}}是插值表达式, 用来显示 msg 的数据

3 编写逻辑

这里的逻辑比较简单, 只需要在 data 部分, 添加一个msg变量就可以

示例

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '',
    },
  })
</script>

4 测试

使用 Open In Default Browser 测试(使用到的插件: open in browser)

5 调试工具

为了方便调试 vue, 可以在 chrome 浏览器中安装 vue-devtools.

6 小结

小结

1. vue 使用的三步曲(引入 vue.js div 元素 vue 实例)
2. data 中的内容就是 M(模型), div 中的内容是 V(视图), vue 实例是 VM

#