vue之理解MVVM模型

理解MVVM模型


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>理解MVVM</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
MVVM模型：
  1。M：模型，data中的数据
  2。v：视图：模版代码
  3。VM：视图模型：vue实例
 观察发现：
  1。data中所有的属性，最后都出现在了vm身上
  2。vm身上所有的属性及vue原型上所有属性，在vue模版中都可以直接使用。
-->
<div id="root">

  <h1>学校名称：{{name}}</h1>
  <h1>学校地址：{{address}}</h1>
</div>

<script type="text/javascript">

    const vm = new Vue({
        el: '#root', //第一种写法
        data: {
            name: 'jack',
            address: '北京'
        }
    })
    console.log(vm)
</script>
</body>
</html>
posted @ 2022-05-30 00:06  King-DA  阅读(29)  评论(0)    收藏  举报