Vue初学---MVVM模型

目录

简要


Vue初学---MVVM模型_第1张图片

其实MVVM模型分为三层结构分别是:M(Model), V(View), VM(ViewModel),分析三层的结构特征及其作用:

  • Model:它主要是负责Vue框架里的data数据。
  • View  : JavaScript里的DOM对象,js把html划分为一个对象树,整个页面也就是我们的Dom。
  • ViewModel:指的是Vue对象,可以监听Dom里的数据变化,与data数据就行交互,并且随着data数据改变Dom页面上的数据也会随之而改变

    代码实现:

  • Vue初学---MVVM模型_第2张图片

 

 实现效果:

Vue初学---MVVM模型_第3张图片

Vue初学---MVVM模型_第4张图片


总结:

MVVM模型:

                1.M: 模型(Model)  :  data中的数据。

                2.V:视图(View)   :模板代码(Dom)。

                3.VM:视图模型(ViewModel) :   Vue实例。

                4.data中所有的属性,最终都出现在vm(Vue实例)上。

                5.vm上的属性及Vue原型上所有的属性,在Vue模板上都可以使用。

 

 

你可能感兴趣的:(Vue基础,vue.js,前端,javascript)