本篇文章记录下今天看传智”vue的生命周期函数”视频的操作笔记：
代码：
<html> <header> <title></title> <script src="vue-2.4.0.js"></script> <link rel="stylesheet" href="bootstrap-3.3.7.css" /> </header> <body> <div id="app"> <input type="button" value="Update" @click="msg='No'"> <h3 id="h3">{
{
msg }}</h3> </div> <script> var vm=new Vue({
el:'#app', data:{
msg:'ok' }, methods:{
show(){
console.log('执行了show方法'); } }, // ------------------ 实例初始化加载阶段，四个事件 ------------------- beforeCreate(){
//这是我们遇到的第一个生命周期函数，表示示例完全被创建出来之前，会执行它 //console.log(this.msg); undefined //this.show(); undefin is not defined // 注意: 在beforeCreate生命周期执行的时候，data和method中的数据都还没有初始化 }, created(){
//这是遇到的第二个生命周期函数 // 注意: 在create中，data和methods都已经被初始化好了 console.log(this.msg); this.show(); }, beforeMount(){
//这是遇到的第三个生命周期函数，表示模版已经在内存中编辑完成了，但是尚未把模版渲染到页面中 console.log(document.getElementById("h3").innerText); //{
{ msg }} // 注意: 在beforeMount执行的时候，页面中的元素，还没有真正被替换过来，只是之前写的一些模版字符串 }, mounted(){
//这是遇到的第四个生命周期函数，表示内存中的模版已经真实的挂载在页面中，用户已经可以看到渲染好的页面了 console.log(document.getElementById("h3").innerText); // ok // 注意: mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就算加载完毕了 }, // ------------------ 接下来是运行中的两个事件 ----------------------- beforeUpdate(){
//这时候，表示我们的界面还没有被更新 console.log(document.getElementById("h3").innerText); // ok console.log(this.msg); // no // 注意: 当执行beforeUpdate时，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新数据保持同步 }, updated(){
console.log(document.getElementById("h3").innerText); // no console.log(this.msg); // no // 注意: updated 事件执行时，页面和data数据已经保持同步了，都是最新的 } }); </script> </body> </html> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/177521.html原文链接：https://javaforall.net
