前端MVVM框架之“Vue.js入门篇”

前言:新项目忙了差不多两个月时间,现在终于能闲下来与大家一起学习、分享啦!
废话不多说,进入今天的主题:“前端主流MVVM框架–后起之秀Vue.js”
或许有人会疑问?咦,为什么介绍Vue.js呢? 我只晓得Angular、React。Vue.js是什么鬼?Vue到底有着什么样的魔力呢?
答:因为我是Vue粉啊!哈哈。。。说这话,我估计等下会被Angular、React那群人会查水表!(┳_┳)…
如果有关注过前端圈的朋友,我相信大家肯定看过一篇文章“在 2016 年学 JavaScript 是一种什么样的体验?”
相信看过这篇文章的朋友们,都会有感而发:
1、尼玛,2016这一年,学习前端之路“痛并快乐着”!
2、我觉得文章标题应该修改为“2016学前端从入门到放弃”
3、尼玛,我刚学会了jQuery的各种奇淫技巧。又蹦出这么多新技术让我学!(Webapck、ES6、TypeScript…) ( >﹏<。)~呜呜呜

我也觉得:2016的前端真的变化了很多,就好像发动一场革命一样。你需要学习各种新技术Vue2.0、React、Angular2.0、Webapck、ES6… 才能驾驭好项目。
扯这么多,跟我们今天的主题有什么关系呢?别急,我们接着往下看:
一、什么是vue.js
它是一个高效、轻量前端MVVM框架 ( Model/View/ ViewModel)
MVVM结构图

二、相关特性简介
1、MVVM数据绑定(数据驱动)
如果有用过Angular的同学,可能会很亲切。因为Vue的数据绑定借鉴了Angular的指令机制。
Angular:

Vue:

但是与Angular不同的是:Vue.js的API里并没有繁杂的module、controller、scope、factory、service等概念,一切都是以“ViewModel 实例”为基本单位。
我们来看下Vue是怎么做的:
Html:

{{message}}

Javascript:
var App = new Vue({
el: “#demo”,
data: {
message: ‘Hello,Vue.js’
}
})
渲染结果
本文转载自 http://www.zixun119.com/article/810.cshtml

发布了15 篇原创文章 · 获赞 1 · 访问量 2396

猜你喜欢

转载自blog.csdn.net/huang4998802/article/details/89325546