Vue.js의 이벤트 처리: 구문 및 예

이벤트 처리는 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의 이벤트에 대한 몇 가지 기본적인 예일 뿐입니다. 프로젝트의 특정 요구 사항에 맞게 이벤트 처리 기능을 사용자 정의할 수 있습니다.