vue组件的创建和使用以及生命周期函数

日常一总结

要使用vue的组件，需要先给组件建一个文件夹，一般是在src文件夹下的components文件夹。

每一个组件就是一个.vue文件。

首先先在components文件夹下创建一个.vue文件比如life.vue。

编辑这个文件（写什么你随意）。

然后回到APP.vue文件对组件进行引入，挂载和使用

如下1.引入按照这样的形式来写；import后面的是给组件起的引入名

2.挂载建立一个和data同级的components函数，挂载规则如图前面的v-...是使用到template标签中的标签，名字不能和已存在的标签名冲突。后面的是组件的引入名

3.使用直接在template以标签的形式写入页面上就会出现组件的内容了。

这东西总的来说还是挺方便的，可以用做公共头部，底部之类的地方。

这里再提一下生命周期函数

直接上代码

    /*生命周期函数*/
    beforeCreate(){
        console.log('实例刚刚被创建1');
    },
    created(){
        console.log('实例已经创建完成2');
    },
    beforeMount(){
        console.log('模板编译之前3');
    },
    mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
        console.log('模板编译完成4');
    },
    beforeUpdate(){
        console.log('数据更新之前');
    },
    updated(){
        console.log('数据更新完毕');
    },
    beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
        console.log('实例销毁之前');
    },
    destroyed(){
        console.log('实例销毁完成');
    }
}

从加载页面开始到销毁都会打印对应的节点。

销毁的那一步可以通过v-if来操作（v-if为false时直接删除这个标签的代码）

比较常用的是mounted模板加载完成时