Vue 中的声明周期函数
时间:2019-09-16
本文章向大家介绍Vue 中的声明周期函数,主要包括Vue 中的声明周期函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../vue.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <style type="text/css"> 9 v-cloak{ 10 display: none; 11 } 12 </style> 13 <body> 14 <div id="app"> 15 <input type="button" value="改变" @click="msg = 'No'"> 16 <h3 id="h3">{{ msg }}</h3> 17 </div> 18 <script type="text/javascript"> 19 var vm = new Vue({ 20 el: "#app", 21 data: { 22 msg: "ok" 23 }, 24 methods: { 25 show() { 26 console.log("执行了show方法"); 27 } 28 }, 29 beforeCreate() { //表示实例被完全创建出来之前,会执行它. 30 // console.log(this.msg); 31 // this.show(); 32 // 注意:在beforeCreate生命周期函数执行的时候, data 和 methods 中的数据都还没有被初始化 33 }, 34 created() { 35 // console.log(this.msg); 36 // this.show(); 37 //在 created 中, data 和 methods 都已经被初始化好了 38 //如果调用 methods 中的方法,或者操作 data 中的数据 ,最早,只能在 created 中 操作 39 }, 40 beforeMount() { //表示模板已经在内存中编译完成,但是尚未把模板渲染成HTML页面 41 // var a = document.getElementById("h3").innerText; 42 // console.log(a); 43 // 在beforeMount执行的时候,页面中的元素还没有被真正的替换过来,只是之前写的模板字符串 44 }, 45 mounted(){//表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了 46 // var a = document.getElementById("h3").innerText; 47 // console.log(a); 48 // 注意:mounted 是 实例创建期间执行的最后一个生命周期函数,当执行完 mounted 就表示,实例 49 //被完全创建好了,此时,如果没有其他操作的话,这个实例 ,就静静的 躺在我们内存中 50 }, 51 52 53 54 //接下来是运行中的两个事件 55 beforeUpdate(){//这时候表示我们的界面还没有被修改 56 // var a = document.getElementById("h3").innerText; 57 // console.log("页面上" + a); 58 // console.log("data中" + this.msg); 59 //得出结论:当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时, data 数据是 最新的,页面尚未和 最新的数据保持同步 60 }, 61 updated(){ 62 var a = document.getElementById("h3").innerText; 63 console.log("页面上" + a); 64 console.log("data中" + this.msg); 65 //updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的 66 } 67 68 }) 69 </script> 70 </body> 71 </html>
原文地址:https://www.cnblogs.com/yanghaoyu0624/p/11520561.html
- 洛谷P2147 [SDOI2008]Cave 洞穴勘测
- linux基础
- 洛谷P3178 [HAOI2015]树上操作
- Numpy 修炼之道 (6)—— 复制和视图
- 事务日志已满,原因为“ACTIVE_TRANSACTION”
- 【 关关的刷题日记46】Leetcode 28. Implement strStr()
- Python的机器学习库之Sklearn快速入门1.基本概述2.入门实践3.部分结果
- 再论 ASP.NET 中获取客户端IP地址
- 洛谷P3038 [USACO11DEC]牧草种植Grass Planting
- 【 关关的刷题日记47】Leetcode 38. Count and Say
- 《Python自然语言处理》答案第一、二章
- 【 关关的刷题日记49】 Leetcode 434. Number of Segments in a String
- 自然语言处理构建文本向量空间1.百科2.源代码3.参考:
- 小爬虫之爬取豆瓣电影排行榜1.技术路线2.任务3.分析4.运行结果5.源码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux tomcat配置https的方法
- Linux 中firewall的使用方法总结
- CentOS 7 安装vsftpd 服务器的具体操作步骤
- 详细介绍通过配置Apache实现404页面替换
- bug分支和feature分支_动力节点Java学院整理
- Linux下Python脚本自启动与定时任务详解
- Linux服务器tomact 8.0启动慢的完美解决方法
- vim学习高级技巧之序列的生成方法详解
- 【LoRa社区网关点亮活动】基于腾讯云IoT Explorer搭建开放的LoRaWAN网络
- 面试官:说一下List排序方法
- GWAS全基因组关联分析流程(BWA+samtools+gatk+Plink+Admixture+Tassel)
- linux中ipset命令的使用方法详解
- VirtualBox 未指定要bridged的网络界面的解决办法
- Vim中宏命令的使用实例详解
- 在CentOS搭建Git服务器的详细步骤