Vue（二）Vue.js 与其他前端框架对比

一、Vue.js 的性质

Vue.js 聚焦于视图层，通过API 提供数据绑定的组件，是一个构建数据驱动的 Web 界面的库，不是一个前端框架。

Vue.js ① 具有轻量级的特点，方便做数据绑定；② 自带一套指令（也可以自定义扩充）通过表达式的值控制DOM 的状态；③ 方便通过加载插件扩充功能。适用于富交互、状态机一类的前端 UI 界面。

二、Vue.js 与 AngularJS、React、Knockout、Ractive.js、Polymer、Backbone.js、Riot 的区别

Vue.js 与那些前端框架的区别

前端框架	异同点
AngularJS （Google）	相同点： ① 支持指令（内置/自定义）； ② 支持过滤器（内置/自定义）； ③ 支持双向绑定； ④ 不支持底端浏览器（≤ IE8）。 不同点： AngularJS 依赖对数据做脏检查，所以 watcher 越多速度越慢，而Vue.js 使用基于依赖追踪的 watcher，并且使用异步队列更新，所有数据都是独立触发。
React （Facebook）	相同点： ① React 采用特殊的JSX 语法，对文件内容有一些约定，需要编译后使用； ② 中心思想：一切都是组件，组件实例之间可以嵌套； ③ 提供何来的钩子函数，允许开发者定制化地处理需求； ④ 核心包不内置 AJAX、Router 等功能，通过插件等方式加载、扩展； ⑤ 组件开发中支持 mixins 的特性。 不同点： ① React 依赖 Virtual DOM，会对渲染出的结果做脏检查，而 Vue.js 使用的是 DOM 模板； ② Vue.js 在模板中提供指令、过滤器用于操作 DOM。
Knockout	相同点： ① 用到了数据和 DOM 元素绑定，追求 UI 和数据关联，自动刷新； ② DOM 元素基于模板； ③ 支持依赖跟踪。 不同点： ① Knockout 的所有可观测属性都需要手动用 obserable 方法来初始化，并且需要用函数调用的方式操作数据； ② Knockout 没有 ViewModel 之间作用域的继承。
Ractive.js	相同点： 通过实例化一个（Ractive）类，传递元素、数据和模板； 不同点： Ractive 用字符串模板，数据模型用 get 和 set 代码体积较大；
Polymer	相同点： ① 支持数据绑定； ② 约定了文件或元素的组织方式，Polymer 中把 template-script 放在一个文件里。 不同点： ① Polymer 推崇 WebComponennt 标准化，依赖浏览器环境的支持，如果浏览器不支持，则需要加载相应的 Polyfill； ② Polymer 的代码体积大于 Vue.js
Backbone.js	不同点： ① Vue.js 专注于 View，而 Backbone 包含了 View、Collection、Model 及 Router； ② Vue.js 拥有数据绑定的特性，而 Backbone 需要手动通过事件操作 DOM。
Riot	相同点： ① 轻量级； ② 提供自定义的生命周期钩子，方便使用； ③ 与主流工具集成度比较高，支持与各种预编译工具集成； ④ 组件化思想，并且将 HTML、CSS、JS 集成在一个组件中； ⑤ 只更新变化了的元素。 不同点： ① Riot 内置路由功能、设计支持 Virtual DOM； ② Riot 支持自定义标签，将标签内容放在 .tag 文件中，使用 script 特殊的 type="riot/tag" 加载编译器； ③ 推崇 Web Component 标准化； ④ Riot 支持服务端渲染； ⑤ 默认单向绑定。

---

Vue.js 的安装与使用

三种安装方式

环境	安装方式
直接通过 script 加载 CDN 文件	<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.miin.js"></script>
基于 npm 管理依赖	$ npm i vue --save-dev
基于 bower 管理依赖	$ bower i vue --save-dev

Hello World

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

new Vue({
  el: '#my-navigator',
  data: {
    tabs: [
      { text: '首页' },
      { text: '关于我们' }
    ]
  }
})