Node JS | Vue3 | Day 5 | 事件處理

vue3 onclick 用法

Vue3 js 可以使用 v-on 指令 (簡寫為 @ ) 來監聽 DOM 事件，並在事件觸發時執行對應的 JavaScript。

用法:

  • 內嵌事件處理器 ：事件被觸發時執行的內嵌JavaScript 語句 ( 與 onclick類似)。
  • 方法事件處理器 : 一個指向元件上定義的方法的屬性名稱或是路徑。

內聯事件處理器

直接在click 中 寫 javascript 語法， v-on 這邊省略成 @

<script setup>
import { ref } from 'vue'
const count = ref (0)
</script>
<template>  
  <p>
    <button @click="count++">Add</button>    
  </p>
  <p> Count is: {{ count }}</p>
</template>

方法事件處理器

在 click 中 直接呼叫 function 用法

<script setup>
import { ref } from 'vue'
const count = ref (0)
function add(){
  count.value++
  alert(`Count++ -> ${count.value}`)
}
</script>
<template>  
  <p>
    <button @click="add">Add</button>    
  </p>
  <p> Count is: {{ count }}</p>
</template>