Vue3基础:挂载事例方法.mount()是什么?根组件模板又是什么?

.mount()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 演示</title>
</head>
<body>
    <!-- 这里是我们将要挂载 Vue 应用的地方 -->
    <div id="app"></div>

    <!-- 引入 Vue 3-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <!-- 引入我们的 Vue 3 应用代码 -->
    <script src="app.js"></script>
</body>
</html>

  • app.js
// 创建一个 Vue 应用实例
const app = Vue.createApp({
    data() {
        return {
            message: "Hello, Vue 3!"
        }
    }
})

// 使用 .mount() 方法将应用挂载到 id 为 'app' 的元素上
app.mount('#app')

当我们在学习.mount() 方法时,你可以将其类比为将一张照片贴在画框上的过程。让我以这个类比来解释 .mount() 方法:
画框就是你的网页:想象你的网页就像一张空白的画框,这个画框是你的网页中的一个特定区域,比如一个空白的白板。
照片就是你的 Vue 应用:现在,你有一张精美的照片,这个照片就是你的 Vue 应用,包括所有的交互和展示内容。
贴照片到画框上:但是,这张照片不会自己显示在画框上,你需要手动将它贴到画框上。这个过程就是 .mount() 方法的作用。你告诉 Vue:“请把我的 Vue 应用(照片)贴在这个特定的网页区域(画框)上。”
实际上,.mount() 方法的参数是一个指向网页中特定区域的标识,可以是一个 DOM 元素或一个 CSS 选择器。Vue 应用会在这个特定区域内渲染并展示内容,就像把照片放在画框里一样。
所以,当你调用 .mount(‘#app’) 时,你就是在告诉 Vue:“请将我的 Vue 应用贴在 id 为 ‘app’ 的 HTML 元素上,让它在那里显示出来。”这样,你的 Vue 应用就会出现在网页上,用户可以与之交互,就像看到了一张精美的照片在画框上一样。

根组件模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>
<body>
  <!-- 这里是你的根组件模板 -->
  <div id="app">
    <button @click="count++">{{ count }}</button>
  </div>

  <!-- 引入 Vue 库 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>
  <script>
    // 创建 Vue 应用实例
    const app = Vue.createApp({
      data() {
        return {
          count: 0
        }
      }
    })

    // 将应用实例挂载到网页上的 #app 元素
    app.mount('#app')
  </script>
</body>
</html>

想象你有一张空白的纸,这张纸就像是你的网页,上面什么都没有。你想在这张纸上画一幅图,这幅图就是你的 Vue 应用。但是,你不知道怎么画,所以你决定在纸上勾勒出大致的轮廓,作为画的指南。

纸就是你的网页:这张空白的纸代表了你的网页,里面什么内容都没有。

画的轮廓就是根组件模板:在纸上勾勒出的轮廓就是你的 Vue 根组件的模板。这个模板告诉 Vue 应用在网页上的哪个位置应该显示什么内容,但它本身并没有真正的内容,就像画的轮廓并没有真正的颜色和细节。

所以,“DOM 中的根组件模板” 就是你在网页中直接写下的一些 HTML 结构,它们充当了 Vue 应用的模板,但不包含具体的数据或交互。这种方式适用于一些简单的应用,因为你可以在网页中直接定义模板,而不必依赖额外的 Vue 文件或构建步骤。Vue 会根据这些模板来渲染应用的内容,就像根据轮廓来填充画作的颜色和细节一样。

你可能感兴趣的:(vue,前端技术,编程工具,vue.js,前端,javascript)