java程序员学前端-Vue3篇




<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">点击我</button>
    <p>点击次数: {{ counter }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    // 响应式状态
    const counter = ref(0);
    const message = '你好，Vue3!';
 
    // 方法
    function incrementCounter() {
      counter.value++;
    }
 
    // 暴露到模板
    return {
      counter,
      message,
      incrementCounter
    };
  }
};
</script>

这个Vue 3示例展示了如何使用Vue 3的Composition API中的ref来创建响应式的计数器。同时，它展示了如何在模板中绑定一个方法到按钮的点击事件。这个简单的例子可以帮助Java程序员快速了解Vue 3的基本用法。

java程序员学前端-Vue3篇

评论已关闭

推荐阅读