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

<!-- 根组件 -->
<!-- vue的模板内,所有内容要被一个根节点包含起来 App.vue -->
<template>
<div id="app">
<h2>这是vue的根目录</h2>
<button @click="flag=!flag">挂载和卸载lify组件</button>
<v-lify v-if="flag"></v-lify> </div>
</template> <script>
// 1.引入组件;2.挂载组件;3.在模板中使用
import Lify from './components/Lify.vue';
export default {
name: 'app', data () { // data是业务逻辑里面定义的数据
return {
flag:true, }
},
components:{
'v-lify':Lify,
}, }
</script>
<style type="text/css"> </style>
<!-- Lify.vue -->
<template>
<div>
<br>
<div>我是一个生命周期函数__Lify组件</div>
<button @click="setMeg()">改变数据/触发beforeUpdate()及updated()</button>
<div>{{msg}}</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'这是条数据',
} },
methods:{
setMeg(){
this.msg='我是改变后的数据'
}
},
beforeCreate(){
console.log('实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成'); // 请求数据,操作dom 放在mounted里
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
} }
</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. java中 & ^ ~ 的运算

    java运算符 与(&).非(~).或(|).异或(^)   最近看HashMap源码,遇到了这样一段代码: 1 static final int hash(Object key) { 2 i ...

  2. SQL NOW() 函数

    NOW() 函数 NOW 函数返回当前的日期和时间. 提示:如果您在使用 Sql Server 数据库,请使用 getdate() 函数来获得当前的日期时间. SQL NOW() 语法 SELECT ...

  3. 使用PowerDesigner 15对现有数据库进行生成图表结构

    PowerDesigner的安装和基本使用,我就不阐述了.大家可以到这里看看:http://www.blogjava.net/wangdetian168/archive/2011/04/07/Powe ...

  4. mysql分割逗号办法

    https://blog.csdn.net/xcymorningsun/article/details/73436568

  5. DependencyInjection源码解读之ServiceProvider

    var services = new ServiceCollection(); var _serviceProvider = services.BuildServiceProvider(); serv ...

  6. python 项目自动生成requirements.txt文件

    主要使用目的: 任何应用程序通常需要设置安装所需并依赖一组类库来满足工作要求.通过requirements.txt可以一次性安装程序所需要和依赖的包. 为工程生成requirements.txt的两种 ...

  7. wget命令使用报错 certificate common name 'xxx' doesn't match requestde host name

    使用wget命令 wget http://www.monkey.org/~provos/libevent-1.2.tar.gz 报如下错 error:certificate common name & ...

  8. JS 设计模式一 -- 原型模式

    原型模式 概念: 原型模式 是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性. 实现原型模式: 方法一 ...

  9. Django配置404页面

    一.settings配置 1.首先需要在settings中将DEBUG由原来的True改为False DEBUG = False 2.需要设置 ALLOWED_OSTS = ["*" ...

  10. Cnario 3.8支持哪些操作系统?

    Cnario是基于Windows平台开发的软件,包含Server.Messenger和Player三个组件,支持以下Windows 版本系统: Server/Messenger 支持英文版的以下操作系 ...