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<transition  v-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 --></transition>

// JSmethods: {  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` 属性指定链接. -->    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->    <router-link to="/foo">Go to Foo</router-link>    <router-link to="/bar">Go to Bar</router-link>  </p>  <!-- 路由出口 -->  <!-- 路由匹配到的组件将渲染在这里 -->  <router-view></router-view></div>

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 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尺寸实现一般元素的自动缩放

// csshtml {  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.xv-el: my-elementv-ref: my-component// vue 2.xref="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更新

---

待续。。。