敲出来的真理-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。

相关文章

Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
C#如何动态创建Label,及动态label事件

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》：本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点：switch中的生成我们的label事件接着，
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2