第 1 章初识 Vue.js

本章主要介绍与 Vue.js 有关的一些概念与技术，并帮助你了解它们背后相关的工作原理。通过对本章的学习，即使从未接触过 Vue.js ，你也可以运用这些知识点快速构建出一个 Vue.js 应用。

Vue.js 是什么

Vue.js 的官方文档中是这样介绍它的。
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
简单小巧是指 Vue.js 压缩后大小仅有 17 KB。所谓渐进式（Progressive），就是你可以一步一步、有阶段性地来使用 Vue.js，不必一开始就使用所有的东西。随着后面章节的不断介绍，你会深刻感受到这一点，这也正是开发者热爱 Vue.js 的主要原因之一。
使用 Vue.js 可以让 Web 开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代 Web 开发中常见的高级功能，比如：

解辑视图与数据

可复用的组件

前端路由

状态管理

虚拟 DOM ( Virtual DOM)

MVVM 模式

与知名前端框架 Angular、 Ember 等一样， Vue.js 在设计上也使用 MVVM (Model-View-View Model) 模式。
MVVM 模式是由经典的软件架构 MVC 衍生来的。当 View （视图层）变化时，会自动更新到 ViewModel （视图模型），反之亦然。 View 和 ViewModel 之间通过双向绑定（tdata-binding）建立联系，如下图所示。

Vue.js 有什么不同

如果你使用过 jQuery ，那你一定对操作 DOM、绑定事件等这些原生 JavaScript 能力非常熟悉，比如我们在指定 DOM 中插入一个元素，并给它绑定一个点击事件：
      if(showBtn){
          var btn = $('<button>点我一下</button>');
          btn.on('click',function(){
              console.log('点你咋滴！');
          });
          $('#app').append(btn);
      }
这段代码不难理解，操作的内容也不复杂，不过这样让我们的视图代码和业务逻辑紧藕合在一起，随着功能不断增加，直接操作 DOM 会使得代码越来越难以维护。
而 Vue.js 通过 MVVM 的模式拆分为视图与数据两部分，并将其分离。因此，你只需要关心你的数据即可， DOM 的事情 Vue 会帮你自动搞定，比如上面的示例用 Vue.js 可以改写为：
  <body>
      <div id="app">
          <button v-if="showBtn" v-on:click="handleClick">点我一下</button>
      </div>
  </body>
  <script>
      new Vue({
          el:'#app',
          date:{
              showBtn:true
          },
          methods:{
              handleClick:function{
                  console.log('点你咋滴！');
              }
          }
      });
  </script>
提示：暂时还不需要理解上述代码，这里只是快速展示 Vue.js 的写法，在后面的章节会详细介绍每个参数的用法。

如何使用 Vue.js

每一个框架的产生都是为了解决某个具体的问题。在正式开始学习 Vue.js 前，我们先对传统前端开发模式和 Vue.js 的开发模式做一个对比，以此了解 Vue.js 产生的背景和核心思想。

传统的前端开发模式

前端技术在近几年发展迅速，如今的前端开发己不再是 10 年前写个 HTML 和 css 那样简单了，新的概念层出不穷，比如 ECMAScript 6、 Node.js、 NPM、前端工程化等。这些新东西在不断优化我们的开发模式，改变我们的编程思想。

随着这些技术的普及，一套可称为“万金油”的技术技被许多商业项目用于生产环境：
jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)

这套技术战以 jQuery 为核心，能兼容绝大部分浏览器，这是很多企业比较关心的，因为他们的客户很可能还在用 IE7 及以下浏览器。使用 RequireJS 或 SeaJS 进行模块化开发可以解决代码依赖混乱的问题，同时便于维护及团队协作。使用轻量级的前端模板（如 doT）可以将数据与 HTML 模板分离。最后，使用自动化构建工具（如 Gulp）可以合并压缩代码，如果你喜欢写 Less、 Sass 以及现在流行的 ES 6，也可以帮你进行预编译。

这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式，由于它的简单、高效、实用，至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移，出现了更复杂的业务场景，比如 SPA （单页面富应用) 、组件解藕等。为了提升开发效率，降低维护成本，传统的前端开发模式己不能完全满足我们的需求，这时就出现了如 Angular、 React 以及我们要介绍的主角 Vue.js 。

Vue.js 的开发模式

Vue.js 是一个渐进式的 JavaScript 框架，根据项目需求，你可以选择从不同的维度来使用它。如果你只是想体验 Vue.js 带来的快感，或者开发几个简单的 HTML 5 页面或小应用，你可以直接通过 script 加载 CDN 文件，例如：
       
      <script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
        
      <script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script> 
两种版本都可以，如果你不太了解各版本的差别，建议直接使用最新的稳定版本。当然，你也可以将代码下载下来，通过自己的相对路径来引用。引入 Vue.js 框架后，在 body 底部使用 new Vue（）的方式创建一个实例，这就是 Vue.js 最基本的开发模式。现在可以写入以下完整的代码来快速体验 Vue:
<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>Vue 示例</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
      <div id="app">
          <ul>
              <li v-for="book in books">{{book.name}}</li>
          </ul>   
      </div>
  </body>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              books: [ 
                  { name: '《Vue.js 实战》' },
                  { name: '《JavaScript 语言精辟》' },
                  { name: '《JavaScript 高级程序设计》' }
              ]
          }
      }); 
  </script>
</html>
在浏览器中访问它，会将图书列表循环显示出来，如图所示。对于一些业务逻辑复杂，对前端工程有要求的项目，可以使用 Vue 单文件的形式配合 webpack 使用，必要时还会用到 vuex 来管理状态， vue-router 来管理路由。这里提到了很多概念，目前还不必去过多了解，只是说明 Vue.js 框架的开发模式多样化，后续章节会详细介绍，到时就会对整个 Vue 生态有所了解了。

了解了 Vue.js 的开发模式后，相信你已经迫不及待地想开启 Vue 的大门了。下一章，我们就直接进入话题，创建第一个 Vue 应用。

第 1 章 初识 Vue.js

Vue.js 是什么

如何使用 Vue.js

推荐阅读更多精彩内容

第 1 章初识 Vue.js