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 或 組件實例對象




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM