Vue 页面加载完成后执行代码：使用 mounted 生命周期钩子

<template>
  <div>
    页面内容
  </div>
</template>
<script>
export default {
  mounted() {
    console.log('页面加载完毕');
    // 在这里执行你的代码
  }
}
</script>
<h2>使用 <code>mounted</code> 生命周期钩子判断页面加载完成</h2>
<p>在 Vue.js 中，我们可以使用 <code>mounted</code> 生命周期钩子来判断页面加载完成并执行代码。<code>mounted</code> 钩子会在组件挂载后被调用，这意味着组件已经被渲染到页面上，并且可以访问到 DOM 元素。</p>
<p><strong>示例：</strong></p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div&gt;
    页面内容
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  mounted() {
    console.log('页面加载完毕');
    // 在这里执行你的代码
  }
}
&lt;/script&gt;
</code></pre>
<p><strong>解释：</strong></p>
<ol>
<li>在 <code>mounted</code> 钩子函数中，我们可以使用 <code>console.log</code> 打印日志来确认页面加载完成。</li>
<li>我们可以在 <code>mounted</code> 钩子函数中执行任何需要在页面加载完成后执行的代码，例如获取 DOM 元素、发送网络请求等。</li>
</ol>
<p><strong>注意：</strong></p>
<ul>
<li>确保你的代码是在 <code>mounted</code> 钩子函数中执行的，而不是在 <code>created</code> 钩子函数中，因为 <code>created</code> 钩子函数是在组件创建后被调用，而此时 DOM 元素还没有被渲染到页面上。</li>
<li>如果你需要在页面加载完成之前执行某些代码，可以使用 <code>created</code> 生命周期钩子。</li>
</ul>
<h2>总结</h2>
<p><code>mounted</code> 生命周期钩子是 Vue.js 中一个非常重要的功能，它允许我们在页面加载完成后执行代码，这在很多场景下都非常有用。</p>