什么是MVVM？详细解析

最新推荐文章于 2023-08-01 19:15:40 发布

Roam-G

最新推荐文章于 2023-08-01 19:15:40 发布

阅读量787

点赞数 2

分类专栏： VUE 文章标签： html5 vue.js

本文链接：https://blog.csdn.net/weixin_41290863/article/details/111410759

版权

VUE 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

什么是MVVM？详细解析

关系如图

MVVM对应VUE代码部分，

<!DOCTYPE html>
<!-- 输入 ！ 再按键 回车就可以生成HTML文件模板 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1，倒入VUE 包 -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>

    <!-- MVVM  对应的代码部分。共三个部分： M , V,VM  -->
    <!-- 将来new 的Vue实例，会控制这个 元素中的所有内容
    Vue 实例 控制的这个元素区域，就是我们的  V -->
    <div id="app">

        <p>{{msg}} </p>
    </div>


    <script>
    //2,创建一个Vue实例 -->
    // 倒入包之后，在浏览器中，就多了一个Vue构造函数
    // new 出来的 vm对象，就是 MVVM中的  vm调度者
    var vm = new Vue({
        el:'#app', //表示，当前 我们new 的这个 Vue实例，要控制页面上的哪个区域

        data:{   //data 属性中，存放的是el 中要用到的数据
         
            //    data 里面的数据就是 MVVM中的 M 。model专门用来保存每个页面的数据

            msg:'欢迎学习Vue!'

        }

    });
    // $('$content').text(data.msg)   这事DOM操作，
    // 使用了Vue之后就剩去了  DOM操作。通过Vue指令{{msg}} ，渲染
    // 不需要 手动操作DOM元素。
    </script>

</body>
</html>

之前这些内容似懂非懂，稀里糊涂。现在真正的搞明白了！

Roam-G

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
什么是MVVM？详细解析

什么是MVVM？详细解析关系如图MVVM对应VUE代码部分，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
复制链接

扫一扫