和 SFC 的 <template> 什么关系？

同一个东西：SFC 在构建时把 template 编译成渲染函数。

能用 #id 选择器吗？

可以：template: '#my-tpl' 指向页面里的 <script type="text/x-template">。

使用 vue.global.js（非 runtime-only）即可，本页示例就走这条路。

最后更新：2026-10-22

template 选项为组件指定 HTML 模板字符串：运行时编译成渲染函数（完整版 Vue 支持，构建版通常写在 SFC 文件里）。

export default {
  template: "<p>{{ msg }}</p>",
  data() { return { msg: "hi" } }
}

value	HTML 字符串（或指向模板的 #id 选择器）

返回值：无返回值

修改下面的代码，在预览区实时查看效果：

输出：

显示加粗的「来自 template 选项：hello」。

ℹ️ 说明 只在使用完整版 Vue（含编译器）时可用；npm 构建的运行时版需用 SFC 或 render 函数。

💡 提示 长模板用反引号多行字符串或单独的