05_理解MVVM模型

总结：

MVVM模型：

1.M:模型（Model）:data中是的数据

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

3.VM:视图模型（ViewModel）:Vue实例

观察发现：

1.data中所有属性，最后都出现在vm身上

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

整个过程的实例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>理解MVVM模型</title>
 8     <script type="text/javascript" src="../js/vue.js"></script>
 9 </head>
10 <body>
11     <!-- 准备好一个容器 -->
12     <div id="root">
13         <h1>学校名称:{{name}}</h1>
14         <h1>学校地址:{{address}}</h1>
15     </div>
16     <script type="text/javascript">
17     Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
18     new Vue({
19         el:"#root",
20         data:{
21             name:'尚硅谷',
22             address:'成都'
23         }
24     })   
25     </script>    
26 </body>
27 </html>

posted on 2021-10-26 15:09 我不想一直当菜鸟阅读(50) 评论(0) 编辑收藏举报