Vue学习之理解MVVM

理解MVVM

定义

在官方文档中用来接收 Vue 实例的变量都是 VM,那么 VM 又是什么呢

Vue 诞生之初,参考了 MVVM 模型,但没有完全遵循。

MVVM 模型有些类似于 MVC

其中 Model 就普通的 JS 对象,而 View 就是我们看到的页面,也就是 DOM。

负责连接 Model 和 View 的就是 VM(ViewModel)。在 Vue 中,VM 就是 View 实例对象,它可以通过 Data Bingdings,也就是数据绑定 v-bind,来渲染 View。还可以通过 DOM Liseners,来监听 View 的改变。并传递给 Model,就是 v-model 的功能。所以一般我们使用 vm 变量来接收 Vue 实例

代码!

<div id="root">
  <h1>Name: {{name}}</h1>
  <h1>Email: {{email}}</h1>
</div>
<script>
  // 由于Vue实例就是ViewModel,所以可以通过vm来表示Vue实例
  const vm = new Vue({
    el: "#root",
    data: {
      name: "mike",
      email: "test@example.com",
    },
  });
</script>

照例写出测试代码

如果添加一句console.log(vm)就会在控制台中打印出 Vue 实例对象

可以看到 data 中的参数变成了 Vue 属性(data 中的属性不能与 Vue 实例本身的属性重名,否则只会调用到后者)
当然页面中通过模板语法可以调用 Vue 实例的所有属性和方法,只不过方法只能看到源码

总结

MVVM 模型

  1. M:模型(Mode1):data 中的数据
  2. V:视图(View):模板代码
  3. VM:视图模型(ViewMode):Vue 实例

观察发现:

  1. data 中所有的属性,最后都出现在了 vm 身上。
  2. vm 身上所有的属性及 Vue 原型上所有属性,在 Vue 模板中都可以直接使用。

目标

  • 理解 MVVM 模型
  • 了解 Vue 实例的属性
  • 16
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值