执行代码看生命周期函数的执行顺序

  1. <!-- 根组件 -->
  2. <!-- vue的模板内,所有内容要被一个根节点包含起来 App.vue -->
  3. <template>
  4. <div id="app">
  5. <h2>这是vue的根目录</h2>
  6. <button @click="flag=!flag">挂载和卸载lify组件</button>
  7. <v-lify v-if="flag"></v-lify>
  8.  
  9. </div>
  10. </template>
  11.  
  12. <script>
  13. // 1.引入组件;2.挂载组件;3.在模板中使用
  14. import Lify from './components/Lify.vue';
  15. export default {
  16. name: 'app',
  17.  
  18. data () { // data是业务逻辑里面定义的数据
  19. return {
  20. flag:true,
  21.  
  22. }
  23. },
  24. components:{
  25. 'v-lify':Lify,
  26. },
  27.  
  28. }
  29. </script>
  30. <style type="text/css">
  31.  
  32. </style>
  33.  
  1. <!-- Lify.vue -->
  2. <template>
  3. <div>
  4. <br>
  5. <div>我是一个生命周期函数__Lify组件</div>
  6. <button @click="setMeg()">改变数据/触发beforeUpdate()及updated()</button>
  7. <div>{{msg}}</div>
  8. </div>
  9. </template>
  10. <script>
  11. export default{
  12. data(){
  13. return{
  14. msg:'这是条数据',
  15. }
  16.  
  17. },
  18. methods:{
  19. setMeg(){
  20. this.msg='我是改变后的数据'
  21. }
  22. },
  23. beforeCreate(){
  24. console.log('实例刚刚被创建');
  25. },
  26. created(){
  27. console.log('实例已经创建完成');
  28. },
  29. beforeMount(){
  30. console.log('模板编译之前');
  31. },
  32. mounted(){
  33. console.log('模板编译完成'); // 请求数据,操作dom 放在mounted里
  34. },
  35. beforeUpdate(){
  36. console.log('数据更新之前');
  37. },
  38. updated(){
  39. console.log('数据更新完毕');
  40. },
  41. beforeDestroy(){
  42. console.log('实例销毁之前');
  43. },
  44. destroyed(){
  45. console.log('实例销毁完成');
  46. }
  47.  
  48. }
  49. </script>

vue之生命周期函数例子的更多相关文章

  1. Vue之生命周期函数和钩子函数详解

    在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...

  2. Vue 组件 生命周期函数mounted

    生命周期函数mounted:页面刷新触发mounted(){ console.log('我在页面刷新时触发');} Tips:使用export default function Add(){},与ex ...

  3. Vue的生命周期函数

    详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...

  4. 五、vue基础--生命周期函数

    1.创建阶段: a.beforeCreate:Vue已经创建了,但是data,methods都还没有被创建好 b.created:datamethods都被创建好了 c.beforeMount:模板经 ...

  5. Vue过滤器、生命周期函数和vue-resource

    一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. vue实例的生命周期函数

    Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...

  7. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  8. VUE3 之 生命周期函数

    1. 概述 老话说的好:天生我材必有用,千金散尽还复来. 言归正传,今天我们来聊一下 VUE 的生命周期函数. 所谓生命周期函数,就是在某一条件下被自动触发的函数. 2. VUE3 生命周期函数介绍 ...

  9. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. 并发框架Disruptor场景应用

    今天用一个停车场问题来加深对Disruptor的理解.一个有关汽车进入停车场的问题.当汽车进入停车场时,系统首先会记录汽车信息.同时也会发送消息到其他系统处理相关业务,最后发送短信通知车主收费开始.看 ...

  2. Loj #3056. 「HNOI2019」多边形

    Loj #3056. 「HNOI2019」多边形 小 R 与小 W 在玩游戏. 他们有一个边数为 \(n\) 的凸多边形,其顶点沿逆时针方向标号依次为 \(1,2,3, \ldots , n\).最开 ...

  3. day22-多并发编程基础(三)

    今天学习了并发编程中的最后一部分,协程,也是python中区别于java,c等语言中很大不同的一部分 1.协程产生的背景 2.协程的概念 3.yield模拟协程 4.协程中主要的俩个模块 5.协程的应 ...

  4. mysql 提高一 动态sql 传变量

    1.需求 DELIMITER $$ SECOND STARTS '2018-09-07 08:00:00' ON COMPLETION PRESERVE ENABLE DO BEGIN ) DEFAU ...

  5. UML 教程

    UML 教程 关键词:部署图, 组件图, 包图, 类图, 复合结构图, 对象图, 活动图, 状态机图, 用例图, 通信图, 交互概述图, 时序图, 时间图 简介 部署图 组件图 包图 类图 复合结构图 ...

  6. 良好习惯成就Better程序员

    慎于说Yes 在没有搞清楚开发需求.任务工作量.团队期望值之前,有前途的程序员不会轻易答应.特别是对于新人来说,比较急于表现自己,对于同事或者老板的工作安排来者不拒,精神可嘉,方法不可取.承诺太多,会 ...

  7. 阿里云对象存储OSS与文件存储NAS的区别

    一.简介 应用场景:选择一款存储产品,面向文档数据的存取,不会涉及到数据处理. 产品选型主要从OSS和NAS中选择一款,满足文档存储的需求. 二.NAS优缺点 NAS 是一种采用直接与网络介质相连的特 ...

  8. CodeVs 1615 数据备份

    题目:数据备份 链接:Here 题意:有n个点在一条线上,每次连线可以连接两个点(每个点只能被连一次),要求找出m个连线,他们的和最小(连线权值就是两点距离),输出最小的和.给出n.m和每个点的坐标. ...

  9. 第一章· Redis入门部署及持久化介绍

    Redis简介 Redis安装部署 Redis持久化 Redis简介 软件说明: Redis是一款开源的,ANSI C语言编写的,高级键值(key-value)缓存和支持永久存储NoSQL数据库产品. ...

  10. 作业二:分布式版本控制系统Git的安装与使用

    作业要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 1.下载安装配置用户名和邮箱. (1)下载安装Github配置 ...