vue高级功能 过渡和路由

1、css过渡

通过改变透明度，v-show属性，show是block，transition要配合v-show来使用，name的名字自己定义



通过css实现过渡效果



会有 6 个(CSS)类名在 enter/leave 的过渡中切换

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。

在style里面设置样式，.fade-enter和.fade-leave-active代表初始和最终样式，一般active不写样式，表示原来的状态



也可以有动画效果







v-if和else也能实现动画过渡，但是相同标签不会过渡的效果，会变成直接变，想要过渡可以用不同的标签或者用key区别



2、js钩子过渡

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

// ...

methods: {

  // --------

  // 进入中

  // --------

  beforeEnter: function (el) {

    // ...

  },

  // 此回调函数是可选项的设置

  // 与 CSS 结合时使用

//进入前的状态，也就是初始状态

  enter: function (el, done) {

    // ...进入过渡

    done()

  },

  afterEnter: function (el) {

    // ...

  },

  enterCancelled: function (el) {

    // ...

  },

  // --------

  // 离开时

  // --------

  beforeLeave: function (el) {

    // ...

  },

  // 此回调函数是可选项的设置

  // 与 CSS 结合时使用

  leave: function (el, done) {

    // ...离开过渡

    done()

  },

  afterLeave: function (el) {

    // ...

  },

  // leaveCancelled 只用于 v-show 中

  leaveCancelled: function (el) {

    // ...

  }

}



这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

3、自定义指令 directives属性





全局指令，整个项目都可以使用




 

不同阶段有不同操作



4、插件

1）router路由：根据不同的地址转跳到不同的页面

1. 创建组件

首先引入vue.js和vue-router.js：

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

然后创建两个组件构造器Home和About：

var Home = Vue.extend({

    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',

    data: function() {

        return {

            msg: 'Hello, vue router!'

        }

    }

})

var About = Vue.extend({

    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'

})

2. 创建Router

var router = new VueRouter()

调用构造器VueRouter，创建一个路由器实例router。

3. 映射路由

router.map({

    '/home': { component: Home },

    '/about': { component: About }

})

调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。

例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。

4. 使用v-link指令

<div class="list-group">

    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>

    <a class="list-group-item" v-link="{ path: '/about'}">About</a>

</div>

在a元素上使用v-link指令跳转到指定路径。

5. 使用<router-view>标签

<router-view></router-view>

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

6. 启动路由

var App = Vue.extend({})

router.start(App, '#app')

路由器的运行需要一个根组件，router.start(App, '#app') 表示router会创建一个App实例，并且挂载到#app元素。

注意：使用vue-router的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素。

2）路由参数：

在scriptthis.$routes.parmas获得传过来的参数，参数必须带引号，必须在地址栏上带上参数才可以访问





直接在模板中获取：



3）嵌套路由，要在父组件加上<router-view></router-view>



4）命名的路由视图、路由重定向

1、三种写法

第一种要在里面加单引号，否则会被认为是data里的数据。第二种是具名路由，要给路由命名。route-link可以加上tag属性指定是以什么标签，否则默认a标签



2、命名路由





3、路由过渡动画制作