前端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)

二、相关特性简介

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重新求值，并触发相应的更新。

如下图所示: