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

  • 编辑时间: 2016-12-11
  • 浏览量: loading
  • 作者: 段亮

前言:新项目忙了差不多两个月时间,现在终于能闲下来与大家一起学习、分享啦!

废话不多说,进入今天的主题:“前端主流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:

<input type="text" ng-model = "msg">

Vue:

<input type="text" v-model = "msg">

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

我们来看下Vue是怎么做的:

Html:

<div id="demo">
  <p>{{message}}</p>
  <input type="text" v-model="message"/>
</div>


Javascript:

var App = new Vue({ 
  el: "#demo",
  data: { 
    message: 'Hello,Vue.js'
  }
})

渲染结果

 渲染结果

可能有些朋友会好奇,Vue的数据绑定和检测是如何实现的呢?

大致流程为:

  1、将原生的数据改造成 “可观察对象”。一个可观察对象可以被取值,也可以被赋值。

  2、在watcher的求值过程中,每一个被取值的可观察对象,都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。

  3、当一个被依赖的可观察对象被赋值时,它会通知所有订阅自己的watcher重新求值,并触发相应的更新。

如下图所示:

数据渲染流程图


2、组件系统

Vue的组件系统,在整个框架中是一个比较核心的技术。为什么会这么说呢?

因为在一些大型项目开发中,为了更好的分工和代码复用以及可维护性。我们一般会把页面抽象成一颗组件树。如下图所示:

组件抽象图


关于Vue的组件具体介绍,可以关注我的下一篇文章“前端MVVM框架之Vue.js组件篇”。


三、与传统jquery开发的对比

说了这么多Vue的相关东西,很多人可能会疑惑。这个跟我用jquery开发项目有什么区别呢?

在这里我只简单的用一个小小的demo功能,来做对比吧!比如说:我们要监听一个input输入框的值,实施打印在页面。

jQuery版本

Html:

<div id="box">
  <p class="text"></p>
  <input type="text" id="inputText"/>
</div>

Javascript:

$("#inputText").on("input", () => {
   let value = $(this).val() 
   $('.text').text(value)
})

Vue版本

Html:

<div id="demo">
  <p>{{message}}</p>
  <input type="text" v-model="message"/>
</div>

Javascript:

var App = new Vue({ 
  el: "#demo",
  data: { 
    message: 'Hello,Vue.js'
  }
})

结果:

vue123412.gif

因此可以看出:Vue只需要关注数据的变动,而不需要在操作DOM,通过v-model桥接Model(模型)与View(视图)。

之前看到一个比较有意思的比喻:

1、用jQuery开发项目好比老式的纺织机

2、Vue+webapack这种新技术开发项目好比现代纺织工场

纺织机和纺织工场区别: 一个上手容易。 一个在生产效率,多成员协同,管理等方面却是质的飞越。

哈哈,不知道这个比喻是否恰当!如果你有更好的比喻,欢迎留言!

写在最后:回归之前我们讨论的话题:在 2016 年学 JavaScript 是一种什么样的体验?

其实在我认为:现在整个前端已经慢慢走向前端工程化方向,不再单单是简单的切个图,写个静态页面,套个数据这么简单。

更多的考虑:团队之间的如何协作开发,提升我们的开发效率。能让我们提早下班陪女票/老婆和孩子!

以上纯属段亮个人观点,如有缪论。欢迎指出!

如需转载本文,请注明出处。

本文出处:http://www.duanliang920.com/learn/web354.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 犀牛大叔
    2017-01-13 15:48:25发表

    厉害了word哥

  • 社区o2o-m.suofeiya.com
    2016-12-28 18:08:24发表

    写的挺用心的 赞一个!学习到了 谢谢分享!

  • themebetter
    2016-12-27 09:54:54发表

    就是要不停学习新东西,要不就跟不上互联网的步伐了。

  • 工控资料窝
    2016-12-26 15:03:32发表

    要学习的东西真的太多了

  • 春熙路
    2016-12-23 20:09:49发表

    进来支持

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客