vue 基础入门笔记 09:生命周期函数

vue 基础入门笔记 09

  1. beforeCreate() data 和 methods 都没有初始化
  2. created() data 和 methods 有初始化
  3. beforeMount() 模板已经编译好在内存,但尚未把模板渲染到页面
  4. mounted() 模板已经渲染到页面
  5. beforeUpdate() 当data 发生改变触发, 当执行该函数时,页面显示的数据还是旧的,此时data数据是最新的,尚未和页面数据同步

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
    <div id="app"></div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{},
           //data 和 methods 都没有初始化
           beforeCreate() {
    
           },
           //data 和 methods 有初始化
           created() {
           },
           //模板已经编译好在内存,但尚未把模板渲染到页面
           beforeMount() {
    
           },
           //模板已经渲染到页面
           mounted() {
    
           },
           //当data 发生改变触发, 当执行该函数时,页面显示的数据还是旧的,此时data数据是最新的,尚未和页面数据同步
           beforeUpdate() {
    
           },
           updated() {
    
           },
           //示例销毁
           beforeDestroy() {
    
           },
        });
    Vue.config.devtools = true
    </script>
    </body>
    </html>
本作品采用《CC 协议》,转载必须注明作者和本文链接
日照香炉生紫烟
September
讨论数量: 1
自由与温暖是遥不可及的梦想

很详细。

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!