JS组件系列的MVVM组件vue在30分钟内得到前端的添加、删除和修改

主体

几个月前听说了Vue框架。了解一项新技术后，我总是观望，总是犹豫要不要系统地学习。就在最近，我有点空闲，就去官网了解了一个看起来不错的组件，于是就花时间研究了一下。最近，vue在花园里真的很受欢迎，各种介绍性的博文让人眼花缭乱。博主不敢说写得有多好，就当是学习笔记，有兴趣的可以看。

第一，MVVM竞赛

关于MVVM，在淘汰赛. js的介绍中有说明，目前市场上流行的MVVM框架也是大框架，比如淘汰赛. js、Vue.js、AvalonJS、Angularjs等。每一种都有自己的优势。

淘汰赛：由微软出品，可以说是MVVM模特界的先锋。它利用偷龙转凤的功能，以及最短编辑长度算法实现DOM同步。与IE6兼容，实现高超，但源代码极难阅读，近年来发展缓慢。Vue:是近几年出来的一个开源的Javascript框架。它的语法简洁精炼，但是对浏览器的支持有限，至少只能支持IE9。AvalonJS:这是一个简单易用的迷你MVVM框架，由大神司徒正美开发。使用方便，实现起来也很爽。React:React不属于MVVM建筑，但它带来了一个革命性的虚拟dom概念，这个概念受到视图规模的限制。Angular JS:谷歌出品，已经在很多谷歌产品中使用。AngularJS具有很多特点，其核心是MVC、模块化、自动双向数据绑定、语义标注、依赖注入等。入门比入门容易，很多不可避免的概念也让人头疼。更多MVVM框架的优缺点对比，请看这里。其实在博主的博文中，说得最多的一句话就是：任何技术和框架都有它的价值和意义！从上面可以看出，没有一个框架是真正完美的，关键看你怎么选择。如果你在你的项目中很好地使用了以上任何一个框架，你将会是一个技术牛人。话虽如此，博主们觉得多了解框架对我们并没有坏处，至少可以开阔我们的视野。

二、Vue常用网站

如上所述，Vue是一个开源框架，最新版本已经更新到2.0。它是一个独立的Javascript框架，不依赖于任何其他框架(比如jquery)。以下是博主收集的一些常见网站。

Vue.js开源地址：https://github.com/vuejs/vue

Vue.js的英文api地址：http://vuejs.org/v2/api/

后来，博主找到了一个中文api地址，感谢开源社区工作人员的翻译。https://vuefe.cn/api/

另一位博主觉得做Vue:https://jsfiddle.net/chrisvfritz/50wL7mdz/.的在线测试网站比较方便，在对应的html js css中键入直接运行查看效果。

三.Vue基金会简介

1.MVVM传奇

说到MVVM，我们来看看下图

这个数字足以说明MVVM的核心功能，其中ViewModel无疑起到了重要的桥梁作用。

一方面，Model的数据通过ViewModel绑定到View的Dom元素，当Model中的数据发生变化时，ViewModel中的数据绑定机制会触发View中Dom元素的变化；另一方面，视图模型监控视图中Dom元素的数据变化。当页面上的Dom元素发生变化时，ViewModel通过Dom树的监控机制触发相应Model的数据变化。当然，ViewModel也是Vue.js中的核心组件，它是一个Vue实例。这个实例作用于一个或多个html元素，从而实现Dom树监控和数据绑定的双向更新操作。

2.第一个Vue示例

第一个例子无疑是最简单的应用。要使用vue，不用说，我们必须首先从github下载源代码，然后将其引入到我们的项目中。需要引用的js是vue.js，版本2.0.5。

我们先来看一个最简单的例子：

主体div id='app' h1哎哎哎：{{名称}}/h1 h1#年#:{{年龄}}/h1 h1伊留尼伊留尼安伊留尼安伊留尼安伊留尼安伊留尼安伊留尼安伊留尼安伊留尼安伊留尼安伊留尼安：{{ School }}/h1 /div脚本src=' http 3360 content/view/dist/view。js /脚本类型=' text/JavaScript '/model var data={ name 3360 '是维琪吗： 18岁，3360学校云娥，//查看模型var view=新视图({ El 3330 ' # app)、