Vue.js createApp({}).mount(‘#app’) 清空 Vue3 中 #app 的子元素

Vue.js createApp({}).mount(‘#app’) 清空 Vue3 中 #app 的子元素

在本文中,我们将介绍在 Vue.js 3 中使用 createApp({}).mount(‘#app’) 方法时,如何清空 #app 元素的子元素。

阅读更多:Vue.js 教程

什么是 createApp({}).mount(‘#app’) 方法?

在 Vue.js 3 中,createApp({}) 是一个用来创建 Vue 应用程序实例的方法。我们可以将组件、指令和插件等注册到 createApp({}) 中,然后使用 mount(‘#app’) 方法将应用程序实例挂载到特定的元素上。

例如,我们可以先创建一个 Vue 应用程序实例,然后将它挂载到 id 为 “app” 的元素上:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `
})

app.mount('#app')
JavaScript

在上面的例子中,message 属性的值将会在页面上渲染出来,显示为 “Hello, Vue!”。

清空 #app 元素的子元素

在 Vue.js 3 中,默认情况下,使用 createApp({}).mount(‘#app’) 方法时,如果挂载的元素已经存在子元素,Vue 会将这些子元素从 DOM 中移除。这种行为是为了确保 Vue 能完全控制挂载的元素。

例如,假设我们有以下 HTML 结构:

<div id="app">
  <h1>Hello, Vue!</h1>
</div>
HTML

当我们执行以下代码时:

const app = Vue.createApp({
  template: `
    <div>
      <h2>New Content</h2>
    </div>
  `
})

app.mount('#app')
JavaScript

Vue 将会清空 #app 元素的子元素,然后将新的模板内容渲染进去。在这个例子中,最终渲染出来的 HTML 结构将是:

<div id="app">
  <h2>New Content</h2>
</div>
HTML

如何保留 #app 元素的子元素

如果我们想要在使用 createApp({}).mount(‘#app’) 方法时保留 #app 元素的子元素,即不清空原有内容,可以在挂载之前先将原有子元素保存到一个变量中,然后在挂载完成后再将子元素放回。

以下是一个示例代码:

const app = Vue.createApp({
  template: `
    <div>
      <h2>New Content</h2>
    </div>
  `
})

// 保存原有子元素
const appContainer = document.querySelector('#app')
const originalChildren = Array.from(appContainer.children)

// 挂载应用程序实例
app.mount('#app')

// 在挂载完成后将原有子元素放回
originalChildren.forEach(child => {
  appContainer.appendChild(child)
})
JavaScript

在上面的代码中,我们首先获取到 #app 元素与其子元素。然后,在调用 app.mount(‘#app’) 方法之前,我们将子元素保存到 originalChildren 数组中。接着,我们执行 app.mount(‘#app’),让 Vue 渲染新的模板内容。最后,我们遍历 originalChildren 数组,将子元素逐个放回到 #app 元素中。

这样,我们就能够保留 #app 元素原有的子元素,同时在渲染新内容。最终的效果是原有子元素和新内容同时存在于 #app 元素中。

总结

在 Vue.js 3 中,使用 createApp({}).mount(‘#app’) 方法时,默认会清空 #app 元素的子元素。如果我们希望保留原有子元素并渲染新内容,可以在挂载之前将原有子元素保存到变量中,然后在挂载完成后将其放回。

希望本文对你理解 Vue.js 3 中的 createApp({}).mount(‘#app’) 方法有所帮助!

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

VueJS 精品教程

登录

注册