Vue2.5开发去哪儿网App 第五章笔记 下
1. 多个元素或组件的过渡
多个元素的过渡：
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
<transition mode="out-in">
<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">Bye world</div>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个元素或组件的过渡</title>
<script src="../../vue.js"></script>
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition mode="out-in">
<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">Bye world</div>
</transition>
<button @click="handleCLick">click me</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:true
},
methods: {
handleCLick: function () {
this.show = !this.show
},
}
})
</script>
</body>
</html>
多个组件的过渡：
<transition>
<child-one v-if="show"></child-one>
<child-two v-else></child-two>
</transition>
通过component标签
<transition mode="out-in">
<component :is="type"> </component>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个元素或组件的过渡</title>
<script src="../../vue.js"></script>
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<!--<transition mode="out-in">-->
<!--<div v-if="show" key="hello">hello world</div>-->
<!--<div v-else key="bye">Bye world</div>-->
<!--</transition>--> <!--<transition>-->
<!--<child-one v-if="show"></child-one>-->
<!--<child-two v-else></child-two>-->
<!--</transition>-->
<!--<button @click="handleCLick">click me</button>-->
<!--通过动态组件的方式-->
<transition mode="out-in">
<component :is="type"> </component>
</transition>
<button @click="handlechildCLick">click me</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child one</div>'
}) Vue.component('child-two',{
template:'<div>child two</div>'
}) var vm = new Vue({
el:"#app",
data:{
show:true,
type:'child-one'
},
methods: {
handleCLick: function () {
this.show = !this.show
},
handlechildCLick:function () {
this.type = this.type==='child-one'?'child-two':'child-one'
}
}
})
</script>
</body>
</html>
2.列表过渡
<transition-group>
<div v-for="item in list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表过渡</title>
<script src="../../vue.js"></script>
<style>
.v-enter,.v-leace-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition-group>
<div v-for="item in list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="handleCLick">click me</button>
</div>
<script>
var count = 0;
var vm = new Vue({
el:"#app",
data:{
list:[]
},
methods:{
handleCLick:function () {
this.list.push({
id:count++,
title:'hello world'
})
}
}
})
</script>
</body>
</html>
3.动画封装
template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter">
<slot v-if="show"></slot>
</transition>`,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画封装</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<fade :show="show">
<div>Hello world</div>
</fade> <fade :show="show">
<h1>Hello world</h1>
</fade>
<button @click="handleCLick">click me</button>
</div>
<script>
Vue.component('fade',{
props:['show'],
template:`<transition @before-enter="handleBeforeEnter" @enter="handleEneter">
<slot v-if="show"></slot>
</transition>`,
methods:{
handleBeforeEnter:function (el) {
el.style.color = 'red'
},
handleEneter:function (el,done) {
setTimeout(()=>{
el.style.color = 'green'
done()
},2000)
}
}
});
var count = 0;
var vm = new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleCLick:function () {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
Vue2.5开发去哪儿网App 第五章笔记 下的更多相关文章
- Vue2.5开发去哪儿网App 第五章笔记 上
1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
- Vue2.5开发去哪儿网App 第四章笔记 下
1.解决非父子组件之间的传值问题 非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...
- Vue2.5开发去哪儿网App 第三章笔记 下
1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class 例如: :class="{activated:isactivated}" 上面的语法 ...
- Vue2.5开发去哪儿网App 第四章笔记 上
一 . 组件细节知识点 1. 解决组件在h5中编码规范 例如 : table , ul , ol 等等 <table> <tbody> <row></r ...
- Vue2.5开发去哪儿网App 第三章笔记 上
1. vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 ...
- Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
- Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
随机推荐
- 苹果电脑thunderbolt连接两台电脑启动方法
thunderbolt:首先连接连台电脑 然后开启可以启动的电脑, 关闭无法启动的电脑. 接着 按一下法启动的电脑电源—> 然后按t键 会在另外一台可以启动的电脑上出现,无法启动电脑的磁盘. 就 ...
- GDI基础（2）：绘制文本
1.TextOut()和DrawText()函数 CDC::TextOut()在窗口的指定位置处输出文本,函数声明: virtual BOOL TextOut(int x, int y, LPCTST ...
- sas和ssd盘写入数据效率对比
表结构如下: CREATE TABLE `tab_AAA` ( `id` bigint(20) NOT NULL AUTO_INCREMENT , `customer_no` varchar(32 ...
- struts2访问web资源
通过ActionContext访问 public class TestActionContextAction { public String execute(){ //获取 ActionContext ...
- bzoj2004(矩阵快速幂，状压DP)
每个长度为p的区间都必须出现k次1,数据又很小,我们使用状压. dp[i][j]->dp[i+1][j'],dp[i][j]表示当前考虑到了第i个车站,包括第i个其后的p个的状态(有车停或没车停 ...
- codeforces966 A
这题主要就是考虑y1两侧的最近的电梯和楼梯 当时主要是考虑 如果电梯在y1和y2中间的话 那么直接做电梯就是最优解 如果在y2右边就用abs去算 然后发现其实只考虑 y1的左右两边的电梯和楼 ...
- HDU2732一个让我debug了一晚上的题目
思路都理解了,清晰了,就是代码不对,还是有些小地方自己注意不到,即使就在你的眼前也不易发现的那种 Description: 也是一个最大流的构图,没相出来,或者说想简单了也是标记点1 至 n * m是 ...
- Python自动化开发 - 流程控制
一.拾遗主题 1.变量 理解变量在计算机内存中的表示 >>> a = "ABC" Python解释器干了两件事情: 在内存中创建了一个'ABC'的字符串: 在内存 ...
- 雪花算法(snowflake)delphi版
雪花算法简单描述: + 最高位是符号位,始终为0,不可用. + 41位的时间序列,精确到毫秒级,41位的长度可以使用69年.时间位还有一个很重要的作用是可以根据时间进行排序. + 10位的机器标识,1 ...
- 三、Kubernetes之深入了解Pod
1.yaml格式的Pod配置文件内容及注解 深入Pod之前,首先我们来了解下Pod的yaml整体文件内容及功能注解. 如下: # yaml格式的pod定义文件完整内容: apiVersion: v ...