vlambda博客
学习文章列表

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同时像两个方向输送);页面渲染转态,保证数据库统一

然后从开发层次角度

视图,控制器(确定对象,操作范围)到控制数据