이벤트 처리는 Vue.js에서 사용자와 상호 작용하고 애플리케이션 상태를 변경하는 데 중요한 부분입니다. Vue.js는 인라인 이벤트 핸들러, 메서드 및 이벤트 수정자를 포함하여 이벤트를 처리하는 다양한 방법을 제공합니다.
다음은 Vue.js의 일반적인 이벤트입니다.
1. click 이벤트
이 이벤트는 버튼이나 링크와 같은 클릭 가능한 요소를 클릭할 때 트리거됩니다. 일반적으로 사용자가 요소와 상호 작용할 때 작업을 수행하거나 기능을 트리거하는 데 사용됩니다.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input 이벤트
이 이벤트는 요소의 값이 input 변경될 때 트리거됩니다. 일반적으로 Vue 구성 요소의 데이터 속성에 값을 v-model 바인딩하는 지시문 과 함께 사용됩니다. input 이렇게 하면 값에 대한 변경 사항을 반응적으로 업데이트하고 추적할 수 있습니다 input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change 이벤트
이 이벤트는 선택 드롭다운 또는 체크박스와 같은 양식 요소의 값이 변경될 때 트리거됩니다. 일반적으로 선택한 옵션 또는 요소의 선택된 상태를 기반으로 작업을 수행하거나 데이터를 업데이트하는 데 사용됩니다.
<select v-model="selectedOption" v-on:change="handleSelectChange">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>data() {
return {
selectedOption: ''
};
},
methods: {
handleSelectChange() {
console.log('Selected option:', this.selectedOption);
}
}
4. submit 이벤트
submit 이 이벤트는 단추를 클릭하거나 필드 내에서 Enter 키를 눌러 양식을 제출할 때 트리거됩니다 input. 일반적으로 양식 제출을 처리하고, 사용자를 확인하고 input, API 요청 또는 데이터 저장과 같은 작업을 수행하는 데 사용됩니다.
<form v-on:submit="handleSubmit">
<input type="text" v-model="name" />
<button type="submit">Submit</button>
</form>data() {
return {
name: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted! Name:', this.name);
}
}
5. keyup 이벤트
이 이벤트는 키를 누른 후 손을 뗄 때 트리거됩니다. input 일반적 으로 항목 목록을 필터링하거나 검색 기능을 트리거하는 것과 같이 키보드에 대한 응답으로 작업을 수행하는 데 사용됩니다 .
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown 이벤트
이 이벤트는 키를 눌렀을 때 트리거됩니다. 일반적으로 특정 키 조합을 듣거나 슬라이드쇼 탐색 또는 게임 제어와 같이 키를 누른 상태에서 작업을 수행하는 데 사용됩니다.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover 이벤트
이 이벤트는 마우스 포인터가 요소 위로 이동될 때 트리거됩니다. 일반적으로 추가 정보를 표시하거나 요소 위로 마우스를 가져갈 때 시각적 피드백을 제공하는 데 사용됩니다.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout 이벤트
이 이벤트는 마우스 포인터가 요소 밖으로 이동할 때 트리거됩니다. 일반적으로 마우스가 더 이상 요소 위에 있지 않을 때 요소를 숨기거나 수정하는 데 사용됩니다.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll 이벤트
이 이벤트는 요소가 스크롤될 때 트리거됩니다. 일반적으로 무한 스크롤, 콘텐츠 지연 로드 또는 위치에 따라 UI 요소 업데이트와 같은 기능을 구현하는 데 사용됩니다 scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus 이벤트
이 이벤트는 요소가 수신할 때 focus, 일반적으로 클릭하거나 사용자가 키보드를 사용하여 탐색할 때 트리거됩니다. input 일반적으로 또는 요소가 획득 할 때 작업을 수행하거나 시각적 피드백을 제공하는 데 사용됩니다 focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
이들은 Vue.js의 이벤트에 대한 몇 가지 기본적인 예일 뿐입니다. 프로젝트의 특정 요구 사항에 맞게 이벤트 처리 기능을 사용자 정의할 수 있습니다.