不使用脚手架来创建 Vue 3 组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Component Example</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="app">
  <counter :initial-value="10"></counter>
  <counter :initial-value="20"></counter>
</div>

<script>
// 定义 Counter 组件
const Counter = {
  props: ['initialValue'],
  data() {
    return {
      count: this.initialValue
    };
  },
  template: `
    <div class="counter">
      <button @click="decrement">-</button>
      <span>{{ count }}</span>
      <button @click="increment">+</button>
    </div>
  `,
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};

// 创建 Vue 应用
const app = Vue.createApp({
  components: {
    Counter
  }
});

// 挂载应用到 #app 元素
app.mount('#app');
</script>

<style>
.counter {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 10px;
  padding: 5px 10px;
  font-size: 1.2rem;
  cursor: pointer;
}

span {
  font-size: 1.5rem;
  font-weight: bold;
}
</style>

</body>
</html>