2024-09-05
一、什么是mounted方法?

1、生命周期钩子函数:Vue的生命周期钩子函数是在不同阶段执行的一系列回调函数。mounted方法是其中之一,它在Vue实例被挂载到真实的DOM元素后被调用。


2、挂载到DOM元素:当Vue实例被创建后,通过el属性指定的DOM元素会被Vue所管理。mounted方法表示Vue实例已经成功地与DOM元素进行了绑定。

二、mounted方法的执行时机

1、DOM元素渲染完成后:在Vue实例的生命周期中,mounted方法在beforeMount方法之后被调用。这意味着在mounted方法中可以安全地访问和操作DOM元素,因为此时DOM已经完全渲染。


2、仅触发一次:mounted方法只会在Vue实例的初始化过程中触发一次。一旦被调用,便表示Vue实例已经被完全加载并挂载到DOM元素上。


‌在PyCharm中复制过来的Vue.js插件是可以使用的,包括进行调试。‌


<template>


<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

</template>


:gutter="20" 间隔
:span="6" 一行分为24份  该代码占6份