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 功能的编写,在熟悉基 ...
随机推荐
- 二叉搜索树、AVL平衡二叉搜索树、红黑树、多路查找树
1.二叉搜索树 1.1定义 是一棵二叉树,每个节点一定大于等于其左子树中每一个节点,小于等于其右子树每一个节点 1.2插入节点 从根节点开始向下找到合适的位置插入成为叶子结点即可:在向下遍历时,如果要 ...
- vue的饿了么写作感受
1.在重复使用的组件中,要把重复使用组件的需要在数据的请求的地方设置为在富组件中,通过props船只到子组件,这样在重复调用次组件的时候既可以很好的避免组件的值的冲突 2.getData的使用,把所有 ...
- mysql 入门 jdbc
在java程序中连接mysql,先要到mysql的网站上面去下载驱动,并且安装,默认安装在c盘(我的都是默认安装,目录为C:\Program Files\MySQL\MySQL Connector J ...
- 行转列group_concat()函数妙用
测试环境准备: mysql> create table test01(name varchar(20),address varchar(20)); Query OK, 0 rows affect ...
- 20155205《Java程序设计》实验五（网络编程与安全）实验报告
20155205 <Java程序设计>实验五(网络编程与安全)实验报告 一.实验内容及步骤 (一) 两人一组结对编程 参考http://www.cnblogs.com/rocedu/p/6 ...
- ueditor+word粘贴上传
公司做的项目要用到文本上传功能. 网上找了很久,大部分都有一些不成熟的问题,终于让我找到了一个成熟的项目. 下面就来看看: 1.打开工程: 对于文档的上传我们需要知道这个项目是否符合我们的初衷. 运行 ...
- share pool 管理机制
Library cache是Shared pool的一部分,它几乎是Oracle内存结构中最复杂的一部分,主要存放shared curosr(SQL)和PLSQL对象(function,procedu ...
- 【译】Surface中你也许不知道的五件事
Bring up the Quick Link Menu - Select the Windows Key + X or right click the Start Button to bring u ...
- hive-内部表和外部表 对比
建表时,需要考虑究竟建内部表还是外部表,内部表和外部表都有哪些不同? 内部表: 1. 数据存储位置:数据最终会被移动到 hive.metastore.warehouse.dir指定的路径下,以表名创建 ...
- yum改成网易的源
用网易的源会快很多,步骤如下:http://mirrors.163.com/.help/centos.html 1.首先备份/etc/yum.repos.d/CentOS-Base.repo mv / ...