7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）

1、Vue实例

new Vue()创建一个Vue实例
所有的组件其实都是Vue实例

2、Vue实例的生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程

初始化过程
`created()`	组件初始化完成，比较常用
`mounted()`	模板已经创建，比较常用
`updated()`	模板数据更新
`destoryed()`	实例销毁

3、生命周期钩子的作用

页面加载的时候，主动执行某些程序，提前加载获取数据显示到页面

4、通过计时器，模拟一个ajax异步加载数据（`created`）

<template><div id="app"><div v-if="loading"><h1>异步加载数据正在进行中...</h1></div><div v-if="!loading"><h1>异步加载数据完成！</h1><ul v-for="(value, index) of userList" :key="index"><li>{{ value }}</li></ul></div></div>
</template><script>
export default {// 1、初始化数据created() {console.log("这是created函数的内容");this.getUserList();this.loading = false;},// 2、模板加载mounted() {console.log("这是mounted函数的内容");},data() {return {userList: [],loading: true,};},methods: {getUserList() {// 3、通过计时器，模拟一个ajax异步加载数据setTimeout(() => {this.userList = ["jasmine", "jamsine_qiqi", "qiqi"];}, 3000);},},
};
</script><style></style>

7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）相关推荐

python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...
Vue实例和生命周期
创建一个Vue实例每个Vue应用都是通过Vue函数创建一个新的Vue实例开始: var vm = new Vue({//选项 }) 数据与方法当一个Vue实例被创建时,它向Vue的响应式系统中加入 ...
第五节：轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...
Vue实例和生命周期 1
创建一个Vue实例每个Vue应用都是通过Vue函数创建一个新的Vue实例开始: var vm = new Vue({//选项 }) 数据与方法当一个Vue实例被创建时,它向Vue的响应式系统中加入 ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
vue实例的生命周期详解
Vue实例的生命周期简介此篇文章说的是最简单的单个VUE组件的生命周期. 官网中的长图诠释了Vue实例从创建,运行到销毁的整个过程.从vue实例的创建,运行,销毁期间,总是伴随着各种各样的事件,这 ...
vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue ...
Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...

7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）

1、Vue实例

2、Vue实例的生命周期钩子

3、生命周期钩子的作用

4、通过计时器，模拟一个ajax异步加载数据（`created`）

7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）相关推荐

最新文章

热门文章

7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）

1、Vue实例

2、Vue实例的生命周期钩子

3、生命周期钩子的作用

4、通过计时器，模拟一个ajax异步加载数据（created）

7、Vue实例的生命周期钩子（created、mounted、updated、destoryed）相关推荐

最新文章

热门文章

4、通过计时器，模拟一个ajax异步加载数据（`created`）