从0开始学Vue系列3--MVVM模型理解

清欢爱蹦跶
168 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

我要一步一步往上爬~大家好，今天我们来一起学习一下MVVM架构模型概念。

一、MVVM

官网显示Vue的开发是参考MVVM模型的，所以先认识一下MVVM模型这个概念对我们后续的开发很有必要！

MVVM 是Model View ViewModel 的缩写，由以下三部分组成：

  1. Model：模型，对应的是Data里的数据
  2. View：视图
  3. ViewModel：视图模型，对应的是Vue实例对象，在代码中我们经常看到的vm 变量名就是它的缩写。

图片10.png

View和Model是没有直接关联的，中间的ViewModel起到了连接Model和View的作用，是个桥梁的角色，Data Binding数据绑定把数据放在了视图中我们指定的位置上，以后数据无论怎么变化，页面上的数据就会自动更新，无需我们手动完成DOM的操作；DOM Listner-Dom监听器则是监听页面上的DOM改变，然后映射回数据当中。

可以借助这张图片来理解一下： 图片11.png

二、举例分析

<body>
    <div id="app">
        <h1>打个招呼：{{name}}</h1>
        <h1>1：{{$listeners}}</h1>
        <h1>2：{{$el}}</h1>
        <h1>3：{{_c}}</h1> 
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
                name:'Hello~',
                x:1
        }
    })
    console.log(vm)
</script>

图片12.png 右键检查可以看到通过console.log(vm)命令展示出的vue实例，点击最左边的小三角形可以看到vm实例中的诸多属性，其中就包括了我们在程序中定义的name属性，即使是没有展示在页面上的x属性也会在vm实例中被列举出来。

红色框框代表data中定义的所有属性，绿色框框代表我选择展示在网页上的vm实例原型上的属性，这些都是可以直接在Vue模板中使用的。

其实把这些属性展示出来没有实际的意义，具体属性的使用方法还要通过后续的学习得知，现在是了解其原理的阶段~

又学完了一个知识点，欢迎在评论区和我交流~

avatar
文章
阅读
粉丝