'.overlay'作为交互的蒙版层 header和footer采用fixed定位，header独立出来（适合hybrid干掉头部），footer放在单个页面里面 #pages作为所有页面的容器，一个.page代表一个页面，每个.page都可以独立布局 页面切换发生在article.page上，class分别为'.page--left','.page--right'，切换动画分别为：'.page--in','.page--out' 默认article.page的padding-top为header的高度，且额外提供了一个扩展的class'.has-header'来取消padding-top，当然也可以给上面的page一个特殊的class，来设置里面的布局 除此之外，提供了两个class来设置页面的padding，分别为'.p10','.plr10'，可以挂靠在`.content`中的标签上 拥有底部footer的，需要在`.content`中再添加一层结构来空出footer占的位置，可参看nav的demo 如果除header外，上面还有需要fixed定位的元素，请在`.content`前面添加`.header-sub`，可参考search的demo，或自定义，可参考calendar的demo 所有的交互层插在body结束之前 注：当父元素设置了transform值的时候，子元素的fixed的定位方式不再是根元素，而是transform的父元素
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
有一点要注意，不要在 action 中替换原始的状态对象——为了观察到变化，组件和 store 需要共享这个对象。 如果我们约定，组件不可以直接修改 store 的状态，而应当派发事件，通知 store 执行 action，那么我们基本上实现了 Flux 架构。此约定的好处是，我们能记录 store 所有的状态变化，并且在此之上实现高级的调试帮助函数，如修改日志，快照，历史回滚等。 Flux 架构常用于 React 应用中。借助于响应系统，Flux 的核心思想能非常容易地用 Vue.js 实现。注意我们这里的演示只是为了介绍概念，简单的情况完全不需要这么做，应根据应用的需求调整这个模式。