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

== 基本语法 ==

以下是一个简单的 X-Template 示例：

=== HTML 文件 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js X-Template Example</title>
</head>
<body>
    <div id="app"></div>

    <!-- 定义 X-Template -->
    <script type="text/x-template" id="my-template">
        <div>
            <h1>{{ title }}</h1>
            <p>{{ message }}</p>
        </div>
    </script>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
</body>
</html>
</syntaxhighlight>

=== JavaScript 文件 (app.js) ===
<syntaxhighlight lang="javascript">
const { createApp } = Vue;

const app = createApp({
    template: '#my-template', // 引用 X-Template
    data() {
        return {
            title: 'Hello, X-Template!',
            message: 'This is a simple example of using X-Template in Vue.js.'
        };
    }
});

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

=== 输出结果 ===
浏览器渲染后，页面会显示：
<pre>
Hello, X-Template!
This is a simple example of using X-Template in Vue.js.
</pre>