05_理解MVVM模型
总结:
MVVM模型:
1.M:模型(Model):data中是的数据
2.V:视图(View):模板代码
3.VM:视图模型(ViewModel):Vue实例
观察发现:
1.data中所有属性,最后都出现在vm身上
2.vm身上的所有属性,及Vue原型上所有属性,在Vue模板中都可以直接使用
![](https://img2020.cnblogs.com/blog/2546223/202110/2546223-20211026145840843-2085288809.png)
整个过程的实例代码:
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>