Vue 模板

模板Vue 中的部分就是我们所说的 Vue 应用程序的 HTML 部分。

这个<模板>标签稍后将在 *.vue 文件中使用，以更好的方式构建我们的代码。

可以使用模板作为Vue实例中的配置选项，并将HTML代码放入其中。

Vue 模板

让我们看一个使用“模板”作为配置选项的示例。这是一个简单的示例，我们刚刚将 HTML 部分移至配置选项“模板”中：

示例

来自内部的 HTML 内容<div id="app">被移至配置选项“template”，封装在反引号中`...`。我们可以在反引号内编写多行 HTML。

<div id="app"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:
`<h1>{{ message }}</h1>
<p>This is a second line of HTML code, inside backtick quotes</p>`,
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>

亲自试一试 »

单文件组件 (SFC)

正如您在上面的代码示例中所看到的，我们的 Vue 应用程序的 HTML 部分也可以收集在 Vue 实例内，但这并不能让您更轻松地在 HTML 文件中获得概览。

为了获得更好的概览，更轻松地处理更大的项目，并获得更好的开发环境，我们现在将转而在 SFC 或 *.vue 文件中编写 Vue 代码。

所有 *.vue 文件仅由三部分组成：

<template>HTML 内容在哪里。
<script>对于我们的 Vue 代码。
<style>我们在其中编写 CSS 样式。

但在我们的项目中使用 *.vue 文件之前，我们需要以不同的方式设置我们的计算机。本教程的下几页将对此进行解释。