精通Vue.js

简单小巧的核心，渐进式的技术栈，足以应付任何规模的应用。
简单小巧指的是Vue.js压缩后仅有17KB。渐进式（progressive）是指可以一步一步、阶段性地来使用 Vue.js，不必一开始就使用所有的技能点。随着内容的深入介绍，读者也会逐渐感觉到渐进式的优点，这也是开发者热爱Vue.js的重要原因之一。
使用Vue.js可以让Web开发变得简单，同时也颠覆了传统的前端开发模式。Vue.js提供了现代Web开发中常见的高级功能：
➢ 解耦视图与数据
➢ 可复用的组件
➢ 前端路由
➢ 状态管理
➢ 虚拟DOM（Virtual DOM）

与知名的前端框架Angular.js等一样，Vue.js在设计上也是使用的MVVM（ModelView-ViewModel）模式。
➢ Model：负责数据存储。
➢ View：负责页面展示。
➢ ViewModel：负责业务逻辑处理（比如 AJAX 请求等），对数据进行加工后交给视图展示。
MVVM模式是将View 的状态和行为抽象化，并将视图UI和业务逻辑分开。当然这些工作由 ViewModel 完成，它可以取出 Model的数据，同时处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM模式的结构
➢ 低耦合。视图（View）可以独立于 Model变化和修改，一个 ViewModel 可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
➢ 可重用性。可以把一些视图逻辑放在一个ViewModel里面，让多个View重用这些视图逻辑。
➢ 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

Vue.js是一个渐进式的JavaScript框架，根据项目需求，可以选择从不同的的维度来使用它。因为大觅项目的业务逻辑比较复杂，对前端工程师有一定的要求，需要使用 Vue单文件组件的形式配合Webpack来完成，在配置完路由的大觅项目首页的组件中写入下面的代码来快速体验Vue。

Vue.js自定义了一种.vue文件，可以把HTML、CSS、JS代码写到一个文件中，从而实现对一个组件的封装，一个.vue文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不能识别，因此在Webpack构建中，需要安装vue-loader对.vue文件进行解析。在Visual Studio Code 编辑器中，书写.vue文件前也需要安装对应的插件（如Vetur）来增加对文件的支持。

使用Vue-cli新建一个大觅项目，项项目首页代码如示例1所示。其中，template标签中都是HTML代码，定义了在页面中显示的内容，也可以说定义了一个模板。script标签中都是JS代码，定义了组件中需要的数据和操作。style标签中是CSS样式，定义了组件的样式，属性scoped表明这里写的CSS样式只适用于该组件，限定样式的作用域。

在代码中，export default 后面的对象是定义组件所需要的数据（data）以及操作数据的方法等，更加完整的export default对象还包括methods、data、computed等。不难发现，在.vue组件中，data必须是一个函数，它返回一个对象，这个对象数据供组件实现。后续章节会介绍这些内容，本节只需要了解单文件组件组成和使用即可。