1.3　Vue.js概述

Vue.js是一套构建前端的MVVM框架，它集合了众多优秀主流框架设计的思想，轻量、数据驱动（默认单向数据绑定，但也支持双向数据绑定）、学习成本低，且可与Webpack/Gulp构建工具结合，以实现Web组件化开发、构建和部署等。

Vue.js本身就拥有一套较为成熟的生态系统：Vue+vue-router+Vuex+Webpack+Sass/Less，不仅可以满足小的前端项目开发，也能完全胜任大型的前端应用开发，包括单页面应用和多页面应用等。Vue.js可实现前端页面和后端业务分离、快速开发、单元测试、构建优化、部署等。

提到前端框架，当下比较流行的有Vue.js、React.js和Angular.js。Vue.js以容易上手的API、不俗的性能、渐进式的特性和活跃的社区从中脱颖而出。截至目前，Vue.js在GitHub上的star数已经超过了其他两个框架，成为最热门的框架。

Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue.js完全能够为复杂的单页应用提供驱动。

Vue.js的目标就是通过尽可能简单的API实现响应、数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。Vue.js被定义成一个用来开发Web界面的前端框架，是一个非常轻量级的工具。使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发的模式。

Vue.js是渐进式的JavaScript框架，如果已经有一个现成的服务端应用，可以将Vue.js作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者，如果希望将更多的业务逻辑放到前端来实现，那么Vue.js的核心库及其生态系统也可以满足用户的各种需求。

和其他前端框架一样，Vue.js允许将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS和JavaScript，如图1-3所示，以用来渲染网页中相应的地方。

这种把网页分割成可复用组件的方式就是框架“组件化”的思想。

图1-3　组件化

Vue.js组件化的理念和React异曲同工—一切皆组件。Vue.js可以将任意封装好的代码注册成组件，例如Vue.component('example', Example)，可以在模板中以标签的形式调用。

Example是一个对象，组件的参数配置经常使用到的是template，它是组件将要渲染的HTML内容。

例如，example组件的调用方式如下：

    <body>
    <hi>我是主页</hi>
    <!-- 在模板中调用example组件 -->s
    <example></example>
    <p>欢迎访问我们的网站</p>
    </body>

如果组件设计合理，在很大程度上可以减少重复开发，而且配合Vue.js的单文件组件（vue-loader），可以将一个组件的CSS、HTML和JavaScript都写在一个文件里，做到模块化的开发。此外，Vue.js也可以与vue-router和vue-resource插件配合起来，以支持路由和异步请求，这样就满足了开发SPA的基本条件。

在Vue.js中，单文件组件是指一个后缀名为.vue的文件，它可以由各种各样的组件组成，大至一个页面组件，小至一个按钮组件。在后面的章节将详细介绍单文件组件的实现。

上一章目录下一章