编辑“︁Vue.js X-Template”︁（章节）

== 实际应用场景 ==

X-Template 在以下场景中特别有用：

1. '''大型模板分离'''：当模板内容非常庞大时，将其分离到单独的 <code>script</code> 标签中可以保持 JavaScript 文件的简洁。
2. '''服务器端渲染（SSR）'''：在服务器端渲染的场景中，X-Template 可以作为静态 HTML 的一部分预先加载。
3. '''渐进式迁移'''：在将旧项目逐步迁移到 Vue.js 时，X-Template 允许开发者在不破坏现有 HTML 结构的情况下引入 Vue 组件。

=== 示例：动态列表渲染 ===
以下是一个使用 X-Template 渲染动态列表的示例：

=== HTML 文件 ===
<syntaxhighlight lang="html">
<script type="text/x-template" id="list-template">
    <ul>
        <li v-for="item in items" :key="item.id">
            {{ item.text }}
        </li>
    </ul>
</script>
</syntaxhighlight>

=== JavaScript 文件 ===
<syntaxhighlight lang="javascript">
const { createApp } = Vue;

const app = createApp({
    template: '#list-template',
    data() {
        return {
            items: [
                { id: 1, text: 'Item 1' },
                { id: 2, text: 'Item 2' },
                { id: 3, text: 'Item 3' }
            ]
        };
    }
});

app.mount('#app');
</syntaxhighlight>

=== 输出结果 ===
<pre>
• Item 1
• Item 2
• Item 3
</pre>