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退出),如下图 ...
随机推荐
- 多个span标签在同一行显示
属性设置为display:inline或display:inline-block
- 《Redis深度历险：核心原理和应用实践》千帆竞发——分布式锁
- logj4.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE log4j:configuration PU ...
- 关于Tomcat部署项目的点点滴滴
在给客户部署环境时,我们不可能想开发一样,在编辑软件部署一下tomcat就可以正常运行.我们也应该清楚java的运行机制**“先编译,后解释”**的原则.(如下图)![图片描述][1]那么在Tomca ...
- Matplotlib 多个图形
章节 Matplotlib 安装 Matplotlib 入门 Matplotlib 基本概念 Matplotlib 图形绘制 Matplotlib 多个图形 Matplotlib 其他类型图形 Mat ...
- （实例）Linux 内核添加exfat驱动
背景: 由于exfat是常用的文件系统格式,而Linux由于版权的问题,没有在官方中添加有关的驱动. 但是 微软也同意开源了,所以比较新的 Linux 会支持这一块. 为了支持exfat的驱动,我们需 ...
- SpringCloud实战——（1）创建SpringCloud项目
首先创建一个SpirngCloud工程,并添加公用依赖. <?xml version="1.0" encoding="UTF-8"?> <pr ...
- HTML速写
1. E 代表HTML标签. 2. E#id 代表id属性. 3. E.class 代表class属性. 4. E[attr=foo] 代表某一个特定属性. 5. E{foo} 代表标签包含的内容是f ...
- input type="submit" 和"button"有什么区别
HTML中<input type="submit" /> 和 <input type="button" /> 主要从元素定义类型.点击触 ...
- JDK8~JDK11的新特性
#JDK 1.8 新特性接口中的静态方法 只能由接口自己调用 接口中的默认方法 可以不被覆盖 #JDK 1.9 新特性(可能在JDK8中被忽略了,没来得及加)接口可以定义私有方法,但是只能让自己调用, ...