总结：

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. 可穿戴设备主控制器芯片AMA3B 源码解析之初体验

    一 背景和缘由   现在的mcu非常多,在超低功耗mcu这块,能赢得市场穿戴式设备使用的产品的确不多,以前是的是stm32 L系列,可是,随着L系列的缺货涨价和技术指标没有快速的发展,很多厂商都抛弃了 ...

  2. 【stras-one】星念漫画下载器

    原文链接:[stras-one]星念漫画下载器 - Stars-One的杂货小窝 一款将在线漫画保存到本地的下载工具 应一位蓝奏云批量下载器的用户的要求,实现了这款漫画下载的工具开发, 一直没时间,鸽 ...

  3. Eclipse之各个版本的区别

    经常用到的是前五个版本: Eclipse IDE for Java EE Developers:是为J2EE开发的版本: Eclipse Classic:是Eclipse的经典版本,没有安装任何插件, ...

  4. 大场景的倾斜摄影三维模型OBJ格式轻量化处理处理关键处理技术分析

    大场景的倾斜摄影三维模型OBJ格式轻量化处理处理关键处理技术分析 大场景的倾斜摄影三维模型是指通过航空或地面摄影获取的大范围.高分辨率的地理环境数据.为了在虚拟环境中加载和渲染这些模型,需要对其进行O ...

  5. 探讨三维模型OBJ格式轻量化在数据存储的重要性

    探讨三维模型OBJ格式轻量化在数据存储的重要性 三维模型的OBJ格式轻量化在数据存储方面具有重要性.以下是对三维模型OBJ格式轻量化在数据存储的重要性进行浅析: 1.节省存储空间:原始的三维模型文件往 ...

  6. 记录--Vue3基于Grid布局简单实现一个瀑布流组件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局 ...

  7. 记录--TS类型写不好？一起来训练提升吧！

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前期准备 本篇文章的编写目的是为了提升TS类型的书写质量,高质量的类型可以提高项目的可维护性并避免一些潜在的漏洞; 在学习本篇之前需要有一 ...

  8. 记录mysql order by xxx limit xxx数据重复的问题

    引用 http://vsalw.com/9768.html 记录mysql排序字段有重复值,分页数据错乱问题,下面2个sql 除了分页limit外,其他都一样, 但是第三页的结果却包含部分第二页的数据 ...

  9. 在 PostgreSQL 中，解决图片二进制数据，由于bytea_output参数问题导致显示不正常的问题。

    在 PostgreSQL 中,bytea_output 参数控制在查询结果中 bytea 类型的显示格式.默认情况下,bytea_output 的值为 hex,这意味着在查询结果中,bytea 类型的 ...

  10. AXI4协议的物理模型

    AXI4的物理传输模型 1.AXI4的组成部分 首先说一下文章是学习<基于AXI4的IP核互联的设计与验证>莫锦辉的学习笔记.文中大部分的知识都是来源于这篇论文,这里学习以便理解AXI4协 ...