事件處理

監(jiān)聽事件

監(jiān)聽事件有兩種方式。

使用on監(jiān)聽：

<text onclick="doThis">Click me!</text>

使用v-on指令以及縮寫方式監(jiān)聽：

<text v-on:click="doThis">Click me!</text>
<text @click="doThis">Click me!</text>

事件處理方法

事件的處理方法需要在methods中定義，方法默認(rèn)包含一個(gè)參數(shù)，可以通過該參數(shù)獲取detail、target對象等。

<template>
    <text data-name="avm" onclick="doThis">Click me!</text>
</template>
<script>
    export default {
        name: 'test',
        methods: {
            doThis(e){
                api.alert({
                    msg:e.target.dataset.name
                });
            }
        }
    }
</script>

事件處理方法也可以使用模板的方式，如：

<text onclick={this.doThis}>Click me!</text>

直接執(zhí)行JavaScript代碼

處理事件也可以使用直接執(zhí)行JavaScript代碼的方式，如：

<text onclick="api.alert({msg:'avm'});">Click me!</text>

或者

<template>
    <text onclick="doThis('avm');">Click me!</text>
</template>
<script>
    export default {
        name: 'test',
        methods: {
            doThis(msg){
                api.alert({
                    msg: msg
                });
            }
        }
    }
</script>