第 1 课：应用实例与模板插值

• 日期：2026-08-31
• 课程序号：第 1 课
• 知识点：createApp()、响应式数据与模板插值

用途

Vue 可以把 JavaScript 数据声明式地显示到 HTML 模板中，数据变化后界面会自动更新。

核心概念

• createApp() 创建 Vue 应用实例。
• data() 返回模板需要使用的响应式数据。
• {{ message }} 是文本插值语法。
• mount('#app') 把应用挂载到指定元素。

最小代码示例

<div id="app">
  <h1>{{ title }}</h1>
  <p>第 {{ lesson }} 课</p>
</div>

<script type="module">
  import { createApp } from 'vue';

  createApp({
    data: () => ({ title: 'Vue 学习', lesson: 1 }),
  }).mount('#app');
</script>

3～5 分钟练习

增加 minutes 数据，并在模板中显示“今天学习 10 分钟”。

参考答案

data: () => ({ title: 'Vue 学习', lesson: 1, minutes: 10 })

<p>今天学习 {{ minutes }} 分钟</p>

与上一课的联系

这是 Vue 路线的第一课。下一课将用 v-bind 把数据绑定到元素属性。