初识Vue 生命周期

最新推荐文章于 2024-09-24 10:50:41 发布

Dust_SongYunfei

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量280

点赞数 1

分类专栏： # Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/dust__/article/details/114991224

版权

Vue.js 专栏收录该内容

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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="div">
        {{message}}
    </div>
    <script type="text/javascript">
    // 生命周期
          new Vue({
            el:'#div',
            data:{
                // message:'大大'
            },
            //在实例化初始后，数据观测(data observer)和event/watcher 事件配置之前被调用。
            beforeCreate:function(){
                console.log('beforeCreate');
            },
            //在实例创建完成后被立即调用。
            // 实例已完成以下配置：数据观测(data observer),属性和方法的运算，watch/event 事件回调。
            // 然而 挂载阶段还没开始，$el属性目前不可见。
            created:function(){
                console.log('created');
            },
            //在挂载开始之前被调用：相关的渲染函数首次被调用
            beforeMount:function(){
                console.log('beforeMount');
            },
            //el 被新创建的 vm.$el替换，挂载成功
            mounted:function(){
                console.log('mounted');
            },
            //数据更新时调用
            beforeUpdate:function(){
                console.log('beforeUpdate');
            },
            //组件 DOM已更新，组件更新完毕
            updated:function(){
                console.log('updated');
            }
          });
    </script>
</body>
</html>