vue3开发实践总结
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<button @click="incrementCounter">点击数:{{ counter }}</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const title = 'Vue 3 计数器示例'
const description = '点击按钮以增加计数器的数值。'
const counter = ref(0)
function incrementCounter() {
counter.value++
}
</script>
<style scoped>
/* 这里可以添加一些样式 */
</style>
这个简单的Vue 3示例展示了如何使用<script setup>
语法简化组件的编写。它包括了响应式数据(counter
)、计算属性(title
和description
)以及一个方法(incrementCounter
),并展示了如何在模板中绑定和显示这些数据和属性。
评论已关闭