(Vue)编程的前奏与高潮:揭秘created和mounted的神奇之旅

大家好,欢迎来到我的博客,今天我们要揭开编程世界里一对神秘的兄弟------created和mounted的神奇面纱。这两位兄弟是不相同的,他们分别在模板渲染前后登场,像是编程领域的前戏和高潮,让我们一起来看看它们到底有何不同。

1. Created:编程的前奏

首先,让我们来认识一下编程界的前奏大师------created。他就像是一位准备进入舞台的演员,在模板渲染成HTML之前 ,created登场啦!这个阶段通常是为了初始化一些属性值,就好像演员在化妆前把自己打扮得漂漂亮亮一样。

在created的世界里,你可以为你的变量们穿上漂亮的外衣,设定它们的初始状态,让它们在登场的时候一展风采。这就像是给你的程序一个开头,一个故事的开始,而这一切都发生在模板渲染成HTML之前。

2. Mounted:高潮登场

好了,前奏结束,接下来就是高潮------mounted的登场!在模板渲染成HTML之后,mounted露出了他独特的风采。这个阶段通常是在页面初始化完成后对HTML的DOM节点进行一些操作,就像是演员们在舞台上自由驰骋,展现出他们最棒的一面。

在mounted的世界里,你可以随心所欲地操控HTML的元素,为它们添加样式、交互效果,就像是导演在舞台上布置道具,调整演员的位置一样。这是一个展示你真正技能的时刻,而这一切都发生在模板已经变成HTML之后。

3. 对比之下

让我们来比较一下这两位兄弟,created和mounted。就像是编程版的前奏和高潮,它们各自有着独特的任务。

  • created 是舞台前的准备工作,负责初始化变量和属性,让一切准备就绪。
  • mounted 是高潮登场,负责在HTML已经就绪后对DOM节点进行操作,展示真正的技艺。

总的来说,created是为了让角色准备好,而mounted则是让角色在舞台上大显身手。两者合作默契,就像是编程中的一场精彩表演。

在实际应用中的用法

1. Created 阶段

created阶段,你可以进行一些初始化的工作,例如设置数据、发起网络请求等。

html 复制代码
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, created!'
    };
  },
  created() {
    // 在 created 阶段初始化数据或执行其他操作
    console.log('Component created');
    this.initializeData();
  },
  methods: {
    initializeData() {
      // 一些初始化操作
      // 例如,发起网络请求获取数据
      // this.$http.get('/api/data').then(response => { this.message = response.data; });
    }
  }
};
</script>

2. Mounted 阶段

mounted阶段,DOM已经渲染完成,你可以进行一些操作,比如修改DOM元素、使用第三方库初始化插件等。

html 复制代码
<template>
  <div>
    <p ref="myParagraph">This is a paragraph.</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在 mounted 阶段对 DOM 进行操作
    console.log('Component mounted');
    this.modifyDOM();
  },
  methods: {
    modifyDOM() {
      // 修改 DOM,例如为元素添加样式
      const paragraph = this.$refs.myParagraph;
      paragraph.style.color = 'blue';
    }
  }
};
</script>

这两个例子展示了在createdmounted阶段分别进行初始化和DOM操作的常见用法。请注意,这只是一个简单的演示,实际应用中大家可能会涉及更复杂的逻辑和操作。

结语

通过深入了解created的前奏和mounted的高潮,我们能够更有条理地处理程序的初始化和DOM操作,为代码创造更为优雅、高效的表现。

希望这篇博客能够帮助你更好地理解编程世界中created和mounted的角色与重要性。就像一场精彩的表演,每个阶段都有着独特的任务,为整个程序的舞台添上绚丽的色彩。

相关推荐
耶啵奶膘7 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理