Vue中的mvc和mvvm关系图和在html中的体现
Posted 陈佳佳的花园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中的mvc和mvvm关系图和在html中的体现相关的知识，希望对你有一定的参考价值。
链接：https://blog.csdn.net/wulianlang6162/article/details/98340751?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-9-98340751.nonecase
1.关系图
2.直接上带代码
<!DOCTYPE html>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--//导入js包-->
<script ></script>
<body>
<divid="app">
<!--这个就是我们mvvm所说的v-->
<p>{{msg}}</p>
</div>
<scripttype="text/javascript">
//2.创建一个实例
//这里：new出来的这个就是我们mvvm中的vm调度者
new Vue({
el:'#app',//表示我们new的这个vue实例要控制的区域
data: {//data就是mvvm中的m
//data属性中，存放的是el中要用到的数据
msg:'hellfo vue.js.'
}
});
</script>
</body>
</html>
3.分析过程
首先从数据角度
Mvvm：前端视图层的分层开发思想
目的：为了方便我们的开发实现了前后端分离；数据的双向绑定
之前后端：数据渲染(拿取数据，渲染数据)，调取接口(数据的增删改查)
Mvc单向流：对应m-v,v-c-m-v过程
现在后端:只负责(拿取数据)
前端mvvm(数据双向绑定含义):
m<--->vm;vm双单向到m
1.数据渲染，用户更改
2.vm到两个方向(用户更改，vm同时像两个方向输送)；页面渲染转态，保证数据库统一
然后从开发层次角度
视图，控制器(确定对象，操作范围)到控制数据
以上是关于Vue中的mvc和mvvm关系图和在html中的体现的主要内容，如果未能解决你的问题，请参考以下文章