Vue系列之 => 钩子函数生命周期
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib//Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head> <body>
<div id="app">
<input type="button" value="修改msg数据" class="btn btn-primary" @click="changemsg">
<h3 id="title">{{ msg }}</h3>
</div> <script>
//创建vue实例
var vm = new Vue({
el : "#app",
data : {
msg : "ok"
},
methods : {
show(){
console.log("执行了show方法");
},
changemsg(){
this.msg = "No"
}
},
beforeCreate() { //这是遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它。
// console.log(this.msg); undefined 说明此时未拿到data数据
// this.show() 报错 此时methods未被初始化
//结论，在beforeCreate生命周期函数执行的时候，data和methods中的数据都没有被初始化
},
created(){ //这是遇到的第二个生命周期函数
console.log(this.msg);
this.show();
//如果要调用methods中的方法或操作data中的数据，最早只能在created中去操作。
},
beforeMount(){ //这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成了，但是尚未挂载到页面
console.log(document.getElementById("title").innerText); //{{ msg }}
//在beforeMount执行的时候，页面中的元素还没有被渲染出来，只是之前写的模板字符串
},
mounted(){ //这是遇到的第4个生命周期函数，表示内存中的模板已经挂载页面中。
console.log(document.getElementById("title").innerText); //ok
//注意：mounted是 《实例创建期间》 的最后一个生命周期函数，当执行完mounted就表示
//实例已经被完全创建好了，此时，如果没有后续操作，这个实例就在内存中。
}, //接下来是运行中的两个事件
beforeUpdate(){ //这时候，表示数据在被更新的时候界面还没有被更新，数据已经被更新了。
//console.log("界面上元素的内容是:" + document.getElementById("title").innerText);//ok
//console.log("data中的msg数据是：" + this.msg); //no
//当执行berforeUpdate的时候，页面中显示的数据还是旧数据，此时data数据中的数据是最新的，页面尚未和data的数据同步。
},
updated(){
console.log("界面上元素的内容是:" + document.getElementById("title").innerText);//no
console.log("data中的msg数据是：" + this.msg); //no
//updated 事件执行的时候，页面和data数据已经保持同步了，都是最新的。
}
//当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段;
//当执行beforeDestroy的时候，实例身上所有的data和所有的methods以及过滤器，指令。。等处于可用的状态，此时，还没有真正执行销毁的过程
//当执行destroyed 钩子函数的时候，组件已经完全被销毁，所有的数据都不可用。
})
</script>
</body> </html>
Vue系列之 => 钩子函数生命周期的更多相关文章
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- 【vue】钩子函数生命周期
图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html https://segmentfault.com ...
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- React 函数生命周期
React 函数生命周期基础 1 ,概念 在组件创建.到加载到页面上运行.以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为组件的生命周期:* 2,组件生命周 ...
- vue学习（五）生命周期 的钩子函数
生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- Vue入门系列（五）Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
随机推荐
- Win10系统桌面右键新建没有内容怎么恢复
Win10系统桌面右键新建没有内容怎么恢复 添加txt文本文档 运行->regedit,打开注册表编辑器 展开HKEY_CLASSES_ROOT 找到.txt 选中.txt,修改右侧窗格的“默认 ...
- unittest框架assert断言
Pthon内部自带了一个单元测试的模块,\ pyUnit也就是:unittest 先介绍下unittest的基本使用方法: 1.import unittest2.定义一个继承自unittest.Tes ...
- 10种linux下磁盘快照方式恢复系统
导读 大家都知道windows系统有一个磁盘快照的功能,在windows2003中系统恢复开始依赖于一个叫做硬盘快照服务(Volume Snapshot Service)的服务,他能够自动创建系统快照 ...
- 【WebDriver】WebDriver 常用操作
WebDriver 常用操作 1 浏览器操作 2 窗口和弹框操作 3 cookies 操作 4 简单对象的定位 5 页面元素操作 6 鼠标事件 7 键盘事件 1 浏览器操作 #属性: driver.c ...
- JS中函数表达式与函数声明的区别
hello,沐晴又来更新啦,今天呢,跟大家讲讲让人头疼的函数表达式和函数声明,反正我当初看那本高级程序的时候,是没怎么看太透,哈哈.我是个比较重基础的人,跟我一起探讨函数表达式和函数声明的世界吧. 首 ...
- 【剑指offer】复杂链表的复制
一.题目: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用, ...
- 根据设备宽高设置View的大小
得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...
- 【设计模式】用追MM来解释23种设计模式，转
创建型模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德基 ...
- vue的图片路径，和背景图片路径打包后错误解决
最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...
- SEO--网站流量提升
话术设置,提炼优质的话术 关键词的挖掘 1.头脑风暴 (开晨会,一堆人坐在一起聊.) 2.利用搜索引擎相关搜索(将关键词设置为搜索热词,利用工具:百度指数,查看关键词) 3.工具 4.长尾关键词(词比 ...