<!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/vue@3.2.7"></script>
<!-- 引入我们的 Vue 3 应用代码 -->
<script src="app.js"></script>
</body>
</html>
// 创建一个 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/vue@3.2.29/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 会根据这些模板来渲染应用的内容，就像根据轮廓来填充画作的颜色和细节一样。