理解MVVM

最新推荐文章于 2024-10-10 13:13:22 发布

张小霸王

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量188

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Zhangzhang15/article/details/126390599

版权

本文详细介绍了MVVM架构模式的三个核心组成部分：模型（Model）、视图（View）和视图模型（ViewModel）。通过实例展示了Vue.js中如何创建VM，以及数据双向绑定原理。在Vue模板中，不仅可以访问data中的属性，还能直接使用Vue实例及其原型上的属性。示例代码演示了如何在模板中展示data数据以及Vue原型上的属性。

摘要由CSDN通过智能技术生成

MVVM模板构成：

总结：

MVVM模板构成：

1、M：模型（Model）：data中的数据

2、V：视图（View）：模板代码

3、VM：视图模型（ViewModel）：Vue实例

div（View）页面视图和data（Model）数据发生更改通过Vue实例（ViewModel）链接

页面视图发生更改通过视图模型模型里的数据也进行更改

模型里的数据发生更改通过视图模型页面视图也发生更改

总结：

1、data中的所有属性最后都会出现在vm上

<script>
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    name: "张张",
                    school: "清华"
                }
            },
        })
        console.log(vm)
    </script>

2、vm身上所有的属性及Vue原型上的所有属性在Vue模板中都可以直接使用

<div id="app">
        <h1>名字：{{name}}</h1>
        <h1>学校：{{school}}</h1>

        <!-- data里没有$options和_c 是Vue原型的属性 可以直接使用 -->
        <h1>测试1：{{$options}}</h1>
        <h1>测试2：{{_c}}</h1>
    </div>


    <script src="./vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    
                    name: "张张",
                    school: "清华"
                }
            },
        })
        console.log(vm)
    </script>