Vue中的MVVM

其实学完vue并自己手写几个完整项目也有一段时间了，现在回望发现除了老师的ppt自己没有写下什么笔记，在项目和基础知识中遇到的问题也没有统一记录，遂决定现在开始一点点回顾学习的内容，记录心得理解和注意事项，供大家学习和参考指正。学习的课程有某马和王元红coderwhy老师的视频。

1.背景及前端历史

最初的超文本标记语言HTML页面是完全静态的页面。随着技术的发展这显然不能满足展示多样性页面的要求，要浏览器动态修改html页面，于是JavaScript出现了。
原生的js操作DOM是很复杂的，然后出现了jQuery库，封装了易用的api。这就是MVC的代表。
MVC是Model-View-Controller的简写，即模型-视图-控制器结构。模型指后端存储的数据，视图即用户看到的页面，而控制器是应用程序中处理用户交互的部分，换句话说就是在Controller里面把Model的数据赋值给View。这样的数据通信是单向的。

随着大前端时代的到来，jquery因为业务逻辑性不强，维护性可复用性等很差，将逐步被三大框架Vue，Angular，React所取代。

2.什么是MVVM

与MVC相对，MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。其中模型和视图的含义都和MVC相同。而视图模型是mvvm模式的核心，它是连接view和model的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。这就是数据的双向绑定。

基于MVVC的vue和jquery主要有区别：数据和视图的分离，解耦（开放封闭原则）；专注于数据层，只关心数据变化，DOM操作被封装。响应式意味着有模型中数据发生变化时，所有用到它的地方都会发生更新。
以下是vue官方文档对响应式原理的解释。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
看到这里如果你还有疑惑，来康康我这个例子^^。

3.响应式实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>counter</title>
</head>
<div id="count"><h2>已点击：{{count}}</h2><button @click="increase">+</button>
</div>
<body>
<script src="vue.js"></script>
<script>let obj = {count: 0};new Vue({el: '#count',data: obj,methods: {increase(){this.count++;}}})
</script>
</body>
</html>

data中绑定了count，并通过mustache语法显示在html页面中。这是model层向view的通信。我们给按钮绑定click事件，这样当点击时，在方法中对数据count++。而在increase方法中，count一改变，对应html页面中，显示的数据也会自动更新。即view中DOM的操作改变了model中的数据。这就是数据的双向绑定。
觉得还可的话点个赞8 (^__)

Vue笔记（一） Vue的MVVM相关推荐

vue笔记1 渐进式、 MVVM 框架
参考理解MVVM在react.vue中的使用结合vue.react.angular谈谈MVC.MVP.MVVM框架 Vue(MVVM).React(MVVM).Angular(MVC)对比 vue ...
【Vue笔记】Vue生命周期函数详细图解
Vue生命周期函数详细图解如下:
vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组
因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据.找了网上的资料后发现js-xlsx可以实现. 首先安装依赖: $ npm install xlsx HTML部分: 引入: im ...
Vue笔记随笔---kalrry
Vue笔记随笔---kalrry VUE vue框架的两大核心: 一.前端开发历史二.MV*模式库 VS 框架 MVC架构模式 MVP架构模式 MVVM架构模式 vue是MVVM 三.开发工具四 ...
Vue笔记-尚硅谷-Alex
Vue笔记 Vue简介官网英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 介绍与描述动态构建用户界面的渐进式 JavaScript 框架 ...
一个后端开发的 Vue 笔记【入门级】
一前言最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
Vue笔记（适合后端人员开发的快速入门）
本文是参照B站up主'编程不良人'整理的笔记目录 1. Vue 引言 2. Vue入门 2.1 下载Vuejs 2.2 Vue第一个入门应用 3. v-text和v-html 3.1 v-text ...
自我总结前端vue笔记
三阶段笔记 node基础(书写简单api接口) 什么是node.js javascript的运行时环境 javascript运行在浏览器的时候:操作DOM,操作BOM,语法ECMAScript jav ...
vue笔记（coderwhy）
开始跟着b站 coderwhy 老师所做的笔记,对比了几个感觉很适合Vue初学链接:https://www.bilibili.com/video/BV15741177Eh?from=search& ...
【VUE 笔记】基础内容
文章目录 01 初识 Vue 1.1 简介 1.1.1 官网 1.1.2 介绍与描述 1.1.3 Vue 的特点 1.1.4 与其他 JS 框架的关联 1.1.5 Vue周边库 1.2 初识 Vue ...

Vue笔记（一） Vue的MVVM

Vue中的MVVM

1.背景及前端历史

2.什么是MVVM

3.响应式实例

Vue笔记（一） Vue的MVVM相关推荐

最新文章

热门文章

Vue笔记 （一） Vue的MVVM

Vue中的MVVM

1.背景及前端历史

2.什么是MVVM

3.响应式实例

Vue笔记 （一） Vue的MVVM相关推荐

最新文章

热门文章

Vue笔记（一） Vue的MVVM

Vue笔记（一） Vue的MVVM相关推荐