html中使用vue3

在使用 Vue 3 的时候，我们可以使用 Vue 的模板语法来编写 HTML。下面是一个简单的示例：

1. 引入 Vue 3

<script src="https://unpkg.com/vue@next"></script>

2. 创建 Vue 实例

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

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello, Vue 3!'
      }
    }
  })
  app.mount('#app')
</script>

3. 组件使用

<div id="app">
  <my-component :prop1="value1" @event1="handleEvent"></my-component>
</div>

<script>
  const app = Vue.createApp({
    components: {
      'my-component': {
        props: ['prop1'],
        template: '<div>{{ prop1 }}</div>'
      }
    },
    methods: {
      handleEvent() {
        // 处理事件
      }
    }
  })
  app.mount('#app')
</script>

在上面的示例中，我们首先使用`Vue.createApp()`方法创建了一个 Vue 实例，然后使用`app.mount('#app')`方法将 Vue 实例挂载到 HTML 页面的`#app`元素上。在 Vue 实例中，我们可以定义数据、方法、组件等功能，然后在 HTML 模板中使用。