# v-on事件觸發(2-5)
###### tags: `Vue`、`2. 指令語法全介紹`

### 一般v-on寫法(例:click)
* #### 事件觸發(縮寫@)
is : true

{{ is }}
<button type ="button" @click="change_boolean"></button>


<script>
methods:{
    change_boolean(){
        this.is = !this.is;
    }
}
</script>

* #### 帶入參數
is : true

{{ is }}
<button type = "button" @click="change_boolean('is')">

<script>
methods:{
    change_boolean(key){
        this[key] = !this[key]
    }
}
</script>

### 原生 DOM 事件
參考連結 : https://www.w3schools.com/jsref/dom_obj_event.asp
* #### change : 填寫資料當按確認或者離開填寫框時，觸發事件。

<input type="text" @change="change">

<script>
    methods :{
        change(){
            console.log('觸發change事件')
        }
    }
</scrip>

* #### submit事件 : 當填寫完表單資料送出時，可以不用按按鈕，直接按確認或離開輸入框即可送出資料。
備註：prevent能擋掉HTML送表單重新整理程序。

<form @submit.prevent="submitdata">
     <input type = "text">
     <button>送出表單</button>
</form>

<script>
method:{
    submitdata(){
        console.log('送出表單')
    }
}
</script>

* #### 動態事件：可結合串接data方式改變動作指令

<input type="text" @[even]="change_DOM">
<input type="text" v-model="even">

<script>
data(){
    return{
        even:'click'
    }
},
methods:{
    change_DOM(){
        concole.log(`這是一個動態事件${this.even}`)
    }
}
</script>

* #### 動態物件方法：

<button type="button" @="{ mousedown: down, mouseup: up}">按鈕</button>

<script>
    method:{
        down(){
            console.log('按下')
        },
        up(){
            console.log('放手')
        },
    }
</script>