【Vue】MVVM模型还没懂嘛

hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~

MVVM 模型

Vue虽然没有完全遵循MVVM模型,但Vue的设计也收到了它的启发在文档中也会使用VM(ViewModel的缩写)这个变量名表示Vue实例(Vue作者参考了MVVM模型,并非其创建的)

【Vue】MVVM模型还没懂嘛_第1张图片

img

模型说明

  • M:模型 Model-对应data中的数据

  • V:视图 View-对应模板代码

  • VM:视图模型 ViewModel-对应Vue实例对象

  • Data Bingdings:数据绑定 把数据放在View的指定位置

  • DOM Listeners:DOM 监听器 监听视图上的变化并映射到数据里

  • data中所有的属性,最后都会出现在VM身上

  • VM身上所有的属性 及Vue原型身上所有的属性,在 Vue模板中都可以直接使用

Vue 实例中的 data 对象就代表了这个 ViewModel(VM) 中的 数据模型,用于存放应用程序的业务数据

Vue 中的 template 就代表视图层(View),用于定义应用程序的界面显示效果,

  • 可以将该层理解为html页面中的元素,比如:

{{ message }} 

在这里写的所有代码,都会去VM身上去找,比如@click = '可以引用VM的内容&简单表达式'但是如果写@click = 'alert(1)'就不对了,它属于window的,VM身上找不到就未定义错误

拓展

这里简单拓展一下:Java中的MVC(模型Model-视图View-控制器Controller-一种架构模式)

MVC:M代表Model数据层 , V代表View视图层 , C代表Controller控制层(中介), 用户发送请求,Control View 传送指令到 Controller,Controller 完成业务逻辑后,使 Model 改变状态Model 将新的数据发送到 View,用户得到反馈(实际上更复杂,如需要深入理解,建议多多查阅相关资料)

【Vue】MVVM模型还没懂嘛_第2张图片

image-20230814104731446

拓展Springboot+Vue架构

【Vue】MVVM模型还没懂嘛_第3张图片

image-20230915014353293

代码示例

 // View
    
        

{{name}}

                 

{{$options}}

        

{{$emit}}

    
             Vue.config.productionTip = false         // new Vue 这整个就是最重要的ViewModel         new Vue({             el: '#root',             // Model ,数据经过ViewModel就去了View更新             data: {                 name: "小索奇",                 add: "shanghai"             }         })     

如果对您有用的话请点个免费的爱心叭~

你可能感兴趣的:(Vue,java,计算机,vue.js,javascript,前端)