Vue 生命周期

1.1 简单实现打开页面

1.1.1 元素透明度变化

<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎来到王者荣耀</h2>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#root",
        data:{
            opacity:1
        }
    })
    // 在外部实现定时器控制颜色,缺点占内存,代码耦合度高
    setInterval(()=>{
        vm.opacity -=0.01
        if (vm.opacity <=0){
            vm.opacity =1
        }
    },32)
</script>

1.1.2 方式二 methods 放函数,加载模板触发死循环

<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎来到王者荣耀</h2>
        {{ change() }}
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#root",
        data:{
            opacity:1
        },
        methods:{
        // 在内部死循环,或者需要手动开启,
            change(){
                setInterval(()=>{
                    vm.opacity -=0.01
                    if (vm.opacity <=0){
                        vm.opacity =1
                    }
                },32)
            }
        }
    })
</script>

1.2 使用生命周期实现

函数不写在methods 里面,与methods 同级

1.2.1

//Vue 完成模板的解析并把初始的真实的DOM元素放入页面后, 挂载完成，调用mounted.

<script>
    var vm = new Vue({
        el:"#root",
        data:{
            opacity:1
        },
        methods:{},
        mounted(){
            // 这里需要注意的是this 指代的vm,箭头函数直接往外找,找的是上mounted函数的this ,这个this
            // vue帮我们维护好了是vm,否则的话,再向上寻找就是window了
            setInterval(()=>{
                this.opacity -=0.01
                if (this.opacity <=0){
                    this.opacity =1
                }
            },32)
        }
    })
</script>