Vue.js中的DOM模板到底是什么？
我在Vue文档中找不到Dom template的确切定义，但我在几个地方看到了它，比如这里：https://v3.vuejs.org/style-guide/#self-closing-components-strongly-recommended
那么什么是DOM模板呢？这是Vue的概念还是更一般的概念(例如：在某些规范中定义的HTML概念)？它们只是Vue可以附加到的<template>标记外部的HTML元素，还是也可以在<template>标记内？欢迎使用示例。
回答 2
Stack Overflow用户
发布于 2021-07-30 00:01:54
在Vue的上下文中，"DOM模板“(通常在Vue文档的其余部分中被视为" In -DOM模板”)指的是在文档体/头中指定的组件标记，而不是字符串模板或SFC模板。
虽然DOM模板在文档中包含<script type="text/html">或<template>，但这两个标记(以及字符串模板和SFC模板)不受已知DOM template parsing caveats的约束，因为它们是惰性的。
DOM模板
in-DOM模板：
// index.html
<body>
<div id="app">
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</div>
</body>带有<script type="text/html">__的in-DOM模板：
// index.html
<body>
<script type="text/html" id="my-comp-template">
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</script>
<div id="app">
<my-comp></my-comp>
</div>
</body>带有<template>__的in-DOM模板：
// index.html
<body>
<template id="my-comp-template">
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</template>
<div id="app">
<my-comp></my-comp>
</div>
</body>字符串模板
// MyComponent.js
Vue.component('my-comp', {
template: `<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>`
})SFC模板
// MyComponent.vue
<template>
<ul>
<li v-for="i in 5">{{ i }}</li>
</ul>
</template>Stack Overflow用户
发布于 2021-07-29 16:23:02
那么什么是DOM模板呢？这是Vue的概念还是更一般的概念(例如：在某些规范中定义的HTML概念)？
你离得不远了。这指的是一个或多个将要或已经被解析并包含在DOM中的template tags。您可以在这里找到它的规范：HTML Standard 4.12.3 -“模板元素用于声明可以通过脚本克隆并插入到文档中的HTML片段。”
在您共享的链接中，术语"DOM模板“用于区分：
- 在要附加到同一文件中的HTML的模板标记(可能是在Vue实例中定义的模板字符串中)中创建HTML片段的结果。
- 创建包含模板标记的单个文件组件、导出组件实例的脚本标记以及定义某些范围的CSS的样式标记(可选)的结果。
因此，您可以期望在Vue模板标记中使用您习惯的HTML，以及为您创建的组件或您选择使用的依赖项/库中的组件定义的自定义标记。
顺便说一下，Vue使用了一些自动魔术来转换模板，并在运行时将它们附加到DOM。这可能包括将组件标记的名称更改为带有组件名称的类名的div。导致标签呈现不正确。由于Vue在过去几年中已经成熟，这已经变得不那么流行了。在我的经验中，使用单文件组件似乎缓解了这类问题。
https://stackoverflow.com/questions/68578348
复制相似问题
腾讯云开发者
