728x90
v-on:이벤트명="처리 함수"
@이벤트명="처리 함수"
<template>
<div>
<!-- v-on:이벤트명="처리 함수" -->
<button v-on:click="handleEvent">v-on:click="handleEvent"</button><br>
<button v-on:click="xxx('홍길동')">v-on:click="xxx('홍길동')"</button><br>
<button v-on:click="yyy('홍길동', $event)">v-on:click="yyy('홍길동', $event)"</button>
<hr>
<!-- @이벤트명="처리 함수" -->
<button @click="handleEvent">@click="handleEvent"</button><br>
<button @click="xxx('홍길동')">@click="xxx('홍길동')"</button><br>
<button @click="yyy('홍길동', $event)">@click="yyy('홍길동', $event)"</button>
<hr>
<!-- 속성을 사용한 데이터 전송 -->
<!-- 함수에서는 data-를 제외한 부분을 사용하며, dataset에 저장됨 -->
<button v-on:click="handleEvent2"
data-my="aaa"
data-my2='{"name":"홍길동", "age":"20"}'>속성을 이용한 데이터 전송</button><br>
</div>
</template>
<script>
export default {
data:function(){
return {
num: 100
}
},
methods: {
handleEvent :function(data){
console.log("ok" + this.num, data)
},
xxx :function(name){
console.log("ok" + this.num, name)
},
yyy :function(name, data){
console.log("ok" + this.num, name, data)
},
handleEvent2 :function(e){
console.log("ok", e, e.target) //e: PointerEvent
//e.target: 태그 자체가 출력
console.log(this) //VueComponent
console.log(e.target.dataset) //DOMStringMap
console.log(e.target.dataset.my) //aaa
console.log(e.target.dataset.my2) //실질적으로 문자열: {"name":"홍길동", "age":"20"}
let parsedJSON = JSON.parse(e.target.dataset.my2) //JSON 파싱
console.log(parsedJSON.name, parsedJSON.age) //파싱 후 출력
},
}
}
</script>
<style>
</style>
'단순 코드 기록 > Vue' 카테고리의 다른 글
| Vue_Map/for(Sum)/watch (0) | 2024.03.07 |
|---|---|
| Vue_v-once: 한번 랜더링되면 더이상 바뀌지 않음 (0) | 2024.03.07 |
| Vue_v-for, template태그 (0) | 2024.03.07 |
| Vue_v-Show, v-if, v-else-if, v-else (0) | 2024.03.06 |
| Vue_바인딩(v-bind / v-model / lazy / number / trim / select / checkbox) (0) | 2024.03.06 |