Vue学习笔记33-生命周期

示例一：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引入生命周期</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- <h2 style="opacity: opacity;">Vue 生命周期</h2> -->
    <h2 :style="{opacity}">Vue 生命周期</h2>
  </div>
</body>

</html>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      opacity: 1,
    },

  })

  setInterval(() => {
    vm.opacity -= 0.01
    if (vm.opacity <= 0) vm.opacity = 1
  }, 20)
</script>

示例二(示例一完善，运行效果和示例一一致)：mounted

mounted：挂载 Vue完成模版的解析并把--初始化的真实的DOM--元素放入页面后调用mounted

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引入生命周期2</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- <h2 style="opacity: opacity;">Vue 生命周期</h2> -->
    <h2 :style="{opacity}">Vue 生命周期2</h2>
  </div>
</body>

</html>
<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({
    el: '#root',
    data: {
      opacity: 1,
    },
    methods:
    {

    },
    // 挂载 Vue完成模版的解析并把--初始化的真实的DOM--元素放入页面后调用mounted
    mounted () {
      setInterval(() => {
        this.opacity -= 0.01
        if (this.opacity <= 0) this.opacity = 1
      }, 20)
    }
  })

  // 通过外部定时器实现，不推荐
  // setInterval(() => {
  //   vm.opacity -= 0.01
  //   if (vm.opacity <= 0) vm.opacity = 1
  // }, 20)
</script>

生命周期：

又名，生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不能随便更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向vm或组件实例对象

posted on 2024-03-05 17:04 sunwugang 阅读(7) 评论(0) 编辑收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告