zoukankan      html  css  js  c++  java
  • 10 生命周期(重要)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .red{
                color: red;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <App></App>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 执行顺序beforeMount》created》mounted
        // computed: 
            // 1.Props,methods,data和computed的初始化都是在beforeCreated和created之间完成的。
            // 2.当Vue实例中的data属性变化并被computed中的计算属性(方法)引用时,所有的相关计算属性又会执行一次。
        // beforeCreate:组件创建之前执行的函数,拿不到组件数据
        // created:组件创建完成执行的函数,可以拿到组件数据
        // beforeMount
        // mounted
        // beforeUpdate
        // updated

        //配合keep-alive
        // activated 激活
        // deactivated 停用

        // beforeDestroy
        // destroyed

        Vue.component('test',{
            data(){
                return{
                    msg:'walter',
                    isRed:false
                }
            },
            methods:{
                handleClick(){
                    this.msg = 'lizzy';
                    this.isRed = !this.isRed
                }
            },
            template:`
                <div>
                    <h3 :class="{red:isRed}">{{msg}}</h3>
                    <button @click="handleClick">改变</button>
                </div>

                `,
            beforeCreate(){
                console.log('组件创建之前')
            },
            created(){
                //非常重要的事情,再此时发送ajax 请求后端的数据
                console.log('组件创建完成',this.$date)
            },
            beforeMount(){
                //即将挂载:组件标签还没有渲染
                console.log(document.getElementById('app'))
            },
            mounted(){
                //挂载完成,组件标签被渲染
                console.log(document.getElementById('app'))
            },
            beforeUpdate(){
                //获取更新之前的DOM
                console.log('更新之前的DOM',document.getElementById('app').innerHTML)
            },
            updated(){
                //获取最新的DOM
                console.log('更新完成的DOM',document.getElementById('app').innerHTML)

            },
            beforeDestroy(){
                console.log('销毁之前')
            },
            destroyed(){
                console.log('销毁完成')
            },
            activated(){
                console.log('组件被激活了')
            },
            deactivated(){
                console.log('组件被停用了')

            }
        })

        const App = {
            data(){
                return {
                    isShow:true
                }
            },
            methods: {
                clickHandler(){
                    this.isShow = !this.isShow
                }
            },
            template: `
                <div>
    <!--                //v-if 指令将根据表达式的值的真假来插入/移除-->
                    <keep-alive>
                        <test v-if="isShow"></test>
                    </keep-alive>
                    <button @click="clickHandler">改变生死</button>
                </div>>`,

        }

        new Vue({
            el:'#app',
            data:{

            },
            components:{
                //2.挂载子组件
                App
            }
        })

    </script>
    </body>
    </html>
  • 相关阅读:
    表变量和临时表的比较
    表变量和临时表
    微信小程序(五)
    微信小程序(四)开发框架
    微信小程序(三)开发框架
    微信小程序(二)
    微信小程序(一)
    菜鸡的Java笔记第二
    C#中的委托和事件
    在GridView控件里面绑定DropDownList控件
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14202606.html
Copyright © 2011-2022 走看看