MVVM模型

MVVM模型

M:模型(Model),data中的数据

V:视图(View),模板代码

VM:视图模型(ViewModel):Vue实例化

1、data中的所有属性都出现在vm对象身上

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

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM模型</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h1>学校名称:{{name}}</h1>
        <h1>学校地点:{{address}}</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:"#container",
            data:{
                name:"家里蹲",
                address:"徐州"
            }
        })
        console.log(vm)
    </script>
</body>
</html>
复制代码

 

posted @   市丸银  阅读(2)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示