开始学习生命周期

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>