Vue2.x仿饿了么个人笔记
使用vue2.x仿饿了么时遇到了不同版本之间的问题，此处做些笔记。
transition
过渡属性，在之前的版本中在HTML标签中可以直接使用transition作为属性名：
//html
<div transition="fade"></div>
//css
.fade-transition
opacity 1
background rgba(12, 32, 55, 0.8)
.fade-enter, .fade-leave
opacity 0
background rgba(12, 32, 55, 0.4)
vue 2.x版本中需要直接使用transition组件，并且有默认的一些类属性v-enter/v-leave, v-enter-active/v-leave-active, v-enter-to/v-leave-to(这两个属性仅在v2.18+中可用)
// html
<transition-group name="move-fade" tag="div">
<p key="greet">Hello</p>
<p key="name">World</p>
</transition-group>
// css
.move-fade-enter-active
transition all 0.4s
.move-fade-leave-active
transition all 0.4s
.move-fade-enter, .move-fade-leave-to
opacity: 0
tranform: translateX(24px)另外，Vue.transitions属性也已经被取消，可以在transition标签中使用v-on与transition相关的javascript钩子实现相应的功能。
// html
on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
-- transition body -->
// JS
methods: {
beforeEnter () {
...
},
enter () {
},
...
}vue-router
vue2.x版本中在使用webpack模板和vue-cli创建项目时，已经在项目中创建了router目录并在index.js进行了相应的路由映射。因此可以直接在该文件中import相应组件，并且在routes中配置引入组件的path, name及component属性即可。然后在template中使用router-link进行导航，to属性也可以传入一个对象
<router-link to='/error'>出错了</router-link>开发过程中可能会用到router-link的一些属性。router-link标签默认会被解析为a标签，可以通过其tag属性设置其目标对象，比如
<router-link to='/error' tag="li">出错了</router-link>
//解析后
<li> 出错了</li>router-link有一个默认属性router-link-active，是不是太长了，可以在router目录的index.js中配置，使用router的全局对象linkActiveClass
export default new Router({
routes: [],
linkActiveClass: 'active'
})replace属性为boolean类型，出现即表示true，它会调用router.replace()方法而不是router.push()方法；与window.history类似，vue-router有router-push(location)/ router-replace(location)/ router-go(n)方法利用栈结构进行路由
vue-router有三种路由模式，hash(default)/ history/ abstract，浏览器端一般使用hash mode； 在无浏览器API环境中会强制使用abstract模式，支持所有JS 运行环境
为了路径设置更加方面，默认使用@解析为src目录，自己需要自定义的话可以打开webpack.base.conf.js文件将resolve中的alias按照需求进行地址映射即可。
vue-router一般实现
<div id="app">
<h1>Hello App!h1>
<p>
<router-link to="/foo">Go to Foorouter-link>
<router-link to="/bar">Go to Barrouter-link>
p>
<router-view>router-view>
div>// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！CSS3 calc()
calc()是CSS3引入的计算属性，可以用于计算长度、时间、数字、角度等。兼容性：支持IE9+/ Chrome19+/ FireFox4.0+/ Safari6+，除IE外其他浏览器需要使用前缀-webkit和-moz。因此，在使用calc时应当有对应的兼容性设计
width: 90%; /* for browsers without support for calc() */
width: calc(100% - 80px) /* 支持四则运算，符号两边留空格 */calc()可以用于简化居中布局设计，也可以用于与相对单位结合实现一些自适应布局。如下使用calc属性实现文本相对视口进行自动缩放，可以结合rem尺寸实现一般元素的自动缩放
// css
html {
font-size: calc(100vw / 20)
}图标字体
网页中的图片可以使用CSS sprites，这样可以减少http请求数；另外一种方式是使用图标字体。图标字体是将一些矢量图转为使用图标字体有一些优势：一方面可以减少请求数，另一方面使用SVG图可以保证图片缩放之后不失真；更加轻量级；更好的兼容性；使用更加灵活，可以通过font-size设置其大小；可以使用icomoon 将SVG图像生成字体文件，然后download后将生成的fonts文件夹下的文件和相应的*.css导入到需要引用的项目中，在html中引用css中相应的类名即可以引用相应的图标字体。
v-el
在2.x版本中将v-el指令与v-ref指令合并为一个ref属性，并且命名适用驼峰法，可以在通过$refs在组件实例中调用。在2.x中父组件中访问子组件与访问元素方法一样，先在子组件中添加属性ref=”myElement”或ref=“myComponent”，然后可以使用this.$refs.xxx访问，可以通过此方法在父组件访问子组件及其属性和方法等
// vue 1.x
v-el: my-element
v-ref: my-component
// vue 2.x
ref="myElement"
ref="myComponent"vm.$nextTick(callback)
vm.$nextTick(callback)作用与JS中的setTimeout（fn, 0）类似。vue中DOM的更新是异步的，因此在DOM更新后执行的代码要尽快执行只能放在下一个tick中，所以出现了vm.$nextTick()。
$dispatch和$broadcast
新版本events选项已被弃用。$dispatch 、$broadcast用于子组件之间的相互通信，但由于其扩展的复杂性新版本中已经被弃用。父子组件之间的通信可以使用$emit以及$on非父组件的通信可以借助建立一个空的中间件实现
keep-alive
vue2.x中，keep-alive更新为一个类似于transition的包裹组件而不再是一个特殊的属性；
Github代码
参考文献
vue.js官网
MDN calc
v-el & v-ref更新
待续。。。