zoukankan      html  css  js  c++  java
  • Vue,生命周期函数演示(创建阶段的4个钩子函数)

    Vue,生命周期函数演示(创建阶段的4个钩子函数)

       四个创建阶段的函数

      beforeCreate(){ }

      created(){ } 

      beforeMount(){ }

      mounted(){ }

      老师讲的真的不错, 通俗易懂, 而且笔记还很全

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6     </head>
     7     <script src="../js/vue.js" charset="utf-8"></script>
     8     <body>
     9         <div id="app">
    10             <h3 id="w3">{{ msg }}</h3>
    11         </div>
    12     </body>
    13 </html>
    14 <script>
    15     var vm = new Vue({
    16         el: '#app',
    17         data:{
    18             msg:'ok'
    19         },
    20         methods:{
    21             show(){
    22                 console.log("执行了show方法")
    23             }
    24         },
    25         beforeCreate() {  // 这是我们第一个遇到的生命周期函数, 表示实例完全被创建之前, 会执行它
    26             // console.log(this.msg)   // 输出undefined
    27             // this.show()  //输出this.show is not a function
    28             // 注意: 在 beforeCreate 生命周期函数被执行的时候, data 和 methods 中的 数据都还没有初始化
    29         },
    30         created() {  //这是我们遇到的第二个生命周期函数
    31             // console.log(this.msg)  //输出ok
    32             // this.show()   // 输出 "执行了show方法"
    33             // 在 created 中, data 和 methods 都已经初始化好了!
    34             // 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早, 只能在 created 中操作
    35         },
    36         beforeMount() {  //这是我们遇到的第三个生命周期函数, 表示 模板已经在内存中编译完成了, 但是尚未把 模板渲染到 页面中 
    37             // console.log(document.getElementById("w3").innerText)  // 输出 {{ msg }}
    38             // 在 beforeMount 执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串  
    39         },
    40         mounted() {  //这是我们遇到的第四个生命周期函数, 表示 内存的模板, 已经真是的挂载到了页面上, 用户可以已经看到渲染好的页面
    41             console.log(document.getElementById("w3").innerText)  // 输出 ok
    42             // 注意: mounted 是 实例创建期间的最后一个生命周期函数, 当执行完 mounted 就表示, 实例已经被完全创建好了, 此时, 
    43             // 如果没有其它操作的话, 这个实例, 就静静的 躺在我们的内存中, 一动不动 
    44         }
    45     }) 
    46 </script>
  • 相关阅读:
    Ubuntu配置sublime text 3的c编译环境
    ORA-01078错误举例:SID的大写和小写错误
    linux下多进程的文件拷贝与进程相关的一些基础知识
    ASM(四) 利用Method 组件动态注入方法逻辑
    基于Redis的三种分布式爬虫策略
    Go语言并发编程总结
    POJ2406 Power Strings 【KMP】
    nyoj 会场安排问题
    Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor.
    Java的String、StringBuffer和StringBuilder的区别
  • 原文地址:https://www.cnblogs.com/wo1ow1ow1/p/11057700.html
Copyright © 2011-2022 走看看