总结:

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>

05_理解MVVM模型的更多相关文章

  1. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  2. 搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

    搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...

  3. MVC、MVP、MVVM模型

    在学习vue.react的过程中,总能看到MVVM模型,那么MVVM究竟是什么,下面将我最近看到的资料以及自己的想法总结一下. 与MVVM相似的,还有MVC.MVP,先从MVC.MVP这两个入手,方面 ...

  4. Vue MVVM模型原理

    最近反思了下自己,觉得自己很急躁,学技术总是觉得能用就行了,其实这样很不好,总是这样,就永远只能当用轮子的人.好了,废话不多说,转入正题: 要理解MVVM的原理,首先要理解它是什么,怎么运作起来的: ...

  5. CSS 设计彻底研究(三)深入理解盒子模型

    第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...

  6. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  7. 如何理解MVVM?

    随着前端页面越来越复杂,用户对于交互性要求也越来越高,MVVM模型应运而生. MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,V ...

  8. 理解GloVe模型(Global vectors for word representation)

    理解GloVe模型 概述 模型目标:进行词的向量化表示,使得向量之间尽可能多地蕴含语义和语法的信息.输入:语料库输出:词向量方法概述:首先基于语料库构建词的共现矩阵,然后基于共现矩阵和GloVe模型学 ...

  9. 我是这样一步步理解--主题模型(Topic Model)、LDA

    1. LDA模型是什么 LDA可以分为以下5个步骤: 一个函数:gamma函数. 四个分布:二项分布.多项分布.beta分布.Dirichlet分布. 一个概念和一个理念:共轭先验和贝叶斯框架. 两个 ...

  10. [转帖]JVM—深入理解内存模型与垃圾收集机制

    JVM—深入理解内存模型与垃圾收集机制 https://juejin.im/post/5d68dc9ee51d4561ad6548f7 前言 Java是一种跨平台的语言,当初其设计初衷也是为了解决各个 ...

随机推荐

  1. Prettier 和 ESLint 冲突解决方案 eslint-config-prettier eslint-plugin-prettier

    划重点 eslint-config-prettier 禁用 eslint 冲突配置 eslint-plugin-prettier Prettier先格式化 (默认是先eslint格式化,再Pretti ...

  2. Springboot K8s Job 一次性任务 如何禁用端口监听

    问题:SpringBoot一次性任务执行时,也会默认监听服务端口,当使用k8s job运行时,可能多个pod执行存在端口冲突 解决办法:命令行禁用SpringBoot一次性任务启动时端口占用 java ...

  3. 在后台运行 django的基本方法

    在后台运行 django: nohup python manage.py runserver 0.0.0.0:9000 &ps:&可以不写,这样启动测试服务器后,就可以常驻后台运行了. ...

  4. 记一次配置mybatis plus报错有感

    参考,欢迎点击原文:https://blog.csdn.net/wwrzyy/article/details/86034458(问题原因) https://www.jianshu.com/p/28d6 ...

  5. Java加密技术(四)——非对称加密算法RSA

    Java非对称加密算法rsa     接下来我们介绍典型的非对称加密算法--RSA RSA     这种算法1978年就出现了,它是第一个既能用于数据加密也能用于数字签名的算法.它易于理解和操作,也很 ...

  6. 17_详解YUV

    本文的主角是多媒体领域非常重要的一个概念:YUV. 简介 YUV,是一种颜色编码方法,跟RGB是同一个级别的概念,广泛应用于多媒体领域中. 也就是说,图像中每1个像素的颜色信息,除了可以用RGB的方式 ...

  7. 2023年VR虚拟现实的10个应用行业

    1.医疗保健 现代医疗保健的培训方式离不开VR虚拟现实..由于医疗行业的特殊性,不允许拿大量的病人来练手,但医疗又非常注重实践,一些新手医生就缺乏锻炼的机会,而VR虚拟现实技术很好的解决了这一问题.医 ...

  8. 为什么延迟删除可以保证MYSQL 与redis的一致性?

    看过很多保持MYSQL 与redis保持一致性的文章都提到了延迟删除,其实脱离任何业务场景的设计都是不切实际的,所以我会本着一个通用的读写场景去分析为什么延迟删除大概率可以保证MYSQL与redis的 ...

  9. 记录--手写$forceUpdate,vm.$destroy方法

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 vm.$forceUpdate (1)作用 迫使Vue.js实例重新渲染.注意它仅仅影响实例本身以及插入插槽内容的子组件,而不是所有子组件 ...

  10. 在 Google Colab 中使用 JuiceFS

    Google Colaboratory(Colab)是一个由 Google 提供的云端 Jupyter 编程笔记本,直接通过浏览器即可进行 Python 编程.Colab 充分利用谷歌的闲置云计算资源 ...