理解Vue中的MVVM

最新推荐文章于 2025-03-27 19:13:05 发布

想要成为码农

最新推荐文章于 2025-03-27 19:13:05 发布

阅读量179

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45268202/article/details/122161413

版权

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了MVVM模型在Vue.js框架中的应用，重点阐述了Model（数据模型）、View（视图）和ViewModel（视图模型）的概念。内容指出，Vue实例作为视图模型，将data中的数据与模板代码紧密连接，允许在模板中直接使用Vue实例及原型上的所有属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MVVM模型
1、M：模型(Model)：data中的数据
2、V：视图(View)：模板代码
3、VM:视图模型(ViewModel)：Vue实例
观察发现：
1、data中所有的属性，最后都出现在了vm身上
2、vm身上的所有属性，及vue原型上的所有属性，在Vue模板中都可以直接使用

<div id="root">
        <h1>学校名称:{{name}}</h1>
        <h1>学校名称:{{address}}</h1>
        <!-- <h1>测试一下:{{_s}}</h1> -->
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    name: "尚硅谷",
                    address: "北京"
                }
            }
        })
        console.log(vm)
    </script>