2023年度鐵人_[Day 28] Vue的事件

 

雖然前面篇章已經用了很多event的實作了,但還是稍微特別在寫一篇來筆記一下。
https://ithelp.ithome.com.tw/upload/images/20231007/20107452Tt9Xah5sAF.png

基本上用上述架構來去認識所謂事件

在探討vue中事件處理方式之前又要稍微回顧一下原生html跟js事件處裡的方式,因為vue只是後續框架的封裝優化。

https://ithelp.ithome.com.tw/upload/images/20231007/20107452wi8JLkoapT.png
在 HTML 中,事件屬性是由 HTML 元素提供的,凡是以 on 開頭的都是html原生提供的event屬性,可以在當中去撰寫要觸發的js行為。

對於這些事件屬性,都具有一定的行為,比如像是常見的 onclick 事件,它的意義是單擊事件。
當某個 HTML 元素上有 onclick 事件,則在頁面上渲染 HTML 元素之後,只要點擊這個元素,就會觸發 onclick 事件,從而執行在此事件上掛接的 JavaScript 程式碼。

<input type="button" onclick="alert('hello')" value="送出" />

像上述的範例就是單擊按鈕後會去
alert一個hello 警示內容的跳窗按鈕功能

在Vue當中,對於HTML元素事件的監聽,主要是透過 v-on 指令來實踐。
在監聽到事件後,就會執行掛接的 JavaScript 程式碼。

小叮嚀:v-on 指令在 Vue 中,可簡寫為@符號。

比方說:

<input type="button" v-on:click="getData" value="查詢" />
<input type="button" @click="getData" value="查詢" />

v-on:click 與 @click 是異曲同工之妙,若比較懶的就可以直接用簡寫形式。

就事件執行的 JavaScript 程式碼,可以是簡單的純程式碼,也可以掛接著一個 JavaScript 的 function。
大部分情況,對於事件處理的業務邏輯較為複雜,需要封裝到函數中,函數也可以傳入參數,從而實踐具體功能。

Vue 中的 v-on 指令,也可以執行 Vue 中定義的響應式變數,來實現資料的雙向綁定。
如此一來當我們在 v-on 指定的程式碼中有去修改響應式變數值,就會即時的回饋到 DOM 中。

小叮嚀: 文件物件模型(Document Object Model, DOM),是 W3C所推崇的處理標記式語言(HTML)之標準程式介面,將HTML文件給結構化,用樹狀結構來表示模型介面。

眾所周知 event 針對事件處理程序分兩種,
一種就是可以封裝到獨立一個函數當中,將函數掛接到事件屬性中。
另外還有一種就是內嵌事件處理程序,也就是在事件屬性上直接執行 JavaScript 程式,而不是 JavaScript 函數。

在src/components/目錄下
創建一個組件取名為EventHandlerTest.vue

<template>
    <input type="button" @click="count=count+1" value="內嵌累計count" />
    <span>
        {{ count }}
    </span>
    <br/>
    <input type="button" @click="()=>count2++"  value="內嵌箭頭函數累計count2" />
    <span>
        {{ count2 }}
    </span>
    <br/>
    <input type="button" @click="DoAccumulate"  value="函數事件處理累計count3" />
    <span>
        {{ count3 }}
    </span>
</template>

<script setup>
    import {ref} from 'vue'
    let count = ref(0);
    let count2 = ref(0);
    let count3 = ref(0);

    const DoAccumulate = () => {
        count3.value++;
    }
</script>

App.vue掛載引入

<template>
  <main>
    <EventHandlerTest></EventHandlerTest>
  </main>
</template>

<script setup>
  import EventHandlerTest from './components/EventHandlerTest.vue';
  
</script>

運行效果基本上都可以work功能都是一樣的,可視功能需求自行調整寫法。
也可能維護的系統充斥這三種寫法,因此都需要稍微認識一下。
https://ithelp.ithome.com.tw/upload/images/20231007/20107452SnZjTeERyq.png

接續我們探討有傳入參數情況
https://ithelp.ithome.com.tw/upload/images/20231007/201074525yIoro1WV7.png

倘若 HTML 元素使用了 v-on 來指定事件,則掛接的是箭頭函數或已封裝好的函數,也可以給函數傳遞參數。
針對事件函數傳遞的參數,可以是業務需要的參數,也可以是事件參數 event。
在封裝函數時,要給函數指定形式參數,也就是parameter,
這樣在呼叫時或在事件屬性上掛接時,你才能傳入實際參數內容。

小叮嚀:對於 JavaScript 中的函數,可以傳入 event 物件參數,取得或設定與事件相關的資訊。
在 Vue 中,event 物件要使用$.event 做為參數傳入,也可以使用箭頭函數傳入 JavaScript 原生的 event 物件。

改寫我們的EventHandlerTest.vue

<template>
    <input type="button" @click="DoProcess(480)"  value="提交" />
    <br/>
    <input type="button" @click="(event) => getData(event)"  value="提交" />
    <br/>
    <input type="button" @click="getData($event)"  value="提交" />
</template>

<script setup>
    function DoProcess(total){
        if(total < 1000){
            console.log('小於1000元,不達免運標準。');
        }else{
            console.log('大於1000元,恭喜可免運。');
        }
    }

    function getData(evt){
        console.log(evt);
    }
</script>

運行效果

https://ithelp.ithome.com.tw/upload/images/20231007/20107452O2RsesfBkG.png

可見能獲取 event 物件的相關資訊,執行一些與事件相關的操作。
此外還有判斷免運標準的功能






留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題