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

  • 编辑时间: 2016-12-11 21:37:59
  • 浏览量: 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、组件系统


剩余79%内容付费后可查看

为保证文章的高质量产出,以下内容为vip付费阅读哦!

单独付费阅读:¥2.00 开通VIP会员

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

表情
0 条评论 最热评论 最新评论
  • 亲,暂时没有评论哦!赶紧来留下你的脚印吧!

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

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

最新推荐
loading... 数据加载中...

超低服务器价格,值得购买!