Vue 中的 MVVM 模型

最新推荐文章于 2024-08-06 17:23:10 发布

zmm_mohua

最新推荐文章于 2024-08-06 17:23:10 发布

阅读量456

点赞数

分类专栏： vue学习记录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42250642/article/details/123018405

版权

vue学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

Vue 中的 MVVM 模型

小结

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

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>理解MVVM</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <p>学校名称：{{name}}</p>
            <p>学校地址：{{address}}</p>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
           el:'#root',  
            data:{
                name:'湖南大学',
                address:'湖南长沙'
            }
        })
        console.log(vm)
    </script>
</html>

运行效果

在这里插入图片描述

zmm_mohua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 中的 MVVM 模型

Vue 中的 MVVM 模型小结MVVM 模型： M：模型（Model）：对应data中的数据 V：视图（View）：模板 VM：视图模型（ViewModel）：Vue实例对象观察发现： 1、data 中所有的属性，最后都出现在了 vm 身上 2、vm 身上所有的属性及 Vue原型上所有的属性，在 Vue 模板中都可以直接使用代码<!DOCTYPE html><html> <head>
复制链接

扫一扫

专栏目录