<div id="app">
  <h1>{{ message }}</h1>
</div>

// 从 Vue 中导入 createApp 函数
import { createApp } from 'vue'

// 创建一个应用实例
const app = createApp({
  // 数据 - 函数返回一个对象
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
})

// 将应用挂载到 DOM 元素上
app.mount('#app')

<!-- 文本插值 -->
<p>{{ message }}</p>

<!-- 一次性插值，数据变化不会更新 -->
<p v-once>{{ message }}</p>

<!-- 输出 HTML，会被解析为 HTML 而非文本 -->
<div v-html="rawHtml"></div>

<!-- 条件渲染 -->
<p v-if="seen">现在你看到我了</p>

<!-- 列表渲染 -->
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

<!-- 事件监听 -->
<button v-on:click="doSomething">点击我</button>

// 定义一个名为 button-counter 的新组件
const ButtonCounter = {
  data() {
    return {
      count: 0
    }
  },
  template: `<button v-on:click="count++">点击了 {{ count }} 次</button>`
}

// 全局注册组件
app.component('button-counter', ButtonCounter)

// 在模板中使用
<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

npm run serve
# 或者
yarn serve

npm run build
# 或者
yarn build