vue3基础语法小案例

以下是一个简单的Vue3基础语法小案例：

HTML代码：

<div id="app">
  <h1>{{ message }}</h1>
  <button v-on:click="changeMessage">Change Message</button>
</div>

Vue实例代码：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Vue3 is awesome!'
    }
  }
})
app.mount('#app')

运行效果：

当页面加载时，会显示一个标题为“Hello, Vue3!”的H1标签和一个按钮。当用户点击按钮时，会调用changeMessage方法，将message的值改为“Vue3 is awesome!”，并更新页面上的H1标签的文本内容。