前端VUE3.0,DAY29，生命周期的引出

最新推荐文章于 2024-03-22 17:51:59 发布

疯子的梦想＠

最新推荐文章于 2024-03-22 17:51:59 发布

阅读量131

点赞数 1

分类专栏：前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120065178

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY29

案例引出

1.写这么一个案例，在网页中显示一段字，这段字呈现类似呼吸灯的效果，即字体逐渐变透明，在变深，循环往复。下列代码是将定时器函数写在vue实例外部实现的，不推荐这种写法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引出生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--初始显示透明度为1-->
        <!--动态绑定样式要加：，写成对象形式-->
        <!--第一个opacity是透明度css属性，第二个opacity是vue中透明度的值-->
        <h2 :style={opacity:opacity}>欢迎学习vue</h2>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    opacity: 1,
                }
            },
        })
        //将定时器写在vue外边，每16毫秒，透明度减0.01，当透明度为负时，恢复为1
        setInterval(() => {
            vm.opacity -= 0.01
            if (vm.opacity <= 0)
                vm.opacity = 1
        }, 16)

    </script>
</body>

</html>

在这里插入图片描述

案例挂载引出

使用了一个mounted函数。挂载指第一次把东西放在页面中，以后的同一东西放在页面叫更新了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引出生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--初始显示透明度为1-->
        <!--动态绑定样式要加：，写成对象形式-->
        <!--第一个opacity是透明度css属性，第二个opacity是vue中透明度的值-->
        <h2 :style={opacity}>欢迎学习vue</h2>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    opacity: 1,
                }
            },
            //写成方法的形式
            methods: {
                changeTouMing() {
                    //非vue管理的函数要加箭头=>,vue直接管理的函数如自定义的函数changeTouming，要用（）｛｝的形式
                    setInterval(() => {
                        this.opacity -= 0.01
                        if (this.opacity <= 0)
                            this.opacity = 1
                    }, 16)
                }
            },
            //mounted是挂载的意思，发生于vue找到模板，然后解析，然后转为真实DOM，然后把真实DOM放入页面。
            //即vue完成模板解析并把真实的DOM元素挂载于页面后（完成挂载）调用mounted。
            mounted() {
                setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0)
                        this.opacity = 1
                }, 16)
            },
        })
        //将定时器写在vue外边，每16毫秒，透明度减0.01，当透明度为负时，恢复为1
        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if (vm.opacity <= 0)
        //         vm.opacity = 1
        // }, 16)

    </script>
</body>

</html>

在这里插入图片描述

总结

所谓的生命周期是指的一些函数，挂载就是指mounted函数。
在这里插入图片描述
生命周期:
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm或组件实例对象。

疯子的梦想＠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY29，生命周期的引出

VUE3.0,DAY29案例引出案例挂载引出总结案例引出1.写这么一个案例，在网页中显示一段字，这段字呈现类似呼吸灯的效果，即字体逐渐变透明，在变深，循环往复。下列代码是将定时器函数写在vue实例外部实现的，不推荐这种写法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
复制链接

扫一扫