前言
学习一下组件的生命周期
一、生命周期
1)先说三组 创建、准备、更新
我们将代码展现一下
主要看下面几个函数 方法 上面的都是之前的过渡内容 点击显示或者隐藏
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<style>
/* .5s 表示 0.5s时间内进场和出场 */
.fhj-enter-active {
animation: bounce-in .5s;
}
.fhj-leave-active {
animation: bounce-in .5s reverse;
}
/* 这个地方是两个状态的变化 0-100 100-0 */
@keyframes bounce-in {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="box">
<button @click="isShow=!isShow">click</button>
<!-- 使用transition标签将样式加在需要显示的元素上 -->
<transition-group tag="ul" name="fhj">
<li v-for="data in datalist" :key="data" v-show="isShow">
{{data}}
</li>
</transition-group>
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
isShow: false,
datalist: ['apple', 'banana', 'orange']
},
methods: {
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
}
})
</script>
</html>
这样之后呢 ?
我们可以发现
最后两个是事件销毁 可以解除监听事件
二、vue 过滤器
1.我们来回顾一下之前的axios拿到json后使用
1)我们在网页如何拿到它的json文件 变成我们的测试json文件
控制台里面的network 里面的数组response拿出来
2)如果我们在json 里面提取图片不能显示怎么处理?
另外一种方式 过滤器