vue 的生命周期理解步骤

╰半夏微凉° 2022-01-25 15:49 224阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>实例生命周期</title>
        <script src="./vue.js"></script>
    </head>
    <body>
    <div id="app" @click="tstCl">{
       {content}}</div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          content:'hallo'
        },
        template:'<div>{
       {content}}</div>',
        beforeCreate:function () {
          console.log('beforeCreate')
        },
        created:function () {
          console.log('created')
    
        },
        beforeMount:function () {
          console.log('beforemount')
    
        },
        mounted:function () {
          console.log('mounted')
    
        },
        beforeDestroy:function () {
          console.log('beforedestory')
    
        },
        destroyed:function () {
          console.log('destroyed')
        },
        beforeUpdate:function () {
          console.log('beforeupadre')
          
        },
        updated:function () {
          console.log('updated')
          
        },
        methods: {
          tstCl:()=>{
            alert(this)
          }
        },
    
      })
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue_Vue的生命周期

Vue的生命周期：Vue实例的创建、运行、到销毁称为vue的生命周期 8个阶段： beforeCreate():创建之前，获取不到数据和methods;初始化中，初始化

ゝ一世哀愁。/ 2022年12月10日 08:43/ 0 赞/ 223 阅读

相关 vue的生命周期

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 ![af04d1adb

àì夳堔傛蜴生んèń/ 2022年10月29日 13:27/ 0 赞/ 126 阅读

相关 Vue的生命周期

Vue的生命周期解释（作用）：Vue的生命周期是指，页面在不同的状态下触发的事件。 vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作,

- 日理万妓/ 2022年10月29日 05:22/ 0 赞/ 158 阅读

相关彻底理解vue的钩子函数，vue的生命周期理解，什么是vue的生命周期，钩子函数

官方图（官方的图大家总是理解不了）： ![70][] 使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情

秒速五厘米/ 2022年05月05日 13:56/ 0 赞/ 255 阅读

相关 Vue生命周期函数的简单理解

生命周期钩子 > 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在

以你之姓@/ 2022年03月17日 02:20/ 0 赞/ 259 阅读

相关 vue 的生命周期理解步骤

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰半夏微凉°/ 2022年01月25日 15:49/ 0 赞/ 225 阅读

相关 vue的生命周期函数的理解

一、vue的生命周期函数 1.Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生

朱雀/ 2021年11月14日 11:44/ 0 赞/ 353 阅读

相关 vue 生命周期的理解

　　vue的生命周期钩子： beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestroy

向右看齐/ 2021年10月19日 10:46/ 0 赞/ 398 阅读

相关 vue 生命周期自理解

1.beforeCreate 实例初始化之后，数据观测（data observer）和event/watcher 事件配置之前被调用。 data()\{ re

Bertha 。/ 2021年08月27日 15:04/ 0 赞/ 329 阅读

相关 vue的生命周期

vue实例生命周期支持vue实例的生命周期如下：beforeCreatecreatedbeforeMountmounted beforeUpdateupdatedactiva

矫情吗；*/ 2021年07月24日 18:10/ 0 赞/ 590 阅读