前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性，以及一个小实例，通过实例来跟大家分享，想必更容易理解。
先来看一下，看完这篇博客，你会做出什么样的效果吧。
就是这样的一个小的demo，其中主要用到了vue-router 2.0 和vue的单文件组件，这里再细分一下如下
- vue-router 2.0 定义路由配置
- router-view 和 router-link 来控制路由
- transition 控制页面之间的跳转动画
- .vue后缀名的单文件组件
- 简单的ES6语法
修改项目目录结构
先来看一下项目的机构，我在原项目目录结构上稍作调整，让目录结构更清晰一些。如下图
在 src 目录下，删除 App.vue ，增加 pages 文件夹，该文件夹用来用来放置我们创建的“页面”（比如，Home.vue）。其实，这里说的“页面”也是组件，只是它变现为一个“页面”而已，跟components 目录下的组件没有本质的区别，我们分开目录放置主要是更语义化，结构更清晰易懂。
可能有的刚接触的同学还不太了解组件（.vue后缀结尾的文件），不要着急，接着往下看。
.vue后缀名的单文件组件
这里先说一下我对组件的理解。组件，顾名思义就是一组元素组成的一个原件（理解的比较浅显、直白），在Vue.js中，表现为一个自定义元素。开篇展示的图中，首页的的列表中的每一项就可以看成一个组件（事实上，在demo中，我也是这么做的），这个组件由一张图片，一个显示价格的元素，一个显示名称的元素组成，我就可以先把它定义为一个list组件。
首先，我们先来分析一下两个页面中组件，如下图
主页可以看做由两个组件组成，homeHeader和list组件，而详情页则可以看成是有detailHeader跟下边的图文内容组成（这里的图文内容也可以写成组件，但是博主这里想偷懒一下，有兴趣的，可以自己试着写成组件）。
分析完两个页面的组件构成之后，我们修改项目目录如下
这样的目录结构，就一目了然了吧。两个页面，Home和detail和其中用到的三个组件。ps：assets目录下新建的img目录，里边放的一张图片是测试用的。
做了这么一大堆铺垫，现在来简单说一说单文件组件.vue文件。拿List.vue为例，说说单文件组件的结构，如下图
单文件组件，由三大部分组成，template、style、script，想必看到这三个标签元素，大家也都对其作用大概了解了吧。
template
template是放置组件的组成部分——html元素的地方，是整个组件的模板构成。不过有一点需要特别注意，template下只能存在一个根html元素作为wrapper，不能存在两个并列的跟元素，否则会报错。
style
style下放置组件的样式，可以用css预处理器less或者sass等，前提是需要安装这些依赖包，和设置lang属性，博主比较懒，直接用css了。这个style里的样式表在项目运行的时候会生成一个style标签，插入到index.html的head标签里，如果组件里的style标签为空，则会在index.html的head里插入一个空的style标签，所以，建议大家，这个组件没有用到css，就不要写一个空的style，直接省略就好。
既然每个组件的样式都会生成一个style插入到index.html中，我们做的又是单页面应用，所有的代码都基于index.html的，那如果我们的项目比较大或者是多人协作开发的，难免会在写组件的时候会命名相同的class，这样的话，具有相同class的不同组件的样式就会收到影响，产生不可预估的样式问题，那岂不是很头疼。其实，vue早就替我想到了这个问题，可以给style设置一个scoped的属性，意思是该style里的样式只对这个组件起作用，不会影响其他组件中含有相同class的元素。那vue是怎么做到的呢？这里先卖个关子，后边再探究竟。
script
script里自然是放的js代码。这里会用到一些ES6的语法，大家可以去
这里 学习ES6的一些新的语法特性。在List.vue的script中，大致意思就是导出一个对象（这个组件），其中设置可以通过属性price和title传递数据。看下边的示意图
具体的怎样利用props传递数据，请看
这里。
.vue单文件组件的三大组成部分大概就是这些，具体的内容，主要是script，整个组件的功能代码全在这里边，大家还要多去学习和了解，由于在下才疏学浅，也只能介绍这些了。
vue-router 2.0
由于用vue主要开发单页面应用，没有页面之间的跳转，在vue中，一个所谓的“页面”实则是一个看起来很像“页面”的一个组件（这个组件大部分情况下包含其他子组件）而已。既然没有页面，那怎样实现页面之间的切换呢？那就是我们现在要介绍的主角——vue-router 2.0。
vue-router是在vue中控制路由的。ps：如果你不太理解路由这个概念，可以简单的理解为url重的hash部分，只不过vue做了一些封装和完善。要控制路由，还需要借助两个vue-router自带的两个组件router-view和router-link。
安装vue-router 2.0
打开命令行，cd到当前项目的目录，运行
cnpm install vue-router --save ，f等待安装完成即可。
router-view
router-view是现实路由内容的地方，即如果有多个“页面”需要切换，显示当前“页面“的地方。需要注意的是，使用vue-router控制路由则必须router-view作为容器。
router-view还可以嵌套，即嵌套路由，详情去
这里学习哟~
router-link
router-link有一个to属性，其属性值是目标路由，在运行项目的时候，router-link表现为a标签，to属性则表现为a标签的href属性。至于，为什么不直接用a标签，我也不知道呢 。如果你知道的话，可以留言告诉我，不胜感激的呢~
这是List组件中用到的router-link组件。
基本的概念和准备工作都做好了，剩下的就是贴代码了，瞬间感觉轻松好多。
修改根目录下的index.html如下：
其中 transition组件是用来控制页面切换的动画用的，transitionName绑定到的是main.js中的data中的transitionName字段。
- >
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- <title>first-vuetitle>
- <style type="text/css">
- * { margin: 0; padding: 0; }
- html,body { background: #eee; }
- ul,li { list-style: none; }
- a { text-decoration: none; }
- img { vertical-align: middle; }
- /* 跳转页面动画 */
- .slide-enter,
- .slide_back-enter {
- position: absolute;
- width: 100%;
- }
- .slide-leave,
- .slide_back-leave {
- position: absolute;
- width: 100%;
- }
- .slide-enter-active,
- .slide_back-enter-active {
- transition: all 0.3s linear;
- }
- .slide-leave-active {
- position: absolute;
- transition: all 0.3s linear;
- transform: translate(-100%);
- }
- .slide-enter{
- transform: translateX(100%);
- }
- .slide_back-leave-active {
- position: absolute;
- transition: all 0.3s linear;
- transform: translate(100%);
- }
- .slide_back-enter {
- transform: translateX(-100%);
- }
- style>
- head>
- <body>
- <div id="app">
- <transition :name="transitionName">
- <router-view>router-view>
- transition>
- div>
- <script type="text/javascript">
- // 计算html的font-size
- (function(){
- function resizeBaseFontSize(){
- var rootHtml = document.documentElement,
- deviceWidth = rootHtml.clientWidth;
- if(deviceWidth > 640){
- deviceWidth = 640;
- }
- rootHtml.style.fontSize = deviceWidth / 7.5 + "px";
- }
- resizeBaseFontSize();
- window.addEventListener("resize", resizeBaseFontSize, false);
- window.addEventListener("orientationchange", resizeBaseFontSize, false);
- })();
- script>
- body>
- html>
修改src目录下的main.js如下：
- // main.js
- // 导入Vue，这个是必需的，在使用Vue之前，必须先导入
- import Vue from 'vue'
- // 导入 vue-router，并使用
- import VueRouter from 'vue-router'
- Vue.use(VueRouter)
- // 导入 pages 下的 Home.vue
- import Home from './pages/Home'
- import Detail from './pages/Detail'
- // 定义路由配置
- const routes = [
- {
- path: '/',
- component: Home
- },
- {
- path: '/detail',
- component: Detail
- }
- ]
- // 创建路由实例
- const router = new VueRouter({
- routes
- })
- // 创建 Vue 实例
- new Vue({
- el: '#app',
- data(){
- return {
- transitionName: 'slide'
- }
- },
- router, // 在vue实例配置中，用router
- watch: {
- // 监视路由，参数为要目标路由和当前页面的路由
- '$route' (to, from){
- const toDepth = to.path.substring(0, to.path.length-2).split('/').length
- // 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'
- // 按照官方给的例子，这两个路由路径深度都为 2 ，所以，这里稍作调整，不知道有什么不妥
- // 但目前在这个demo中能正常运行，如果知道更好的方法，欢迎留言赐教
- const fromDepth = from.path.substring(0, from.path.length-2).split('/').length
- this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'
- // 根据路由深度，来判断是该从右侧进入还是该从左侧进入
- }
- }
- })
HomeHeader.vue代码
