<body>
<div id="app">
<ul>
<li
:class="'item - ' + (index + 1)"
v-for="(todo,index) in todos"
:key="index"
@click="clickMethod1(todo.title, $event); clickMethod2()"
>
{{ todo.title }}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
todos: [
{ title: '아침 먹기' },
{ title: '점심 먹기' },
{ title: '저녁 먹기' }
]
},
methods: {
clickMethod1(title, event) {
console.log('click1')
console.log(title)
console.log(event.currentTarget.className)
},
clickMethod2(title, event) {
console.log('click2')
}
}
})
</script>
</body>
li요소를 클릭하면 console에 요소의 className이 찍히도록 동작 clickMethod1(title, event) { console.log(event.currentTarget.className)}
:class="'item - ' + (index + 1)"
인라인 이벤트 핸들러(인수사용)에 이벤트 핸들러를 함께 사용하는 방법
<button @click="clickMethod1(todo.title, $event)">
click!
</button>
다중 메서드 핸들러를 사용할때는 인수가 없어도 ()소괄호를 명시해야한다
<button @click="clickMethod1(todo.title, $event); clickMethod2()">
click!
</button>
handler(e) {
e.preventDefault()
}
// HTML의 기본 동작을 방지하고 method만 실행하는 기능
handlerB(e) {
e.stopPropagation()
}
// 버블링을 방지하는 기능
이벤트 핸들러 내부에 event.preventDefault()
또는 event.stopPropagation()
을 호출하여 DOM 이벤트 세부 사항을 처리하는 대신,
데이터 로직에 대한 메소드만 사용할 수 있도록 Vue는 v-on
이벤트에 이벤트 수식어를 제공한다.
수식어는 점으로 표시된 접미사이다.
.stop
.prevent
.capture
.self
.once
.passive
<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>
<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>
<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다(target과 currentTarget이 동일) -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>
<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>
<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<div v-on:scroll.passive="onScroll">...</div>
<!-- `key`가 `Enter`일 때 vm.submit()을 호출하겠다 -->
<input v-on:keyup.enter="submit">
키보드 이벤트를 수신할 때 Vue는 v-on
에 대한 키 수식어를 추가할 수 있다
<body>
<div id="app">
<input type="text" @keydown.ctrl.enter="keydownHandler" />
</div>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
keydownHandler(e) {
console.log('Done!!')
}
}
})
</script>
</body>
.enter
.tab
.delete
(“Delete” 와 “Backspace” 키 모두를 캡처합니다).esc
.space
.up
.down
.left
.right
해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있다
.ctrl
.alt
.shift
.meta