JS组件系列之MVVM组件vue30分钟搞定前端增删改查-创新互联
正文
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比吉水网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式吉水网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖吉水地区。费用合理售后完善，10年实体公司更值得信赖。前言：关于Vue框架，好几个月之前就听说过，了解一项新技术之后，总是处于观望状态，一直在犹豫要不要系统学习下。正好最近有点空，就去官网了解了下，看上去还不错的一个组件，就抽空研究了下。最近园子里vue也确实挺火，各种入门博文眼花缭乱，博主也不敢说写得多好，就当是个学习笔记，有兴趣的可以看看。
一、MVVM大比拼
关于MVVM，原来在介绍knockout.js的时候有过讲解，目前市面上比较火的MVVM框架也是一抓一大把，比如常见的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它们自己的优势。
- Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。
- Vue：是最近几年出来的一个开源Javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。
- AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。
- React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。
- Angularjs：Google出品，已经被用于Google的多款产品当中。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无疑起着重要的桥梁作用。
- 一方面，通过ViewModel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候，通过ViewModel里面数据绑定的机制，触发View里面Dom元素的变化；
- 另一方面，又通过ViewModel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，
ViewModel通过Dom树的监听机制，触发对应的Model的数据变化。
当然在Vue.js里面ViewModel也是核心部件，它就是一个Vue实例。这个实例作用于单个或者多个html元素，从而实现Dom树监听和数据绑定的双向更新操作。
2、第一个Vue实例
关于第一个实例，无疑是最简单的应用。要使用vue，不用多说，肯定是先去github上面下载源码喽，然后引入到我们的项目中来，需要引用的js就一个vue.js，版本是2.0.5。
先来看一个最简单的例子：
姓名：{{ Name }}
年龄：{{ Age }}
学校：{{ School }}
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站标题：JS组件系列之MVVM组件vue30分钟搞定前端增删改查-创新互联
浏览地址：http://6mz.cn/article/cosjpi.html