5 MVC和MVVM的关系图解

MVVM是前端视图层的分层开发思想，主要把每个页面，分层了M、V和VM。其中，VM是MVVM思想的核心，因为VM是M和V之间的调度者

6 Vue基本代码和MVVM之间对应关系

Vue的基本代码

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <!-- <script src="./lib/vue-2.6.10.js"></script> -->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

 <!-- 将来new的Vue实例，会控制这个元素中所有内容 -->

 <!-- Vue 实例所控制的这个元素区域，就是我们的V -->

       <div id="app">

           <p>{{msg}}</p>

       </div>

       <script>

           //2.创建一个Vue的实例

          //当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数

          //注意：我们 new 出来的这个 vm 对象，就是我们MVVM中的VM的调度者

           var vm =  new Vue({

               el:'#app' ,//表示，当前我们new的这个Vue实例，要控制页面上的哪个区域

         //这里的data就是MVVM中的M，专门用来保存每个页面的数据的

               data:{//data 属性中，存放的是el中要用到的数据

                   msg:'欢迎学习Vue'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】

               }

           })

       </script>

   </body>

 </html>

第一章 Vue介绍的更多相关文章

  1. 《Getting Started with WebRTC》第一章 WebRTC介绍

    <Getting Started with WebRTC>第一章 WebRTC介绍 ​ 本章是对WebRTC做概念性的介绍. 阅读完本章后.你将对下面方面有一个清晰的理解:   .  什么 ...

  2. Mariadb第一章：介绍及安装--小白博客

    mariadb(第一章)   数据库介绍 1.什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以 ...

  3. Java 螺纹第三版 第一章Thread介绍、 第二章Thread创建和管理学习笔记

    第一章 Thread导论 为何要用Thread ? 非堵塞I/O      I/O多路技术      轮询(polling)      信号 警告(Alarm)和定时器(Timer) 独立的任务(Ta ...

  4. 【Bochs 官方手册翻译】 第一章 Bochs介绍

    Bochs 是一个可以完全模拟 Intel x86 计算机的虚拟机系统.它包含了 Intel x86 CPU 仿真.常见设备仿真.以及定制 BIOS.Bochs 可以虚拟多种不同类型的 x86 CPU ...

  5. LSJ_NHibernate第一章 NHibernate介绍

    前言: 说起NHibernate网上资料真不少,但用的人却并不多,说起java的SSH框架大家可能就知道了,这里的H指的就是Hibernate,一款好用的ORM框架,在.net重写了这款好用的框架,名 ...

  6. 《Spring敲门砖之基础教程第一季》 第一章 概要介绍

    百度百科say: Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/EEful ...

  7. 第一章 python介绍、变量、数据类型、流程控制语句等

    一.python介绍 1.python的诞生 python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum(龟叔)于1989年发明,第一个公开发行版发行于1991年. ...

  8. MySQL高级第一章——架构介绍

    一.简介 是一个经典的RDBMS,目前归属于Oracle 高级MySQL包含的内容: MySQL内核 SQL优化工程师 MySQL服务器的优化 各种参数常量设定 查询语句优化 主从复制 软硬件升级 容 ...

  9. CS231n 2016 通关 第一章-内容介绍

    第一节视频的主要内容: Fei-Fei Li 女神对Computer Vision的整体介绍.包括了发展历史中的重要事件,其中最为重要的是1959年测试猫视觉神经的实验. In 1959 Harvar ...

随机推荐

  1. 【并行计算-CUDA开发】CUDA编程——GPU架构，由sp，sm，thread，block，grid，warp说起

    掌握部分硬件知识,有助于程序员编写更好的CUDA程序,提升CUDA程序性能,本文目的是理清sp,sm,thread,block,grid,warp之间的关系.由于作者能力有限,难免有疏漏,恳请读者批评 ...

  2. element UI实现动态生成多级表头

    一.效果图 二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...

  3. Go语言中的打包和工具链

    包 所有Go语言的程序都会组织成若干组文件,每组文件被称为一个包.这样每个包的代码都可以作为很小的复用单元,被其他项目引用. 包名惯例 给包命名的惯例是使用包所在目录的名字.并不需要所有包的名字都与别 ...

  4. Redis（1.10）Redis主从复制下的哨兵模式

    [0]哨兵 sentinel 的作用 其概念参考:Redis高可用(理论篇) 中的[2] [0.1]监控:监控主从是否正常 [0.2]通知:出现问题时,可以通知相关人员 [0.3]故障转移:自动主从切 ...

  5. 【LOJ】#3088. 「GXOI / GZOI2019」旧词

    LOJ#3088. 「GXOI / GZOI2019」旧词 不懂啊5e4感觉有点小 就是离线询问,在每个x上挂上y的询问 然后树剖,每个节点维护轻儿子中已经被加入的点的个数个数乘上\(dep[u]^{ ...

  6. Spring系列三：IoC 与 DI

    水晶帘动微风起,满架蔷薇一院香. 概述 在软件工程中,控制反转(IoC)是一种设计思想,对象之间耦合在一起,在运行时自动绑定,并且它们编译时对所需要引用的对象是不确定的.在这个spring教程中,通过 ...

  7. 在Hadoop中ResourceManager是干什么的？

    [学习笔记] 1)ResourceManager:马克-to-win @ 马克java社区:防盗版实名手机尾号:73203.当应用程序对集群资源需求时,ResourceManager是Yarn集群主控 ...

  8. STL algorithm 头文件下的常用函数

    algorithm 头文件下的常用函数 1. max(), min()和abs() //max(x,y)和min(x,y)分别返回x和y中的最大值和最小值,且参数必须时两个(可以是浮点数) //返回3 ...

  9. django CBV装饰器 自定义django中间件 csrf跨站请求伪造 auth认证模块

    CBV加装饰器 第一种 @method_decorator(装饰器) 加在get上 第二种 @method_decorator(login_auth,name='get') 加在类上 第三种 @met ...

  10. Python开发之JavaScript

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...