第二個範例是Handling User Input，處理輸入的部分
就繼續來練習吧！！上一個範例都是寫在App.vue裡頭
可以內容轉移到components資料夾裡頭唷～
第二個範例開始，我就類似用這種方式摟～
而在App.vue中則放置引用components的內容～
要怎麼引用Components呢？
在App.vue使用import把其他組件引入！
<script setup>
import Ex1HelloWorld from './components/Ex1HelloWorld.vue';
</script>
<template>
<div id="app">
<!--使用Hello World組件-->
<Ex1HelloWorld></Ex1HelloWorld>
</div>
</template><script setup>
範例2. 處理輸入
<script setup>
import { ref } from 'vue'
const message = ref('Hello World')
function reverseMessage() {
message.value = message.value.split('').reverse().join('')
}
function notify() {
alert('navigation was prevented.')
}
</script>
<template>
<p>Example 2:</p>
<h1>{{ message }}</h1>
<button @click="reverseMessage">Reverse Message</button>
<button @click="message += '!'">Append "!"</button>
<a href="https://vuejs.org" @click.prevent="notify">
A link with e.preventDefault()
</a>
</template>
<style>
button,
a {
display: block;
margin-bottom: 1em;
}
</style>
import { ref } from 'vue': 引入ref函數，用來創建響應式變數。const message = ref('Hello World'): 創建響應式變數message，初始值為'Hello World'。function reverseMessage() { ... }: 定義reverseMessage函數，將message的值反轉。function notify() { ... }: 定義notify函數，彈出警告框。<template>中的<h1>{{ message }}</h1>: 顯示message的值。<button @click="reverseMessage">Reverse Message</button>: 點擊按鈕時執行reverseMessage函數。<button @click="message += '!'">Append "!"</button>: 點擊按鈕時在message的值後追加一個感嘆號。<a href="https://vuejs.org" @click.prevent="notify">: 點擊連結時執行notify函數，並防止連結跳轉。<style>中的button, a { ... }: 設定button和a元素為塊級元素，並增加底部間距。
把兩個範例都import進來
到目前為止，這兩個範例好像都蠻簡單理解的吧～
繼續下去摟！實作範例每次都是比看文件更輕鬆點www
