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 功能的编写,在熟悉基 ...
随机推荐
- SQL语句关联查询
一:连接类型: 关联查询:只有存在关联的表才能关联查询,完全独立的表之间无法关联 1.关联的类型:自关联,左关联,右关联,全关联(full join)两张表都是主表 2.关联的表:两张以上,以一张(或 ...
- c# 产生随机数 程序所在路径
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- crontab和crond分析
目录 目录 1 1. 研究目的 1 2. 基本概念 1 3. crontab 1 3.1. 编辑 2 3.1.1. "crontab -e"工作流 2 3.2. 问题 3 4. c ...
- window下切换python
自己的win10装了2.7和3.6版本的python.本不想装2.7的,但node.js的C++的编译居然用到2.X的python,没法子就装了2.7.那怎么切换呢? 为了方便使用,我在系统的path ...
- OkHttp3几个简单的例子和在子线程更新UI线程的方法
okHttp用于android的http请求.据说很厉害,我们来一起尝尝鲜.但是使用okHttp也会有一些小坑,后面会讲到如何掉进坑里并爬出来. 首先需要了解一点,这里说的UI线程和主线程是一回事儿. ...
- [Selenium With C#基础教程] Lesson-01环境搭建
作者:Surpassme 来源:http://www.jianshu.com/p/33b87bc00233 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. 最近开始复习Sele ...
- centos设置服务开机自动启动的方法
centos安装好apache,mysql等服务器程序后,并没有设置成开机自动启动的,为避免重启后还要手动开启web等服务器,还是做下设置好,其实设置很简单,用chkconfig命令就行了. 例如要开 ...
- POJ1065--Wooden Sticks(动态规划)
There is a pile of n wooden sticks. The length and weight of each stick are known in advance. The st ...
- 《SQL必知必会》笔记
SQL必知必会(第4版) 作者:[美]Ben Forta 本书介绍了sql在不同数据库工具(Oracle.SQLite.SQL server.MySQL.MariaDB.PostgreSQL...)是 ...
- codeforce 489d bfs分层处理
这个题确实没想到用bfs进行分层处理,后来看到了大佬的题解之后才想到了这一点 bfs dfs早就学了,可是还是不大会应用到这上面 可以分为三层,起始点,中间点,尾点,需要的数据是中间点到尾点的访问次数 ...