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 @ 2024-12-27 20:30  市丸银  阅读(10)  评论(0)    收藏  举报