vue 基础教程（八）生命周期过滤器

最新推荐文章于 2024-02-06 11:43:29 发布

小白追梦

最新推荐文章于 2024-02-06 11:43:29 发布

阅读量131

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/109081508

版权

vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

文章目录

前言
一、生命周期
二、vue 过滤器
- 1.我们来回顾一下之前的axios拿到json后使用

前言

学习一下组件的生命周期

一、生命周期

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 里面提取图片不能显示怎么处理？
在这里插入图片描述

另外一种方式过滤器

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 基础教程（八）生命周期过滤器

文章目录前言一、生命周期二、vue 过滤器1.我们来回顾一下之前的axios拿到json后使用前言学习一下组件的生命周期一、生命周期1）先说三组创建、准备、更新我们将代码展现一下主要看下面几个函数方法上面的都是之前的过渡内容点击显示或者隐藏<html><head> <title>test</title> <meta charset="utf-8" /> <style> .
复制链接

扫一扫