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. 条件DCGAN(2019/09/10)

    最近看到keras的官方GAN代码中有CGAN(全连接层)和卷积GAN(DCGAN),但他并没有给出“条件卷积GAN”,预测就把这两者结合了一下.虽然很多人用其他框架(e.g.TensorFlow)写 ...

  2. JMeter—压力测试&性能测试工具

    安装 下载 官方网站下载最新版本: http://jmeter.apache.org/download_jmeter.cgi,使用JMeter依赖jdk,建议安装jdk 1.6版本以上. 环境变量配置 ...

  3. PHP学习(6)——代码重用与函数编写的一些注意事项

    一个新的项目是这样创建的:它将已有的可重新利用的组件进行组合,并将新的开发难度降低到最小. 代码重用的好处:降低成本.提升可靠性和一致性. 1.使用require()和include()函数 使用一条 ...

  4. Notepad++ 用法技巧

    1 搜索技巧 [搜索中文]用正则表达式搜索:[一-龥] 2 用于SWIG语法的模板配置 notepad++是Windows平台上非常优秀的文本编辑器,速度快,功能强,还能自定义语言模板呢.很好用! 这 ...

  5. MySQL_bigint(20) 是什么意思?

    MySQL_bigint(20) 是什么意思? MySQL的整型类型有这样几种:   类型 存储空间 M默认值(显示宽度) 数据大小(无符号:unsigned) 描述 1 tinyint(M) 1 t ...

  6. Spring4学习回顾之路02—IOC&DI

    IOC&DI介绍 ●IOC:(Inversion of Control) :控制反转(反向获取资源) 其思想是反转资源获取的方向.传统的资源上查找方式要求组件向容器发起请求查找资源,作为回应, ...

  7. selenium的使用与chromedriver的下载配置

    Selenium是一个web自动化测试工具,最初是为网站自动化测试而开发的,Selenium可以直接运行在浏览器上,它支持所有主流的浏览器,可以接受指令,让浏览器自动加载页面,获得需要的数据,甚至页面 ...

  8. 牛客 132C 简单瞎搞题 (bitset)

    大意: 给定序列$a$的第$i$个元素的取值范围$[L_i,R_i]$, 求$a$的平方和的种类数. 用bitset优化, 复杂度$O(\frac{n^5}{\omega})$ #include &l ...

  9. 怎样在 Vue 中使用 v-model 处理表单?

    主要是通过 v-model 对表单元素做数据的 双向绑定. 用法其实也很简单, 只是因为表单元素有不同类型, 处理方式有些许不同, 这点需要注意. 1. 如果是 输入框 , 可以直接使用 v-mode ...

  10. golang(8):channel读写 & goroutine 通信

    goroutine 1.进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位 B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独 ...