前端中的MVVM

最新推荐文章于 2024-06-23 07:29:19 发布

模仿游戏i

最新推荐文章于 2024-06-23 07:29:19 发布

阅读量197

点赞数

分类专栏： HTML 文章标签： vue MVVM

本文链接：https://blog.csdn.net/qq_37046592/article/details/100017759

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

MVVM是前端视图层的分层开发思想，主要是把每一个页面分成M、V、VM，其中VM是MVVM思想的核心，因为VM是M和V之间的调度者

前端页面中使用MVVM的思想，主要是为了让我们开发起来更加方便，因为MVVM提供了数据的双向绑定，注意：数据的双向绑定是由VM提供的

下面是在vue框架下的MVVM的分布情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入vue的包-->
    <script src="../JS/vue/vue2.6.10.js">

    </script>
</head>
<body>
<!--将来new的Vue实例，会控制这个元素中的所有内容
Vue实例所控制的这个元素区域就是我们的V-->
<div id="app">
    <p>{{ msg }}</p>
</div>
<script>
    <!--2.创建一个vue的实例-->
    //当我们导入包之后，在浏览器的内存之中，就多了一个Vue构造函数
    //注意：我们new出来的这个Vue实例，就是MVVM中的VM调度者
    var vm = new Vue({
        el:'#app',//el中表示需要控住的区域
        //这里的data就是MVVM中的M，专门用来保存每个页面中的数据
        data:{//data属性中，存放的是el中要使用的数据
            msg:"hello world!"//通过Vue提供的指令，很方便的就能把数据渲染在页面上，程序员不在手动操作
            //DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作元素】
        },
        methods:{}

    })
</script>
</body>
</html>