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份