zoukankan      html  css  js  c++  java
  • [vue]生命周期

    研究生命周期最佳方法, js+chrome提供的debugger断点调试.

    <div id="app">
        {{msg}}
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: 'hi'
            },
            beforeCreate() {
                debugger
            },
            created() {
                debugger
            }
        })
    </script>
    

    参考

    new Vue()发生的事
    1.beforeCreate //用不到
    2.*****created
        发送ajax等异步动作
        渲染html
            如果有template属性会用模板替换掉外部html,
            new Vue({
                template: '<div>{{a}}</div>',
            })
            
                1.只要有此属性app中的内容就没有任何意义了,
                2.只能有一个根元素,不能是文本节点
        
    3.beforeMount //用不到
    4.****mounted
        1.替换el,可以操作dom了,父触发子组件动作
        vm.$mount('#app'); 也可以直接在new Vue()里写el属性,会自动触发这个方法.
        2.当数据更新时
            1.beforeUpdate
            2.updated
            注: 一般用watch替换掉
    
    
    
    5.beforeDestory //用不到
    6.destoryed
        解绑事件
        清除定时器
        vm.$destroy();触发她两执行
        
    

    <div id="app">
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        // 声明周期:beforeCreate created
        //         beforeMount  mounted
        //         beforeUpdate updated
        //         beforeDestroy destroyed
        let vm = new Vue({ // 根实例,初始化时会调用很多方法(钩子函数)
            beforeCreate() {
            }, //1. 此方法用不到
            data: {a: 1, b: ''},
            created() { // 2.获取ajax,初始化操作
            },
            template: '<div>{{a}}</div>', //4.如果有template属性会用模板替换掉外部html,只要有此属性app中的内容就没有任何意义了,只能有一个根元素,不能是文本节点
            beforeMount() {
            }, //没有什么实际意义
            mounted() {
            },// 真实dom渲染完了,可以操作dom了
            beforeUpdate() { // 一般用watch来替换掉
            },
            updated() {
            },
            beforeDestroy() { // 可以清除定时器 或者清除事件绑定
                alert('销毁前')
            },
            destroyed() {
                alert('销毁后')
            },
        });
        vm.$mount('#app');//3.要保证有编译的元素
        vm.$destroy();
    </script>
    

    mounted上的方法

    <div id="app">
        <p ref="myp">{{msg}}</p>
        <div ref="wrap">
            <div v-for="a in arr" ref="mydiv">{{a}}</div>
        </div>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        // this.$data vm上的数据
        // this.$watch 监控
        // this.$el 当前el元素
        // this.$set 后加的属性实现响应式变化
        // this.$options vm上的所有属性
        // this.$nextTick(()=>{ // 异步方法,等待渲染dom完成后来获取vm})
        // this.$refs 放在dom上 就是获取dom元素的
        let vm = new Vue({
            el: '#app',
            data: {msg: 'hello', arr: [1, 2, 3]},
            mounted() {
                // 如果dom元素不是通过v-for循环出来的 只能获取到一个,通过v-for循环出来的可以获取多个
                console.log(this.$refs.mydiv);
                this.arr = [1, 2, 3, 4]; // dom渲染是异步的
                console.log(this.$refs.wrap.children.length);
                this.$nextTick(() => {// 如果数据变化话后想获取真实dom中的内容,需要等待页面渲染完毕后在去获取,所有的dom操作 最好nextTick中
                    console.log(this.$refs.wrap.children.length);
                });
            }
        })
    
    
  • 相关阅读:
    POJ 1659 Frogs' Neighborhood
    zoj 2913 Bus Pass(BFS)
    ZOJ 1008 Gnome Tetravex(DFS)
    POJ 1562 Oil Deposits (DFS)
    zoj 2165 Red and Black (DFs)poj 1979
    hdu 3954 Level up
    sgu 249 Matrix
    hdu 4417 Super Mario
    SPOJ (BNUOJ) LCM Sum
    hdu 2665 Kth number 划分树
  • 原文地址:https://www.cnblogs.com/iiiiiher/p/9033644.html
Copyright © 2011-2022 走看看