본문 바로가기

반응형

Programming/Vue

(2)
함수 호출 시 괄호 사용 ......submitForm(event) { event.preventDefault(); alert('Submitted');} 위 코드에서 괄호를 사용하지 않고 함수 호출 시 event.preventDefault() 설정에 따라 페이지 새로고침(form 태그의 submit에 대한 기본 동작)을 하지 않는다. 반면 괄호를 사용하여 함수 호출 시 페이지를 새로고침한다. 함수를 괄호 없이 호출하면 함수에 대한 참조를 전달한다. Vue가 컴포넌트 템플릿을 해석할 때 메소드 이름이 괄호 없이 사용된 것을 확인하고, 이벤트 발생시 해당 메소드를 참조하도록 설정한다. Vue는 자동으로 이벤트 객체를 해당 이벤트 핸들러 메소드에 전달한다. 이 과정을 통해 메소드는 이벤트에 대한 모든 정보를 알 수 있고, 이벤트의 ..
Javascript 이벤트 핸들링 웹페이지 내에서 클라이언트의 상호작용을 감지하기 위해 이벤트 핸들러 함수를 사용한다.이벤트 핸들러 함수는 특정 이벤트가 발생했을 때 실행되며, 이 함수는 이벤트에 대한 정보를 포함하는 이벤트 객체를 매개변수로 받을 수 있다. Vue.js에서는 v-on 디렉티브(또는 @로 축약하여 사용)를 사용하여 DOM 이벤트를 감지하고 메소드를 호출한다. 이벤트 객체는 Vue에서 자동으로 함수로 전달되지만, 때로는 이 이벤트 객체를 직접 다루거나 추가 인자를 전달할 필요가 있다. setName(event, lastName) { this.name = event.target.value + ' ' + lastName;} 위 코드에서 input 태그의 v-on:input 디렉티브는 입력 필드에 텍스트 입력이 있을 때마다 s..

반응형