3.9.滚动行为

设置滚动行为的作用是导航到新路由时,让页面滚动到你想要的位置。

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
}

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

3.10.过渡效果

vue中封装了一套transtion组件,可以提供过渡效果

<transition>
<router-view></router-view>
</transition>

3.10.1.通过过渡css类名的方式来设置过渡效果

过渡的类名称有:

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

v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

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

v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

<template>
<div class="page">
<button @click="pushHandle">push方法</button>
<button @click="replaceHandle">replace方法</button>
<button @click="backHandle">back方法</button>
<button @click="forwardHandle">forword方法</button>
<button @click="goHandle">go方法</button>
// 设置过渡动效
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
</template> <script type="text/ecmascript-6">
export default {
data () {
return { }
},
components: { },
methods: {
pushHandle () {
// this.$router.push('/hello') push内部直接给字符串
// push内部可以给对象
this.$router.push({name: 'wenda'})
},
replaceHandle () {
this.$router.replace('/questions')
},
backHandle () {
this.$router.back()
},
forwardHandle () {
this.$router.forward()
},
goHandle () {
this.$router.go(1)
},
say () {
console.log(1)
} }
}
</script> <style scoped>
.page {
border: 1px solid #ccc;
background-color: #ccc;
height: 2000px; background-color: aquamarine;
}
.v-enter {
transform: translateX(-100%);
opacity: 0;
}
.v-enter-to {
transform: translateX(0);
opacity: 1;
}
.v-enter-active {
transition: 1s;
} .v-leave {
transform: translateX(0);
opacity: 1;
}
.v-leave-to {
transform: translateX(100%);
opacity: 0;
}
.v-leave-active{
transition: 1s;
} </style>

其中,v- 这个前缀是可以自定义的,例如:

.fade-enter {
transform: translateX(-100%);
opacity: 0;
}
.fade-enter-to {
transform: translateX(0);
opacity: 1;
}
.fade-enter-active {
transition: 1s;
} .fade-leave {
transform: translateX(0);
opacity: 1;
}
.fade-leave-to {
transform: translateX(100%);
opacity: 0;
}
.fade-leave-active{
transition: 1s;
}

我们把类名称的前缀自定义成了“fade-”, 这里需要注意的是前缀可以自定义,但是后面的enter、enter-to不能自定义,自定义类名称后,需要在transition组件上加name属性

<transition mode="out-in" name="fade">
<router-view></router-view>
</transition>

上面代码中,我们发现有个mode属性,这个属性表示设置过渡的模式, out-in,通俗的说就是先离开,再进入,同时还有另一种模式,in-out,先进入,再离开

3.11.钩子函数

这里不严谨但通俗的说钩子函数,先来看看生活中的钩子

钩子的作用就是挂东西的,在编程中把函数挂在某个位置,可以形象的理解为某个钩子,例如;vue中组件的生命周期

这里的beforecreate和created就是钩子函数,通俗的说,就是挂在哪儿,运行到对应的时刻会被触发执行

螺钉课堂视频课程地址:http://edu.nodeing.com

vue全家桶(2.6)的更多相关文章

  1. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  2. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  3. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  4. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  5. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  6. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

  7. 一个简单的假vue全家桶(vue+vue-router+require)

    首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...

  8. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  9. Vue全家桶了解一下(待补充)

    vue全家桶了解一下 一.vue+vue-router+vuex+axios1.vue:使用vue-cli,生成最基本的vue项目2.vue-router:vue项目中的路由管理插件3.vuex:vu ...

  10. 升级vue全家桶过程记录

    背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...

随机推荐

  1. jchdl - GSL Node

    https://mp.weixin.qq.com/s/Oa4qgjIUccu5Y-Jlqcyn_A   org.jchdl.model.gsl.core.meta.Node.java   ​​ gen ...

  2. WebAPI之FormData

    MDNformdata参考--https://developer.mozilla.org/zh-CN/docs/Web/API/FormData MDNformdata参考--https://deve ...

  3. 【HBase】 常用命令

    创建表 hbase(main):006:0> create 'goods_zc','type' 0 row(s) in 1.3090 seconds => Hbase::Table - g ...

  4. Redis 入门到分布式 (八)Redis Sentinel

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) sentinel-目录 主从复制高可用 安装配置 实现原理 架构说明 客户端连接 常见开发运维问题 一. ...

  5. Java实现 LeetCode 622 设计循环队列(暴力大法)

    622. 设计循环队列 设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为"环形缓冲器" ...

  6. java实现第六届蓝桥杯无穷分数

    无穷分数 无穷分数 无穷的分数,有时会趋向于固定的数字. 请计算[图1.jpg]所示的无穷分数,要求四舍五入,精确到小数点后5位,小数位不足的补0. 请填写该浮点数,不能填写任何多余的内容. 结果:0 ...

  7. java实现第八届蓝桥杯数位和

    数位和 题目描述 数学家高斯很小的时候就天分过人.一次老师指定的算数题目是:1+2+-+100. 高斯立即做出答案:5050! 这次你的任务是类似的.但并非是把一个个的数字加起来,而是对该数字的每一个 ...

  8. 快速幂解法--x^n

    class Solution{ public: double myPow(double x,int n){ if(==x || n==) return ; if(n == ) return x; if ...

  9. opencl(5)缓存对象

    //创建的内存对象由内核访问,将缓冲区作为参数传递给内核 1:创建缓存对象 cl_mem clCreateBuffer( cl_context context, //上下文 cl_mem_flags ...

  10. KVM NAT(网络地址转换模式)

    NAT(网络地址转换模式) 使用NAT模式,就是让虚拟系统借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网.也就是说,使用NAT模式可以实现在虚拟系统里访问互联网.很显然,如果你只有一 ...