Vue2.0变化(2)

Vue动画

• 2.0动画定义的几个class
  1.name-enter{} 动画开始的初始状态
  2.name-enter-active{} 动画完成的状态-元素出现时
  3.name-leave{} 动画退出的结束状态（可以忽略）
  4.name-leave-active{} 动画退出的状态-元素消失时

  <transition name="name">
      <p v-show="show"></p>
  </transition>

动画demo

• 动画的函数接口(写入transition标签内)
  1@before-enter='fn' 动画进入之前
  2@enter='fn' 动画进入
  3@after-enter='fn' 动画完成之后
  4@before-leave='fn' 动画离开之前
  5@leave='fn' 动画退出
  6@after-leave='fn' 动画退出之后
  fn(el)传入的参数是执行动画的元素
  demo动画接口函数
• Vue2.0动画配合animate.css动画库
  1在动画元素上加入animated的class
  2在transition标签内定义动画的执行的名称
  enter-active-class="inName"
leave-active-class="outName"
  配合animate库
• 多个动画元素
  使用transition-group包裹所要运动的元素
  每个运动元素需要使用:key='num'
  多个动画元素demo

Vue2.0路由与vue-loader

• 2.0路由的基本配置
  使用route-link定向路由的位置
  .router-link-active可以设置当前触发路由的样式
  path:*和redirect:设置通配符*默认路由指向位置
  基础的路由配置
• 嵌套使用子路由
  子路由配置和路由配置一样,但是是配置在children数组里
  path:':username/:age'的参数写法可以用{{$router.params}}获取
  路由信息对象参考
  嵌套子路由demo
• vue-route使用HTML5-History API
  router.push(location)表示在历史记录中添加一个路由,当使用这个方法时路由会在历史信息里添加一个新的记录
  router.replace(location)表示替换当前的路由,实际是替换掉当前历史记录,与上一个方法类似但不会再历史记录里添加 ,使用此方法并不会刷新当前页面
  官方参考
  路由切换demo