vue3的写法示例
时间: 2023-06-28 12:08:17 浏览: 44
以下是一个简单的 Vue3 示例:
```html
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">+1</button>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({
count: 0,
message: "Hello Vue3!",
});
const increment = () => {
state.count++;
};
return {
...state,
increment,
};
},
};
</script>
```
在这个示例中,我们使用了 Vue3 的 `reactive` 函数来声明了一个响应式的 `state` 对象,其中包含了 `count` 和 `message` 两个属性。我们通过 `setup` 函数来组织我们的代码,这个函数会返回一个包含了我们定义的 `state` 和 `increment` 函数的对象。在模板中,我们使用了标准的双向数据绑定语法来展示 `message` 的值,并且通过 `@click` 指令来监听按钮的点击事件,触发 `increment` 函数来修改 `count` 的值。