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退出),如下图 ...
随机推荐
- 「NOIP2016」愤怒的小鸟
传送门 Luogu 解题思路 首先这个数据范围十分之小啊. 我们考虑预处理出所有可以带来贡献的抛物线 三点确定一条抛物线都会噻 然后把每条抛物线可以覆盖的点状压起来,然后状压DP随便转移就好了. 有一 ...
- centos 虚拟机安装调试
service network restart reboot yum update -y cd /etccd sysconfigcd network-scripts[root@u0mo5 networ ...
- 树莓派学习笔记——Restful服务 采用slim php apache
0.前言 前些时间沉迷于Restful,采用PHP+Slim+MySQL实现了一些简单的API函数.但是这些工作都是在windows中实现(采用wamp server集成安装包),但是转到li ...
- Servlet 3.0 新特性概述
Servlet 3.0 新特性概述 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若 ...
- 二 配置数据字典&异步查询客户
数据字典: 字典表和客户表的关系 配置字典表 配置客户表 Spring管理映射文件 1 字典表和客户表的关系 2 配置字典表 3 配置客户表 4 Spring管理映射文件 异步查询客户: 页面加载 ...
- C# 创建INI文件，写入并可读取。----转载
基于C#winform设计. 首先创建一个类,我命名为IniFiles.并引入命名空间using System.Runtime.InteropServices; 接着,声明API函数 [DllImpo ...
- 在ListView头和尾添加东西
直接上代码 import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view ...
- Windows上设置Sass
现在有很多信息在预处理器上浮动.大部分信息都面向Mac用户,所以在这篇文章中,我提供了一个非常简单的指南,帮助基于Windows的开发人员快速启动并运行Sass(我选择的预处理器). 本文是在此博客上 ...
- linux后台运行jar
1. 在linux服务器上运行Jar文件时通常的方法是: $ java -jar test.jar 这种方式当ssh窗口关闭时,程序中止运行,或者是运行时没法切出去执行其他任务 2. 保持程序后台运行 ...
- MQTT 协议学习：005-发布消息 与 对应报文 (PUBLISH、PUBACK、PUBREC、PUBREL)
背景 当有订阅者订阅了有关的主题以后,通过发布消息的消息的动作,可以让订阅者收到对应主题的消息. 根据不同的QoS 等级,通信的动作也略有不同. PUBLISH – 发布消息 报文 PUBLISH控制 ...