EP16 - ex2. Handling Input

第二個範例是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