Vue2.x仿饿了么我的笔记

使用vue2.x仿饿了么时遇到了不一样版本之间的问题，此处作些笔记。javascript

transitionphp

过渡属性，在以前的版本中在HTML标签中能够直接使用transition做为属性名：css

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

// 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钩子实现相应的功能。vue

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

// JS

methods: {
  beforeEnter () {
  ...
  },
  enter () {
  },
  ...
}

vue-routerjava

vue2.x版本中在使用webpack模板和vue-cli建立项目时，已经在项目中建立了router目录并在index.js进行了相应的路由映射。所以能够直接在该文件中import相应组件，而且在routes中配置引入组件的path, name及component属性便可。而后在template中使用router-link进行导航，to属性也能够传入一个对象webpack

<router-link to='/error'>出错了</router-link>

开发过程当中可能会用到router-link的一些属性。router-link标签默认会被解析为a标签，能够经过其tag属性设置其目标对象，好比git

<router-link to='/error' tag="li">出错了</router-link>
//解析后
<li> 出错了</li>

router-link有一个默认属性router-link-active，是否是太长了，能够在router目录的index.js中配置，使用router的全局对象linkActiveClassgithub

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)方法利用栈结构进行路由web

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尺寸实现通常元素的自动缩放

// 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更新

待续。。。