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 功能的编写,在熟悉基 ...
随机推荐
- ES6展开运算符的3个用法
展开运算符的用法1:传参 // 展开运算符的用法1 : 传参 function test(a,b) { return a + b ; } var arr = [1,2]; console.log(te ...
- B-论文一些好的句子
Due to high design and test costs for real many-core chips, simulators which allow exploring the bes ...
- mysql学习之路_外键
回顾4 连接查询: 连接多张表到一起,不管记录数如何,字段数一定会增加. 分类:内连接,外连接.自然连接,交叉连接, 交叉连接:cross join (笛卡尔积) 内连接:inner join,左右两 ...
- mybatis 时间区间比较
直接上代码,此时数据库使用的Date类型: <if test="minCreateTime != null and minCreateTime != ''"> < ...
- 20155205 《Java程序设计》实验二（Java面向对象程序设计）实验报告
20155205 <Java程序设计>实验二(Java面向对象程序设计)实验报告 一.实验内容及步骤 (一)单元测试 (1)三种代码 举例:我们要在一个MyUtil类中解决一个百分制成绩转 ...
- Ueditor Word图片转存交互
三.Word图片转存交互 1.图片转存原理 所谓word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法 ...
- 微信官方api & 非官方api
1.微信公众平台开发者文档 http://mp.weixin.qq.com/wiki/home/index.html 2.微信公众平台 https://mp.weixin.qq.com/ 3.第三方a ...
- Failed to place enough replicas
如果DataNode的dfs.datanode.data.dir全配置成SSD类型,则执行"hdfs dfs -put /etc/hosts hdfs:///tmp/"时会报如下错 ...
- Visual Studio 2017快捷键
作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7048639.html Visual Studio 2017快捷键 Ctrl+ ...
- Maven之java application _HelloWord
maven 是一个项目构建的一个工具; 一.环境的配置; 1.下载maven 解压放在一个路径下为了好找我们就将该文件放在 D:\javaNew\apache-maven-3.3.9 2.配置本地仓 ...