706_引入生命周期

发表于 2023-07-06 分类于 Vue 阅读次数：
<body>
    <div id="root">
        <h1 :style="{opacity}">欢迎学习</h1>
    </div>

    <script type="text/javascript">
        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                opacity: 1
            },
            //当Vue完成模板解析，并把初始真实DOM元素放入到页面上（完成挂载）调用mounted
            //mounted里面的this指向为vm
            mounted() {
                setInterval(() => {
                    this.opacity -= 0.01;
                    if (this.opacity <= 0) {
                        this.opacity = 1
                    }
                }, 16)
            },
        })
    </script>
</body>