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退出),如下图 ...
随机推荐
- C语言书籍入门---第三章
=======变量和数据类型========= 说 明:字符型 短整型 整型 长整型 单精度浮点型 双精度浮点型 无类型 数据类型:char short int long float d ...
- 插入和查询HBase速度都比较慢
表层问题:插入和查询HBase速度比较慢 排查一,查看HBase节点状态,发现正常运行: 排查二,查看访问HBase服务的状态,发现服务停止: 依次点击服务实例,查看服务状态 133和135节点上的服 ...
- Vue 集成easyUI
原 Vue 集成easyUI https://blog.csdn.net/m0_37948170/article/details/84960320 参考vue官网用cli创建了Vue项目之后: n ...
- spring mvc ,spring boot 整合swagger
https://blog.csdn.net/qq_35992900/article/details/81274436
- CSP-S 2019 复赛游记
自闭游记 >_< Day 0 随便敲了一些板子 当然打了摆. 奶人的话写满了俩黑板啊,没人奶我可海星. 晚上没怎么打摆,随便敲了几道板子,然后很早就回去睡了. Day 1 平静地出发了.. ...
- vue-i18n突然所有的都解析不出来了
因为浏览器cookie缓存的语言标志与代码中不一致
- Matplotlib 入门
章节 Matplotlib 安装 Matplotlib 入门 Matplotlib 基本概念 Matplotlib 图形绘制 Matplotlib 多个图形 Matplotlib 其他类型图形 Mat ...
- CSP-J/S2019试题选做
S D1T2 括号树 设\(f[u]\)表示根到\(u\)的路径上有多少子串是合法括号串.(即题目里的\(k_u\),此变量名缺乏个性,故换之) 从根向每个节点dfs,容易求出\(c[u]\):表示从 ...
- Ternsorflow 学习：003-MNIST入门有关概念
前言 当我们开始学习编程的时候,第一件事往往是学习打印"HelloWorld".就好比编 程入门有 HelloWorld,机器学习入门有 MNIST. MNIST 是一个入门级的计 ...
- yum出现Error downloading packages错误
yum出现Error downloading packages错误错误表现方式:yum可以list,可以clean cache,但是无法安装,错误提示: Downloading packages: E ...