vue之生命周期函数例子
执行代码看生命周期函数的执行顺序
- <!-- 根组件 -->
- <!-- 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之生命周期函数例子的更多相关文章
- Vue之生命周期函数和钩子函数详解
在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...
- Vue 组件 生命周期函数mounted
生命周期函数mounted:页面刷新触发mounted(){ console.log('我在页面刷新时触发');} Tips:使用export default function Add(){},与ex ...
- Vue的生命周期函数
详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
- 五、vue基础--生命周期函数
1.创建阶段: a.beforeCreate:Vue已经创建了,但是data,methods都还没有被创建好 b.created:datamethods都被创建好了 c.beforeMount:模板经 ...
- Vue过滤器、生命周期函数和vue-resource
一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- VUE3 之 生命周期函数
1. 概述 老话说的好:天生我材必有用,千金散尽还复来. 言归正传,今天我们来聊一下 VUE 的生命周期函数. 所谓生命周期函数,就是在某一条件下被自动触发的函数. 2. VUE3 生命周期函数介绍 ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- 并发框架Disruptor场景应用
今天用一个停车场问题来加深对Disruptor的理解.一个有关汽车进入停车场的问题.当汽车进入停车场时,系统首先会记录汽车信息.同时也会发送消息到其他系统处理相关业务,最后发送短信通知车主收费开始.看 ...
- Loj #3056. 「HNOI2019」多边形
Loj #3056. 「HNOI2019」多边形 小 R 与小 W 在玩游戏. 他们有一个边数为 \(n\) 的凸多边形,其顶点沿逆时针方向标号依次为 \(1,2,3, \ldots , n\).最开 ...
- day22-多并发编程基础(三)
今天学习了并发编程中的最后一部分,协程,也是python中区别于java,c等语言中很大不同的一部分 1.协程产生的背景 2.协程的概念 3.yield模拟协程 4.协程中主要的俩个模块 5.协程的应 ...
- mysql 提高一 动态sql 传变量
1.需求 DELIMITER $$ SECOND STARTS '2018-09-07 08:00:00' ON COMPLETION PRESERVE ENABLE DO BEGIN ) DEFAU ...
- UML 教程
UML 教程 关键词:部署图, 组件图, 包图, 类图, 复合结构图, 对象图, 活动图, 状态机图, 用例图, 通信图, 交互概述图, 时序图, 时间图 简介 部署图 组件图 包图 类图 复合结构图 ...
- 良好习惯成就Better程序员
慎于说Yes 在没有搞清楚开发需求.任务工作量.团队期望值之前,有前途的程序员不会轻易答应.特别是对于新人来说,比较急于表现自己,对于同事或者老板的工作安排来者不拒,精神可嘉,方法不可取.承诺太多,会 ...
- 阿里云对象存储OSS与文件存储NAS的区别
一.简介 应用场景:选择一款存储产品,面向文档数据的存取,不会涉及到数据处理. 产品选型主要从OSS和NAS中选择一款,满足文档存储的需求. 二.NAS优缺点 NAS 是一种采用直接与网络介质相连的特 ...
- CodeVs 1615 数据备份
题目:数据备份 链接:Here 题意:有n个点在一条线上,每次连线可以连接两个点(每个点只能被连一次),要求找出m个连线,他们的和最小(连线权值就是两点距离),输出最小的和.给出n.m和每个点的坐标. ...
- 第一章· Redis入门部署及持久化介绍
Redis简介 Redis安装部署 Redis持久化 Redis简介 软件说明: Redis是一款开源的,ANSI C语言编写的,高级键值(key-value)缓存和支持永久存储NoSQL数据库产品. ...
- 作业二:分布式版本控制系统Git的安装与使用
作业要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 1.下载安装配置用户名和邮箱. (1)下载安装Github配置 ...