mvvm架构

本文探讨了后端的MVC与前端MVVM架构的区别,重点在于MVVM如何在前端实现视图层分离。MVVM将视图层划分为Model、View和ViewModel三部分。同时,通过Vue.js的基本代码示例,展示了在Vue中MVVM的对应关系:MV对应vue实例,V对应视图,M对应data。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、后端中的 MVC 与 前端中的 MVVM 之间的区别

  •   MVC 是后端的分层开发概念;
  •   MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel

 

二、Vue.js 基本代码 和 MVVM 之间的对应关系

      MV 是 vue实例

      V    是 vue中el对应视图

      M   是 vue中data对应视图

<!DOCTYPE html>
	<html lang="en">
	
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	  <title>Document</title>
	  <script src="./lib/vue-2.4.0.js"></script>
	</head>
	
	<body>
	  
	  <!--1.------------V---------------->   
      <!-- Vue 实例所控制的这个元素区域,就是我们的 V  -->
      <!-- 将来 new 的Vue实例,会控制这个元素中的所有内容 -->
	  <div id="app">
	    <p>{{ msg }}</p>
	  </div>
	
	  <script>
	    // 2.------------MV------------   
        //  创建一个Vue的实例
	    //  当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数
	    //  注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
	    var vm = new Vue({
			// 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
			
	      el: '#app',  
	        // data 属性中,存放的是 el 中要用到的数据
            // 3.---------------M-------------------
            //这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
	      data: { 
            // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
	        msg: '欢迎学习Vue' 
	      }
	    })
	  </script>
	</body>
	
	</html>

 

Dive into the world of MVVM, learn how to build modern Windows applications, and prepare for cross-platform development. This book introduces you to the right mindset and demonstrates suitable methodologies that allow for quick understanding of the MVVM paradigm. MVVM in Delphi shows you how to use a quick and efficient MVVM framework that allows for scalability, is of manageable complexity, and provides strong efficiency. One of the biggest challenges developers face is how to convert legacy and monolithic Delphi applications to the MVVM architecture. This book takes you on a step-by-step journey and teaches you how to adapt an application to fit into the MVVM design. What You Will Learn Gain the fundamentals of MVVM Visualize MVVM as a design philosophy Create easy-to-use frameworks for building your own MVVM applications Develop a methodology for converting legacy applications to the MVVM pattern Architect cross-platform and multi-lingual applications using the MVVM pattern Who This Book Is For Delphi developers with a good knowledge of Delphi or programming experience in a different language. In addition, this book is attractive to Delphi developers who want to modernize existing applications based on the MVVM design. Table of Contents Chapter 1 : MVVM as Design Pattern Chapter 2 : Setting Up the POSApp Chapter 3 : MVVM as Design Philosophy Chapter 4 : Two-Way Communication Chapter 5 : Converting the Invoice Form Chapter 5 continues with the development of the most complex form of the POSApp Chapter 6 : User Interaction Chapter 7 : Input Validation
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

良之才-小良

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值