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退出),如下图 ...
随机推荐
- 格式化JSON插件
参考:https://www.cnblogs.com/whycxb/p/7126116.html
- LinkedList学习：API调用、栈、队列实现
参考的博客 Java 集合系列05之 LinkedList详细介绍(源码解析)和使用示例 如果你想详细的区了解容器知识以及本文讲的LinkedList,我推荐你去看这篇博客和这个做个的容器系列 Lin ...
- Linux 创建网卡子接口
创建网卡子接口,添加IP别名 ifconfig eth0:0 2.2.2.2/24 或 ip addr add 2.2.2.2/24 dev eth0 label eth0:0 清除网卡子接口,删除 ...
- 「JLOI2014」聪明的燕姿
传送门 Luogu 解题思路 很容易想到直接构造合法的数,但是这显然是会T飞的. 我们需要考虑这样一件事: 对于一个数 \(n\),对其进行质因数分解: \[n=\sum_{i=1}^x p_i^{c ...
- 车林通购车之家--购车计算器模块js实现
//jsq-nav.twig <ul class="switch-nav db-tags bgfff clearfix"> <li id="qk&quo ...
- java 解析json格式数据（转）
2012-07-30 16:43:54| 分类: java | 标签:java json |举报|字号 订阅 有时候我们可能会用到json格式的数据进行数据的传输,那么我们怎么把接收到 ...
- Day10：关于桃子的和关于游戏新的设想（顺手做个记录孩子吃喝拉撒的工具）
公历2015年6月3日~ 北京时间晚上8:42~ 在美中宜和~ 一个叫桃子的小美女出生了! 没错!小桃子终于出生了!真心不容易啊! 6月3日 03:00 AM 老婆推我,叫我起来,她说她肚子疼,还想上 ...
- 005-PHP函数输出一行内容
<?php function printBold($inputText) //定义function printBold() { print("<B>" . $in ...
- apk安装失败的25中原因
名称 Value 描述 INSTALL_FAILED_ALREADY_EXISTS -1 已经安装 INSTALL_FAILED_INVALID_APK -2 APK文件是无效的 INSTALL_FA ...
- GAN网络进行图片增强
GAN网络进行图片增强 基于Tensorflow框架 调用ModifyPictureSize.py文件 代码如下: from skimage import io,transform,color imp ...