组件使用与生命周期钩子

【一】组件使用

1.组件是什么？有什么用？

[img](http://photo.liuqingzheng.top/2023 02 15 18 56 34 /image-20201216150836004.png)

组件就是：扩展 HTML 元素，封装可重用的代码，目的是复用
例如：有一个轮播图，可以在很多页面中使用，一个轮播有js，css，html
组件把js，css，html放到一起，有逻辑，有样式，有html

[img](http://photo.liuqingzheng.top/2023 02 15 18 56 53 /image-20201216120403499.png)

组件的分类：

  • 全局组件：**可以放在根中
  • 局部组件：

工程化开发之后：

1个组件 就是1个xx.vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <h1>组件使用</h1>
    <hr>
    <Child></Child>
    <hr>



</div>
<script>
    let a = {
        template:`<div>
                    <button @click="handleClick">{{title}}</button>
                  </div>`,

        data(){
            return {
                title:'首页'
            }
        },
        methods:{
            handleClick(){
                alert(this.title)
            }
        }
    }
    // 定义全局组件
    Vue.component('Child', a)
    var vm = new Vue({
        el: '#app',
        data:{

        }})



</script>
</html>

【二】生命周期钩子

【1】：生命周期图

[生命周期图](http://photo.liuqingzheng.top/2023 02 15 18 52 56 /life1-1608077936951.jpg)

钩子函数 描述
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用

create

let vm = new Vue()

mount

挂载，把div挂载到组件中

[img](http://photo.liuqingzheng.top/2023 02 15 18 53 12 /image-20201218091518456.png)

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})

1.bedoreCreate

2.created

3.beforeMount

4.mounted（用得最多）

  • 这时候可以向后端发送数据了

5.beforeUpdate

6.updated

7.beforeDestroy

8.destroyed

组件销毁 - 给组件写一个定时器

setTimeout()    // 延迟3s干什么事
setInterval()    // 延迟3s干什么事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <h1>组件使用</h1>
    <button @click="handleShow">显示隐藏组件</button>
    <hr>
    <Child v-if="isShow"></Child>
    <hr>



</div>
<script>
    let a = {
        template:`<div>
                    <button @click="handleClick">{{title}}</button>
                  </div>`,

        data(){
            return {
                title:'首页',
                t:null,
            }
        },
        methods:{
            handleClick(){
                this.title='云平台'
                // alert(this.title)
            }
        },
        beforeCreate(){
            console.log('beforeCreate')
            console.log(this.title)
            console.log(this.$el)

        },
        created(){
            // 跟后端交互
            console.log('created')
            console.log(this.title)
            console.log(this.$el)
            this.t=setInterval(()=>{
                console.log('你好')
            },3000)

        },
        beforeMont(){
            console.log('beforeMont')
            console.log(this.title)
            console.log(this.$el)
        },
        mounted(){
            console.log('mounted')
            console.log(this.title)
            console.log(this.$el)
        },
        beforeUpdate(){
            console.log('beforeUpdate')
            console.log(this.title)
            console.log(this.$el)
        },
        updated(){
            console.log('updated')

        },
        beforeDestroy(){
            console.log('beforeDestroy')
            // 销毁定时器
            clearInterval(this.t)
            this.t=null
        },
        destroyed(){
            console.log('destroyed')

        }
    }
    // 定义全局组件
    Vue.component('Child', a)
    var vm = new Vue({
        el: '#app',
        data:{
            isShow:true,
        },
        methods:{
            handleShow(){
                this.isShow=!this.isShow
            }
        }}
    )



</script>
</html>
image-20240427003727583
posted @ 2024-04-29 20:00  -半城烟雨  阅读(10)  评论(0)    收藏  举报