Vue生命周期函数
生命周期函数:
组件挂载,以及组件更新,组建销毁的时候出发的一系列方法。
beforeCreate:实例创建之前
created:实例创建完成
beforeMount:模板编译之前
mounted:模板编译完成。请求数据,操作dom放在这
beforeUpdate:数据更新之前
updated:数据更新完毕
beforeDestory:实例销毁之前。页面销毁的时候保存一些数据
destoryed:实例销毁完成
示例代码:
App.vue
<template>
<div id="app">
<v-home v-if="flag"></v-home>
<button @click="flag=!flag">更改v-home展示</button>
</div>
</template> <script>
import Home from "./components/Home.vue";
export default {
name: "app",
data() {
return {
flag: true
};
},
components: {
"v-home": Home
}
};
</script> <style lang="scss">
</style>
components/Home.vue
<template>
<div>
{{title}}
<input v-model="title"/>
</div>
</template>
<script>
export default {
data() {
return {
title: "我是Home组件"
};
},
beforeCreate() {
console.log("实例创建之前");
},
created() {
console.log("实例创建完成");
},
beforeMount() {
console.log("模板编译之前");
},
mounted() {
console.log("模板编译完成");
},
beforeUpdate() {
console.log("数据更新之前");
},
updated() {
console.log("数据更新完毕");
},
beforeDestroy() {
console.log("实例销毁之前");
},
destroyed() {
console.log("实例销毁完成");
}
};
</script>
<style>
</style>
Vue生命周期函数的更多相关文章
- Vue生命周期函数详解
vue实例的生命周期 1 什么是生命周期(每个实例的一辈子) 概念:每一个Vue实例创建.运行.销毁的过程,就是生命周期:在实例的生命周期中,总是伴随着各种事件,这些事件就是生命周期函数: 生命周期: ...
- Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue生命周期函数的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue生命周期函数2
转载:http://blog.csdn.net/qq_15766181/article/details/73549933 钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在 ...
- vue 生命周期函数详解
beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, compu ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- Vue之生命周期函数和钩子函数详解
在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- 【转】Jmeter参数化
参数化:简单的来理解一下,我们录制了一个脚本,这个脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统. 这个时候就需要对用户名和密码进 ...
- oracle删除多个分区表
declare v_date date; v_part_name varchar(); begin v_date := date'2015-2-4'; while v_date >= date' ...
- 使用Kismet进行网络扫描
执行命令启动Kismet root@sch01ar:~# kismet 这个界面是用来设置颜色的,单击Yes按钮,默认颜色灰色 这个界面显示正在使用root用户运行Kismet工具,单击OK 这个界面 ...
- java成神之——安全和密码
安全和密码 加密算法 公钥和私钥加密解密 生成私钥和公钥 加密数据 解密数据 公钥私钥生成的不同算法 密钥签名 生成加密随机数 基本用法 指定算法 加密对象 SealedObject Signatur ...
- Python中正则表达式对中文的匹配问题
python匹配中文的时候特别要注意的是匹配的正则字符串是否是Unicode格式的: import re source = "s2f程序员杂志一2d3程序员杂志二2d3程序员杂志三2d3程序 ...
- C51串口的SCON寄存器及工作…
原文地址:C51串口的SCON寄存器及工作方式作者:batistar 一,串行口控制寄存器SCON 它用于定义串行口的工作方式及实施接收和发送控制.字节地址为98H,其各位定义如下表: D7 D6 D ...
- HDR
[HDR] 什么是 HDR? 高动态范围拍摄(HDR)现在已经得到广泛使用,被用来补偿大多数数码成像传感器有限的动态范围.照片的动态范围是指最暗的色彩与最亮的色彩之间的亮度范围——也可以一并表示色调范 ...
- 设置html页面不被浏览器缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" ...
- 关于CountDownLatch控制线程的执行顺序
在上一篇文章中说过使用thread.join()方法.newSingleThreadExecutor单线程池来控制线程执行顺序.在文章的末尾我提出了一种构想,可否使用经典的生产者和消费者模型来控制执行 ...
- NFA/DFA算法
1.问题概述 随着计算机语言的结构越来越复杂,为了开发优秀的编译器,人们已经渐渐感到将词 法分析独立出来做研究的重要性.不过词法分析器的作用却不限于此.回想一下我们的老师刚刚开始向我们讲述程序设计的时 ...