Vue中的MVVM模式使用及说明
MVVM模式
简介
MVVM旨在利用WPF中的数据绑定函数，通过从视图层中几乎删除所有GUI代码（代码隐藏），更好地促进视图层开发与模式其余部分的分离。
不需要用户体验（UX）开发人员编写GUI代码，他们可以使用框架标记语言（如XAML），并创建到应用程序开发人员编写和维护的视图模型的数据绑定。
角色的分离使得交互设计师可以专注于用户体验需求，而不是对业务逻辑进行编程。
这样，应用程序的层次可以在多个工作流中进行开发以提高生产力。即使一个开发人员在整个代码库上工作，视图与模型的适当分离也会更加高效，因为基于最终用户反馈，用户界面通常在开发周期中经常发生变化，而且处于开发周期后期。
MVVM模式试图获得MVC提供的功能性开发分离的两个优点，同时利用数据绑定的优势和通过绑定数据的框架尽可能接近纯应用程序模型。
它使用绑定器、视图模型和任何业务层的数据检查功能来验证传入的数据。
结果是模型和框架驱动尽可能多的操作，消除或最小化直接操纵视图的应用程序逻辑（如代码隐藏）。
MVVM
- M (model)：模型对象：指的是构成界面内容的相关数据
- V(view): view: 视图对象：指的是给用户或者开发者展示数据的界面
- VM(viewmodel): 视图模型对象：是view与model之间的桥梁
MVVM模式的组成部分
- 模型
模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。
- 视图
就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。
- 视图模型
视图模型是暴露公共属性和命令的视图的抽象。
MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。
在视图模型中，绑定器在视图和数据绑定器之间进行通信。
- 绑定器
声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。
绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。
在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。
Vue.js的核心ViewModel
ViewModel是Vue.js的核心，它是一个Vue实例。
Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
创建了ViewModel后的双向绑定达成
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
- 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
- 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- div铺满全屏而不是缩放网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，
这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生实现js实现M-V-VM</title>
<script>
/*
MVVM : model 模型对象--》指的是构成界面内容的相关数据
view 视图对象--》指的给给用户或者开发者展示数据的界面
viewmodel 视图模型对象--》 指的是view与model之间的桥梁
*/
let msg="Hello world!";//相当于model
window.onload=function(){
let h4Dom = document.getElementById("h4Dom");
let inputDom = document.getElementById("inputDom");
h4Dom.innerHTML=msg;
inputDom.value=msg;
//通过对事件源的监听来实现，为js对象实现动态事件监听
//input输入事件
inputDom.addEventListener("input",function(){
msg=this.value;
h4Dom.innerHTML=msg;
});
}
</script>
</head>
<body>
<div>
<h4 id="h4Dom"></h4>
<input type="text" value="" id="inputDom"/>
</div>
</body>
</html>实现效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决v-for中使用v-if或者v-bind:class失效的问题
今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue项目 npm run build 打包项目防止浏览器缓存的操作方法
这篇文章主要介绍了vue项目 npm run build 打包项目防止浏览器缓存的操作方法,本文给大家推荐两种方法，每种方法通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了基于vue+echarts数据可视化大屏展示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了Vue Build后的项目的根路径配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue如何实现多组关键词对应高亮显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要为大家详细介绍了vue实现移动端多格输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了Vue实现微信支付功能遇到的坑,本文是小编记录整理下拉的，以便日后所需，需要的朋友可以参考下2019-06-06
vue代理请求之Request failed with status code 404问题及解决
这篇文章主要介绍了vue代理请求之Request failed with status code 404问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本篇文章主要介绍了Vue官网todoMVC示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论