Vue 生命周期 mounted

名称:生命周期回调函数、生命周期函数、生命周期钩子

是什么:Vue 在关键时刻帮我们调用的一些特殊名字的函数


这里使用 mounted 做个例子

mounted:Vue 完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闪烁</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h3 :style="{opacity}">你好</h3>
</div>

</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        // Vue 完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用 mounted
        // 此处的 this 指向为 vm
        mounted() {
            setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        }
    })
</script>
</html>

运行结果



备注

生命周期函数的名字不可更改,但函数的具体内容是程序员更具需求编写的

生命周期函数中的 this 的指向是 vm 或 组件实例对象



posted @ 2022-04-20 10:01  春暖花开鸟  阅读(1220)  评论(0编辑  收藏  举报