遇见Vue.js

一、Vue.js是什么

Vue.js不是一个框架----它只聚焦视图层，是一个构建数据驱动的Web界面的库。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

Vue.js的特性如下。

1.确实轻量

Vue.js的体积是非常小的，而且他不依赖其他基础库。

2.数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

3.指令

类似于AngularJS，可以用一些内置的简单指令（v-*）,也可以自定义指令，通过对应表达式值的变化就可以修改对应的DOM。

4.插件化

Vue.js核心库不包含Router、AJAX、表单验证等功能，但是可以非常方便地加载对应的插件。

二、Vue.js与其他框架的区别

　　1.与Angular.JS的区别

　　首先提到Angular，它来自Google,是目前国内最火的前端框架之一，应用于PC类的复杂交互系统。

　　相同点:

• 都支持指令--内置指令和自定义指令
• 都支持过滤器--内置过滤器和自定义过滤器
• 都支持双向绑定
• 都不支持低端浏览器（比如IE6/7/8）:

1. Vue.js使用比如Array.isArray的ES5特性。
2. AngularJS1.3开始不支持IE8。

不同点:

• AngularJS的学习成本比较高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
• 在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所有的数据都是独立触发的。对于庞大的应用来说。这个优化差异还是比较明显的。

2.与React的区别

React是一个用于构建用户界面的JavaScript库。React主要用于构建UI，很多人认为React是MVC中的V（视图）。React起源于Facebook的内部项目，用来架设Instagram的网站，并于2013年5月开源。

相同点:

• React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
• 中心思想相同:一切都是组件，组件实例之间可以嵌套。
• 都提供合理的钩子函数，可以让开发者定制化地去处理需求。
• 都不内置类似AJAX、Router等功能到核心包，而是以其他方式加载。
• 在组件开发中都支持mixins的特性。

　　不同点:

• React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用Virtual DOM会对渲染出来的结果做脏检查。
• Vue.js在模板中提供了指令、过滤器等，可以非常方便、快捷地操作DOM.

三、如何使用Vue.js

　　1.安装

　　(1) script

如果项目直接通过script加载CDN文件，代码示例如下:

<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>

　　(2)npm

如果项目基于npm管理依赖，则可以使用npm来安装Vue，执行如下命令:

$ npm i vue --save-dev

(3)bower

如果项目基于bower管理依赖，则可以使用bower来安装Vue,执行如下命令;

$ bower i vue --save-dev　

2.第一个Hello World程序

每一次学习新框架，都必将经历过Hello World程序，我们用Vue.js来输出一个微笑内滴滴打车的WebApp首页Tab，代码示例如下；

<div id="didi-navigator">
    <ul>
        <li v-for="tab in tabs">
         {{tab.text}}           
        </li>
    </ul>
</div>

new Vue({
   el:'#didi-navigator' 
   data:{
       tabs:{
       {text:'巴士'},
       {text:'快车'},
       {text:'专车'},
       {text:'顺风车'},
       {text:'出租车'},
       {text:'代驾'},
     }         
    } 
})        

　　3.Vue.js的发展历史

　　Vue.js正式发布于2014年2月，对于目前的Vue.js

• 在开发人数上，覆盖70多贡献者。
• 在受关注度上，GitHub拥有20000多Star。

　　从脚手架、构建、插件化、组件化，到编辑器工具、浏览器插件等，基本涵盖了从开发到测试等多个环节。

　　Vue.js的发展里程碑如下:

• 2013年12月24日，发布0.7.0。
• 2014年1月27日，发布0.8.0。
• 2014年2月25日，发布0.9.0 。
• 2014年3月24日，发布0.10.0 。
• 2015年10月27日，正式发布1.0.0 。
• 2016年4月27日，发布2.0的preview版本。