vue学习（五）生命周期 的钩子函数
生命周期的钩子函数 主要有以下几种
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured * 不经常用我们这里不介绍
具体介绍 看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body> <div id="app">
<!--用子-->
<App></App>
</div> <script>
// 全局组件
Vue.component('Vlife', {
// 组件中的data一定是一个函数
data() {
return {
msg: '生命周期'
}
},
methods: {
handlerClick() {
this.msg = '晓强'
}
},
template: `<div>
<button @click="handlerClick">改变（beforeUpdate和Update）</button>
{{msg}}
</div>`,
beforeCreate() {
console.log('组件创建之前', this.$data)
},
created() {
// 非常重要的事情，在此时发送ajax 请求后端的数据 然后赋值给msg
console.log('组件创建完成', this.$data)
},
beforeMount() {
// 在挂载开始之前被调用 实际是还没有被加载出来
console.log('DOM在挂载之前', document.getElementById('app'))
},
mounted() {
// DOM挂载完成 也可以这发送 ajax 网页图片处
console.log('DOM挂载完成', document.getElementById('app'))
},
beforeUpdate() {
// 改变当前的元素 有个按钮在Vlife里[获取原始的DOM]
console.log('更新之前的DOM', document.getElementById('app').innerHTML)
},
updated() {
// 获取最新的DOM
console.log('更新完成之后的DOM', document.getElementById('app').innerHTML)
},
beforeDestroy() {
// 销毁之前 在父组件中
console.log('销毁之前')
},
destroyed() {
// 销毁之后
console.log('销毁之后')
},
activated() {
// 激活 这两个方法要配合 keep-alive 保持活跃状态相当于把组件放在一个缓存中
// 可以用在一个页面退回到另一个页面 还保持原来的状态
console.log('组件被激活了')
},
deactivated() {
// 停用 这两个方法要配合 keep-alive 保持活跃状态相当于把组件放在一个缓存中
console.log('组件被停用了') },
}); // 生子
const App = {
data() {
return {
isShow: true
}
},
methods: {
clickHandler() {
this.isShow = !this.isShow
}
},
template: `<div>
<!--<Vlife v-if="isShow"></Vlife>-->
<keep-alive><Vlife v-if="isShow"></Vlife></keep-alive>
<button @click="clickHandler">改变组件的生死（beforeDestroy）</button>
</div>`
}; let app = new Vue({
el: '#app',
data: {},
template: ``,
// 挂子
components: {
App
}
})
</script>
</body>
</html>
vue学习（五）生命周期 的钩子函数的更多相关文章
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- Vue笔记：生命周期和钩子函数
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- Vue实例的生命周期（钩子函数）
Vue实例的生命钩子总共有10个 先上官方图: 下面时一个vue实例定义钩子函数的例子: var app=new Vue({ el:'#app', beforeCreate:function(){ c ...
- Vue 中的生命周期和钩子函数
生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
随机推荐
- jqGrid 多选复选框 编辑列 方法事件
参考:https://blog.csdn.net/zsq520520/article/details/53375284?locationNum=8&fps=1
- helm基本用法
一.helm命令 helm search #关键字搜索charts helm pull #压缩下载chart到本地,可以使用--untar下载解压) helm install #部署chart到kub ...
- Mac的Terminal中无法使用mvim解决方案
对于每个人来说,都会有特别喜欢的编辑器.对于很多热爱Unix/Linux的人来说,Vim/vi肯定是很熟悉的“编辑利器”了. 当然,对于Mac用户来说,肯定也不乏对Vim狂热的人.庆幸的是,Vim对M ...
- SpringBoot集成百度UEditor图片上传后直接访问404解决办法
SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下 ...
- Unity初识项目结构与面板
一.Unity的项目结构 Unity中的一个项目是有若干个场景组成的,每一个场景又是由若干个游戏对象组成的,每一个游戏对象身上有若干个组件,每一个组件有若干个属性. 项目——>场景——>游 ...
- List循环添加数据覆盖问题
问题:java开发时,当我们使用List.add();循环添加数据,有时会出现前面添加的数据会被后面覆盖的现象.这是怎么回事尼? 会覆盖数据的代码 package com.boot.test; imp ...
- Windows 10工程版本泄露全新设计的操作中心圆角样式
早些时候微软错误地向Windows 10所有测试通道推送内部工程版本,该版本构建后尚未经过微软内部测试. 当然本身微软也没准备推送所以该版本里很多新功能未被关闭,而成功升级的用户则可以立即查看这些功能 ...
- vs2010编译C++ 指向指针的指针
#include "stdafx.h" #include <iostream> using namespace std; int _tmain(int argc, _T ...
- XV6源代码阅读-同步机制
Exercise1 源代码阅读 锁部分:spinlock.h/spinlock.c以及相关其他文件代码 // Mutual exclusion lock. struct spinlock { uint ...
- 060、Java中定义有返回值有参数的方法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...