开始学习生命周期

2 years ago · 783dec5e28
parent eeb0819d14
commit 783dec5e28
2 changed files with 40 additions and 1 deletions
--- a/01_初识Vue/基础模板.html
+++ b/01_初识Vue/基础模板.html
@ -13,7 +13,7 @@
  Vue.config.productionTip = false  // 组织开发环境提示

  // 创建Vue实例
-  const x = new Vue({
+  const vmx = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
--- a/17_生命周期/1.引出生命周期.html
+++ b/17_生命周期/1.引出生命周期.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>引出生命周期</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h2 v-if="isShowHello">你好</h2>
+    <h2 :style="{opacity}">欢迎学习Vue</h2>
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 创建Vue实例
+    const vm = new Vue({
+        el: '#root',
+        data: {
+          isShowHello: true,
+            opacity: 1
+        },
+        // Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted
+        mounted() {
+          console.log('mounted')
+          setInterval(()=>{
+            this.opacity -= 0.01
+            if (this.opacity <= 0) this.opacity = 1
+          },16)
+        }
+    })
+    // setInterval(()=>{
+    //   vm.opacity -= 0.01
+    //   if (vm.opacity <= 0) vm.opacity = 1
+    // },16)
+</script>
+
+</body>
+</html>