vue3 html风格代码示例

Vue3 的 HTML 风格与 Vue2 有些不同，主要是因为 Vue3 引入了 Composition API，可以更灵活地编写组件逻辑。

以下是一个简单的 Vue3 组件示例，不是单文件组件：

<div id="app">
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <button @click="increment">Click me</button>
</div>

const { createApp, reactive } = Vue;

const App = {
  setup() {
    const state = reactive({
      count: 0,
      title: 'Hello, Vue3!',
      message: 'Welcome to my app',
    });

    const increment = () => {
      state.count++;
    };

    return {
      ...state,
      increment,
    };
  },
  template: '#app',
};

createApp(App).mount('#app');

在上面的代码中，我们使用了 setup 函数来定义组件的逻辑。reactive 函数可以将一个普通对象转换为响应式对象，这样当对象的属性发生变化时，相关的视图会自动更新。increment 函数用来增加 count 属性的值。

最后，我们使用 createApp 函数创建一个 Vue 应用，并将组件挂载到 #app 元素上。