1、动画
测试一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<style>
/*指定过渡样式*/
.xxx-enter-active, .xxx-leave-active {
transition: opacity 1s
}
/*指定隐藏时的样式*/
.xxx-enter, .xxx-leave-to {
opacity: 0;
}
.move-enter-active {
transition: all 1s
}
.move-leave-active {
transition: all 3s
}
.move-enter, .move-leave-to {
opacity: 0;
transform: translateX(20px)
}
</style>
</head>
<body>
<!--
1. vue动画的理解
操作css的trasition或animation
vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
1). 在目标元素外包裹<transition name="xxx">
2). 定义class样式
1>. 指定过渡样式: transition
2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式
-->
<div id="demo">
<button @click="show=!show">Toggle</button>
<transition name="xxx">
<p v-show="show">hello</p>
</transition>
</div>
<hr>
<div id="demo2">
<button @click="show=!show">Toggle2</button>
<transition name="move">
<p v-show="show">hello</p>
</transition>
</div>
<hr>
<div id="demo3">
<button @click="show">Toggle3</button>
<transition name="move">
<p v-show="isShow">hello</p>
</transition>
</div>
<hr>
<div id="demo4">
<button @click="myShow">Toggle4</button>
<transition name="move">
<p v-show="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
new Vue({
el: '#demo3',
data: {
isShow: true
},
methods: {
log() {
console.log.apply(console, arguments)
},
show() {
this.log('show============>')
this.isShow = !this.isShow
this.log('this.isShow==========>', this.isShow)
}
}
})
new Vue({
el: '#demo4',
data: {
show: true
},
methods: {
log:function () {
console.log.apply(console,arguments)
},
myShow: function () {
this.log('myShow=========>')
this.show = !this.show
this.log('this.show=========>',this.show)
}
}
})
</script>
</body>
</html>测试二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<br>
<transition name="bounce">
<p v-if="show" style="background-color:red;display: inline-block">Lorem</p>
</transition>
</div>
<script>
new Vue({
el:'#example-2',
data:{
show:true
}
})
</script>
</body>
</html>2、过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<!--时间格式化库-->
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
</head>
<body>
<!--
1. 理解过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
-->
<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
<h2>显示格式化的日期时间</h2>
<p>{{time}}</p>
<p>最完整的: {{time | dateString}}</p>
<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script>
//定义过滤器
Vue.filter('dateString', function (value, format) {
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
//创建Vue实例
new Vue({
el: '#test',
data: {
time: new Date()
},
mounted() {
this.log('mounted========>')
setInterval(() => {
this.time = new Date()
}, 1000)
},
methods: {
log() {
console.log.apply(console, arguments)
}
}
})
</script>
</body>
</html>