<!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>