Vue3 Script Setup - daniel-qa/Vue GitHub Wiki

Script Setup

用 vue cli 創建，然後使用 vue3 的 Script Setup，加入按鍵的 click function，和狀態顯示 message

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>  
  <button @click="handleClick">点击我</button>
  <p>{{ message }}</p> <!-- 显示 message 的内容 -->
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import { ref } from 'vue';

const message = ref('按钮未点击');

const handleClick = () => {
  alert('按钮被点击了！');
  message.value = '按钮已点击！'; // 更新 message 的值
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  • 在 <script setup> 中，HelloWorld 组件会自动注册，因此不需要显式在 components 中声明

  • 组件名称通常由文件名决定，或者可以通过 Vue CLI 或其他工具进行设置。

  • ref：ref 是 Vue 3 的响应式 API，用于创建响应式数据。通过 ref 创建的数据是响应式的，当其值变化时，相关的模板会自动更新。

⚠️ **GitHub.com Fallback** ⚠️