<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引出生命周期</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="root"> <h2 v-if="isShowHello">你好</h2> <h2 :style="{opacity}">欢迎学习Vue</h2> </div> <script type="text/javascript"> Vue.config.productionTip = false // 组织开发环境提示 // 创建Vue实例 const vm = new Vue({ el: '#root', data: { isShowHello: true, opacity: 1 }, // Vue完成模板解析,并把真实的DOM放入页面后调用mounted注意这里是方法函数,不是对象,刷新页面不会调用mounted mounted() { console.log('mounted') setInterval(() => { this.opacity -= 0.01 if (this.opacity <= 0) this.opacity = 1 }, 16) } }) // setInterval(()=>{ // vm.opacity -= 0.01 // if (vm.opacity <= 0) vm.opacity = 1 // },16) </script> </body> </html>