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

相关文章

Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
关于Maven生命周期相关命令演示

关于Maven生命周期相关命令演示

《关于Maven生命周期相关命令演示》Maven的生命周期分为Clean、Default和Site三个主要阶段,每个阶段包含多个关键步骤,如清理、编译、测试、打包等,通过执行相应的Maven命令,可以... 目录1. Maven 生命周期概述1.1 Clean Lifecycle1.2 Default Li
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
基于Qt Qml实现时间轴组件

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用
阅读更多...
使用JavaScript将PDF页面中的标注扁平化的操作指南

使用JavaScript将PDF页面中的标注扁平化的操作指南

《使用JavaScript将PDF页面中的标注扁平化的操作指南》扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,DynamsoftDocumentViewer... 目录使用Dynamsoft Document Viewer打开一个PDF文件并启用标注添加功能扁平化
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
SpringBoot如何访问jsp页面

SpringBoot如何访问jsp页面

《SpringBoot如何访问jsp页面》本文介绍了如何在SpringBoot项目中进行Web开发,包括创建项目、配置文件、添加依赖、控制层修改、测试效果以及在IDEA中进行配置的详细步骤... 目录SpringBoot如何访问JSP页python面简介实现步骤1. 首先创建的项目一定要是web项目2. 在
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2