求教：非构建创建组件时，如何使用 ID 选择器来指向一个元素，使用其内容作为模板来源？

[crestin]

如图上图：你也可以使用 ID 选择器来指向一个元素 (通常是原生的 元素)，Vue 将会使用其内容作为模板来源。

求教，这句话如何理解和使用。

[zhangzhonghe]

就是在 HTML 中使用 <template> 元素定义模板，如下所示：

<template id="my-template-element">
  <div>{{ count }}</div>
</template>

然后把 my-template-element 这个 id 传给你上面提供的图片的 template 属性。前面别忘了带上 # 字符。

[crestin]

import { ref } from 'vue'
export default {
    setup() {
        const count = ref(0)
        return {
            count
        }
    },
    template: document.querySelector('#my-template-element')
}

@zhangzhonghe 谢谢！

那有没有在非构建的情况下，可以像单文件组件一样，js 和 html 分离但能放在同一个文件的方法？

[zhangzhonghe]

你说的非构建应该是指不需要编译，在这种情况下如果要想 js 和 html 放到同一个文件中就只能使用 .html 文件了。

[crestin]

@zhangzhonghe 你好，是不是只能这样分离组件并使用了？

[zhangzhonghe]

是的，这样应该没问题。