vue生命周期函数

最新推荐文章于 2023-08-09 10:07:46 发布

Avery_xu

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量103

点赞数

分类专栏： vscode 文章标签： vue

本文链接：https://blog.csdn.net/avery_xu/article/details/103820143

版权

vscode 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

2beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{msg}}</h3>
  </div>

  <script>
    var vm=new Vue({
      el:'#app',
      data:{
        msg:'ok'
      },
      methods:{
        show(){
          console.log('执行了show方法')
        }
      },
      //实例被创建
      beforeCreate(){
        console.log(this.msg)
        this.show()
      },
      //实例的data、methods已经被初始化好
      created(){
        console.log(this.msg)
        this.show()
      },
      //在内存中已挂好模板（元素值）
      beforeMount(){
        console.log(document.getElementById('h3').innerText)
      },
      //模板（元素值）被渲染到页面
      mounted(){
        console.log(document.getElementById('h3').innerText)
      },
      //数据被更新，界面元素没更新
      beforeUpdate(){
        console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
        console.log('data中的msg数据是：'+this.msg)
      },
      ///数据被更新，界面元素被更新
      updated(){
        console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
        console.log('data中的msg数据是：'+this.msg)
      }
    })
  </script>
</body>
</html>

Avery_xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue生命周期函数

2beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...
复制链接

扫一扫