vue之生命周期

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。
初始化阶段： beforeCreate created beforeMount mounted
运行中阶段： beforeUpdate updated
销毁阶段： beforeDestroy destroyed

    <div id="app"> 
        <my-component></my-component>
    </div>
    <!--定义组件的模板结构-->
    <template id="my-component">
        <div>
            <h1 id="title">hello---------{{msg}}</h1>
            <p><input type="text" v-model="msg"></p>
        </div>
    </template>

//初始化阶段
//1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期   
 new Vue({}).$mount("#app");
//2.实例化之后，内部会做一些初始化事件与生命周期相关的配置 
 Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    msg:1
                }
            },
            //3.执行beforeCreate钩子函数，这个时候，数据还没有挂载到，只是一个空壳，
            //无法访问到数据和真实的dom，一般不做操作
            beforeCreate(){
                console.log("beforeCreate....")
                console.log(this.msg,document.getElementById("title"))
            },
            //4.执行created函数，这个时候已经可以使用到数据，也可以更改数据,
            //在这里同步更改数据不会触发updated函数，一般可以在这里做初始数据的获取。 
            //通常在此钩子函数做异步ajax，绑定初始化事件  
            created(){
                // this.msg = 222222222222222
                console.log("created...")
                console.log(this.msg,document.getElementById("title"))
            },
            //5.接下来的过程，就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。
            //6.执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，
            //马上就要渲染,在这里也可以更改数据，不会触发updated，
            //这是在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始化数据的获取
            beforeMount(){
                console.log("beforeMount....")
                console.log(this.msg,document.getElementById("title"))
            },
            //7.执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
            mounted(){
                console.log("mounted.....")
                console.log(this.msg,document.getElementById("title"))
            },
            //8.运行时钩子函数初始化阶段是不会主动执行的
            //只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行
            beforeUpdate(){
                console.log("beforeUpdate....")
            },
            // 9、这个钩子函数里面dom获取的数据内容是更新后的内容
            // 生成新的虚拟dom,与上一次的虚拟dom结构进行对比，比较出来差异
            // 再去进行真实dom的重新渲染操作
            updated(){
                console.log("updated...");
                console.log(this.msg,document.getElementById("title").innerHTML)
                
            },
            // 10、当组件销毁的时候就会触发执行
            // 这个钩子函数代表销毁之前，可以做一些善后
            
            beforeDestroy(){
                console.log("beforeDestroy...");
                clearInterval(this.timer)
            },
            // 11、组件一旦被销毁了，组件的dom结构还是存在的
            // 只是组件
            destroyed(){
                console.log("destroyed...");
                
            }
        })

       
        

轮播图实例

<div id="app">
        <my-banner></my-banner>
    </div>

    <!--创建模板-->
    <template id="my-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div 
                    class="swiper-slide"
                    v-for="banner in banners"
                >
                    <img width="100%" :src="banner.image" alt="">
                </div>
            </div>
        </div>
    </template>
    <script>
        //创建组件
        Vue.component("my-banner",{
            template:"#my-banner",
            data(){
                return {
                    banners:[],
                }
            },
            created(){
                this.$http.get("./banners.json").then(res=>{ //1000s之后
                    this.banners = res.data.bannerList
                })
            },
              //当数据发生改变的时候，引发虚拟dom的对比，虚拟dom对比完成后，再去渲染真实的dom结构
              //当真实的dom结构渲染完成后，内部才会执行updated钩子函数
              //数据改变了，然后swiper-slide这几个真实dom生成好了之后，才会进入到updated这个钩子函数里面去。
                
         	updated(){
                new Swiper(".swiper-container",{
                    loop:true 
                })
            }
        })

        new Vue({
            el:"#app"
        })
    </script>

鼠标拖动图片可以实现图片的切换