• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程13:组件创建及组的生命周期函数

    vue开发教程13:组件创建及组的生命周期函数

    作者: 分类:vue开发 点击: 107 次
    wordpress CMS主题:ssmay主题

      前面我们介绍过根组件App.vue,本章我们要介绍非根组件。我们项目的代码编写一般就是在这些非根组件中进行的。接下来我们就来介绍如何创建这类组件,以及组件的生命周期函数。

      一:创建组件。

      1:在src目录下创建一个components组件目录。

      2:再在components组件目录下创建一个home.vue组件。

      vue组件的后缀名是vue,home组件的代码跟根组件的代码组成类似,代码如下:

      <template>

         <div>

              我是home页面 -- {{msg}}

         </div>

      </template>

      <script>

      export default {

        data(){

              return{

                    msg:'我是home页面',

              }

        }

      }

      </script>

      <style lang="scss">     </style>

      我们可以在components目录下创建自己想要实现的任何组件。

      3:在根组件中引用home组件

      第一步:引入home组件文件:

      import home from “./components/home.vue”;

      第二步:挂载声明home组件:

      components:{

      ‘v-home’:home,

      }

      第三步:使用home组件:

      <v-home></v-home>

      app.vue完整代码如下:

      <template>

        <div>

          <v-home></v-home>  使用home组件

        </div>

      </template>

      <script>

      import home from "./components/home.vue"; //引入组件文件

      export default {

        data(){  },

        components:{  //挂载声明组件

          'v-home':home,

        }

      }

      </script>

      <style ></style>

      二:组件的生命周期函数。

      生命周期函数/生命周期钩子:    组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数。

      export default{

          data(){        return{   }    },

          beforeCreate(){ //组件创建前函数

              console.log('实例刚刚被创建1');

          },

          created(){ //组件创建后

              console.log('实例已经创建完成2');

          },

          beforeMount(){ //组件挂载前

              console.log('模板编译挂载之前3');

          },

          mounted(){     /*组件挂载后函数。请求数据,操作dom , 放在这个里面*/

              console.log('模板编译挂载完成4');

          },

          beforeUpdate(){ //组件更新前函数

              console.log('数据更新之前');

          },

          updated(){ //组件更新后

              console.log('数据更新完毕');

          },

          beforeDestroy(){   /*组件销毁前函数。*/

              console.log('实例销毁之前');

          },

          destroyed(){ //组件销毁后

              console.log('实例销毁完成');

          }

      }

      组件的生命周期函数在vue开发过程是非常用的,如:mounted组件挂载完成后函数我们就会经常用到它。所以,这些周期函数,我们要熟练掌握它们。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809257002.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    4条回应:“vue开发教程13:组件创建及组的生命周期函数”

    1. mylayout说道:

      学习了!学习了!学习了!

    2. mylayout说道:

      点赞点赞点赞点赞点赞点赞

    3. xiaojiudy说道:

      周期函数弄明白才能理解什么时候拿数据和调用函数

    4. lwhtarena说道:

      qazwsxedc 点赞

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.