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>