Vue中的生命周期和钩子函数

最新推荐文章于 2022-10-01 14:58:38 发布

空谷丶幽兰

最新推荐文章于 2022-10-01 14:58:38 发布

阅读量111

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/110832558

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2 v-bind:class="className">类型绑定</h2>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'helloVue',
                className:'redBg'
            },
            beforeCreate:function(){
                console.log('beforeCreate');
                console.log(this);
                console.log(this.msg);
                console.log(this.cilckEvent);
                // Vue刚实例化,此时数据data和事件方法methods还未绑定vm对象上
                // beforeCreate这个钩子函数可以做ajax请求，对数据进行绑定
            
            },
            created(){
                console.log('created');
                // 数据data和方法methods绑定到vm对象上
                // 还没渲染到视图上
                console.log(this);
                console.log(this.msg);
                console.log(this.cilckEvent);
            },
            beforeMount(){
                console.log('beforeMount');
                // 渲染之前,根据数据生成的DOM对象是获取不到的
                var dom = document.querySelector('.redBg');
                console.log(dom); //null
            },
            mounted(){
                console.log('mounted');
                // 渲染之后
                var dom = document.querySelector('.redBg');
                console.log(dom);
            },
            beforeUpdate() {
                // 数据更改，但内容未更改之前
                console.log('beforeUpdate');
            },
            updated:function(){
                // 内容已更新完毕
                console.log('updated');
            },
            beforeDestroy() {
                // 应用销毁之前
                console.log('beforeDestory');
            },
            destroyed() {
                // 应用销毁之后
                console.log('destoryed');
            },

            methods:{
                cilckEvent(){
                    console.log('点击事件');
                }
            }
        })

    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
        <div id="app">
            <com v-if="flag"> </com>
        </div>
        <script>
     Vue.component('com',{
            template:'<div><h1>{{con}}</h1> <button @click="changeData">修改</button> </div>',
            data:function(){
                return {
                    con:'hello component',
                }
            },        
            methods:{
                changeData:function(){
                    this.con = 'hello Vue';
                }
            },

            beforeCreate:function(){
                console.log('beforeCreate');
            
                // Vue刚实例化,此时数据data和事件方法methods还未绑定vm对象上
                // beforeCreate这个钩子函数可以做ajax请求，对数据进行绑定
            },
            created(){
                console.log('created');
                // 数据data和方法methods绑定到vm对象上
                // 还没渲染到视图上
           
            },
            beforeMount(){
                console.log('beforeMount');
            
            },
            mounted(){
                console.log('mounted');
                // 渲染之后
           
            },
            beforeUpdate() {
                // 数据更改，但内容未更改之前
                console.log('beforeUpdate');
            },
            updated:function(){
                // 内容已更新完毕
                console.log('updated');
            },
            beforeDestroy() {
                // 应用销毁之前
                console.log('beforeDestory');
            },
            destroyed() {
                // 应用销毁之后
                console.log('destoryed');
            },
        });

            var vm = new Vue({
                el:'#app',
                data:{
                    flag:true,
                },
            
      
            })

        // 组件可能会多次使用，要返回一个新对象
        </script>
</body>
</html>

在这里插入图片描述

空谷丶幽兰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的生命周期和钩子函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><script src="vue.js">&lt
复制链接

扫一扫

专栏目录