---
# System prepended metadata

title: v-on Dom事件 (2-7)
tags: [Vue, 2. 指令語法全介紹]

---

# v-on Dom事件 (2-7)
###### tags: `Vue`、`2. 指令語法全介紹`
2022.3.2 
Dom參考網站 : https://www.w3schools.com/jsref/dom_obj_event.asp 

### 1. 查看事件內容
* 當事件傳方法時**沒有**給值:'ｅ'就可以用來查看事件內容。
```
<button type="button" @click="event">按鈕</button>

<script>
    methods:{
        event(e){
            console.log(e)
        }
    }
</script>
```
![](https://i.imgur.com/g3WBnpn.png)

* 當事件傳方法時**有**給值:'ｅ'就可以用來查看事件內容。
```
<button type="button" @click="event('這是物件事項:',$event)">按鈕</button>

<script>
    methods:{
        event(text,e){
                console.log(text,e)
        }
    }
</script>
```
![](https://i.imgur.com/exDmiC8.png)

### 2. 使用 @keyup 可以從事件內容查看資料
```
<input type = "text" @keyup="event">

<script>
    methods:{
        event(e){
                console.log(e);
        }
    }
</script>
```
* #### 可以從target->value找尋到輸入內容
![](https://i.imgur.com/EhVzrSA.png)

* #### 可以從keycode找尋到輸入鍵對應的代碼，並藉由代碼判斷使用者輸入哪一個鍵。

```
<input type = "text" @keyup="event">

<script>
    methods:{
        event(e){
                if(e.keyCode === 13){
                    console.log('您按的是確認鍵')
                }
                else{ console.log(e.keyCode);}
        }
    }
</script>
```
![](https://i.imgur.com/XbML1vr.png)
