敲出来的真理-vue之生命周期事件含(单页面 组件 )

2024-02-21 17:58
文章标签 javascript 组件 vue 页面 事件 frontend 生命周期 出来 真理

本文主要是介绍敲出来的真理-vue之生命周期事件含(单页面 组件 )，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

虽然官网给的名字叫"生命周期钩子"，但是我还是更加熟悉"生命周期事件"，不然总感觉是在学习新概念。

Vue 实例生命周期

包含内容

main.js 初始化 > App.vue > 路由 第一页面 diy.vue > diy.vue 组件 MyHelloWorld.vue 

代码如下 

 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'   //引用 element-ui 样式Vue.use(ElementUI)
Vue.config.productionTip = falsenew Vue({router,store,// render: h => h(App)render: function (createElement) {console.group("main.js render 渲染");console.log("this.$el:" + JSON.stringify(this.$el));console.log("this.$data:" + JSON.stringify(this.$data));console.groupEnd();return createElement(App);}
}).$mount('#app')

APP.vue 

<template><div id="app"><h1><div id="nav">菜单:<router-link to="/">Home</router-link> |<router-link to="/about">About</router-link>|<router-link to="/elm/layout">Layout</router-link>|<router-link to="/elm/Container">Container</router-link>|<router-link to="/Login">Login</router-link>|<router-link to="/test/diy">diy</router-link>|</div></h1><router-view /></div>
</template>
<script>
import { defineComponent } from "@vue/composition-api";export default defineComponent({setup() {},beforeCreate: function () {console.group("App.vue beforeCreate 创建前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},created: function () {console.group("App.vue created 创建结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},beforeMount: function () {console.group("App.vue beforeMount 挂载前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},mounted: function () {console.group("App.vue mounted 挂载结束");console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));console.groupEnd();},beforeUpdate: function () {console.group("App.vue beforeUpdate 数据更新前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},updated: function () {console.group("App.vue updated 数据更新结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},beforeDestroy: function () {console.group("App.vue beforeDestroy 销毁前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},destroyed: function () {console.group("App.vue destroyed 销毁结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}#nav {padding: 30px;
}#nav a {font-weight: bold;color: #2c3e50;
}#nav a.router-link-exact-active {color: #42b983;
}
</style>

 diy.vue

<template><div><h1>{{ msg }}</h1><hr /><MyHelloWorld msg="模块 MHelloWorld.vue  Hello World！"></MyHelloWorld></div>
</template>
<script>
import MyHelloWorld from "../../components/MyHelloWorld.vue";export default {data() {return {msg: "页面 diy.vue Hello World！",};},beforeCreate: function () {console.group("diy.vue beforeCreate 创建前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},created: function () {console.group("diy.vue created 创建结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},beforeMount: function () {console.group("diy.vue beforeMount 挂载前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},mounted: function () {console.group("diy.vue mounted 挂载结束");console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));console.groupEnd();},beforeUpdate: function () {console.group("diy.vue beforeUpdate 数据更新前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},updated: function () {console.group("diy.vue updated 数据更新结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},beforeDestroy: function () {console.group("diy.vue beforeDestroy 销毁前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},destroyed: function () {console.group("diy.vue destroyed 销毁结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},components: {MyHelloWorld,},
};
</script>

 MyHelloWorld.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: "MyHelloWorld",props: {msg: String,},beforeCreate: function () {console.group("MyHelloWorld.vue模块 beforeCreate 创建前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},created: function () {console.group("MyHelloWorld.vue模块 created 创建结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},beforeMount: function () {console.group("MyHelloWorld.vue模块 beforeMount 挂载前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},mounted: function () {console.group("MyHelloWorld.vue模块 mounted 挂载结束");console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));console.groupEnd();},beforeUpdate: function () {console.group("MyHelloWorld.vue模块 beforeUpdate 数据更新前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},updated: function () {console.group("MyHelloWorld.vue模块 updated 数据更新结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},beforeDestroy: function () {console.group("MyHelloWorld.vue模块 beforeDestroy 销毁前");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},destroyed: function () {console.group("MyHelloWorld.vue模块 destroyed 销毁结束");try {console.log("this.$el.innerText:" + JSON.stringify(this.$el.innerText));console.log("this.$data:" + JSON.stringify(this.$data));console.log("this.msg:" + JSON.stringify(this.msg));} catch (error) {}console.groupEnd();},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

 

这篇关于敲出来的真理-vue之生命周期事件含(单页面 组件 )的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/732605。

相关文章

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步：OData实例创建1.1 OData.newInstance() 详细分析1.1.1
阅读更多...
从入门到精通详解LangChain加载HTML内容的全攻略

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言：当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二
阅读更多...
一文详解如何使用Java获取PDF页面信息

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸（宽高）四、获取页面旋转角度五、判断
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2