Vue.js는 매우 강력하고 배우기 쉬우며 접근하기 쉬운 라이브러리로, HTML, CSS 및 Javascript에 대한 지식이 있으면 이 라이브러리에서 웹 애플리케이션 구축을 시작할 수 있습니다. Vue.js는 이미 존재하는 Angular와 react Framework의 최고의 기능을 결합하여 구축되었습니다. UI(사용자 인터페이스) 및 SPA(단일 페이지 응용 프로그램)를 빌드하는 데 사용되는 점진적이고 반응적인 Javascript 프레임워크입니다. 이것이 개발자가 Vue.js에서 응용 프로그램을 개발하는 동안 코드를 작성하고 자유와 편안함을 느끼는 이유입니다. Vue.js의 이벤트 수신 및 처리를 살펴보면 이벤트를 수신하고 처리하는 v-on 지시문을 제공한다는 것을 알 수 있습니다. v-on 지시문을 사용하여 DOM을 수신하고 필요한 작업을 수행할 수 있습니다. 또한 많은 이벤트 핸들러를 제공합니다. 그러나 이 기사에서는 클릭 이벤트에 대해서만 배우고 집중할 것입니다. 시작하겠습니다!
자바스크립트의 onClick 이벤트와 마찬가지로 Vue.js는 이벤트 수신을 위해 v-on:click을 제공합니다.
v-on:click 이벤트의 구문은 다음과 같습니다.
< 단추 v-on:클릭='함수명'>딸깍 하는 소리</ 단추 >
Vue.js는 v-on을 사용하는 대신 @ 속기 기능도 제공합니다.
< 단추 @딸깍 하는 소리='함수명'>클릭</ 단추 >
Vue.js는 클릭 이벤트를 수신하고 함수를 호출하는 것으로 그치지 않습니다. 또한 따옴표 안에 산술 연산이나 Javascript와 관련된 모든 것을 직접 작성할 수 있습니다. 다음과 같이
< 단추 @딸깍 하는 소리='숫자 += 1'>추가</ 단추 >
Vue.js는 아래와 같이 인라인 Javascript 문에서 메서드 또는 함수를 호출할 수 있도록 합니다.
< 단추 @딸깍 하는 소리='메시지('안녕하세요')'>쇼</ 단추 >Vue.js의 이벤트 핸들러를 사용하면 아래 예제와 같이 Vue.js에서 특별히 제공하는 $event 변수를 메서드의 인수에 전달하여 인라인 문을 사용하여 DOM 이벤트에도 액세스할 수 있습니다.
< 단추 @딸깍 하는 소리='message('안녕', $event)'>보내다</ 단추 >
Vue.js는 또한 여러 함수 또는 메서드를 호출할 수 있는 기능을 제공합니다. 다음 예와 같이 둘 이상의 함수를 호출하고 쉼표로 구분할 수 있습니다.
< 단추 @딸깍 하는 소리='첫 번째('안녕하세요'), 두 번째('안녕하세요', $event) '>제출</ 단추 >Vue.js는 이벤트 수정자도 제공합니다.
이벤트 수정자
우리는 종종 이벤트와 함께 수정자를 호출해야 합니다. 따라서 Vue.js는 다음 수정자를 제공합니다.
.멈추다
클릭 이벤트의 전송을 중지합니다.
< 에게 @click.stop='이 작업을 수행'></ 에게 >.예방하다
페이지를 다시 로드하거나 리디렉션하는 것을 방지합니다.
< 형태 @submit.prevent='제출 시'></ 형태 >.한 번
클릭 이벤트를 한 번만 트리거합니다.
< 에게 @click.once='이 작업을 수행'></ 에게 >.포착
이벤트 리스너를 추가할 때 주로 사용합니다.
< div @click.capture='이 작업을 수행'> ...</ div >수정자를 연결할 수도 있습니다. 그러나 수정자의 순서는 중요하며 결과에 영향을 미칩니다.
< 에게 @click.stop.prevent='그렇게'></ 에게 >결론
이 기사에서는 멍청한 놈에서 닌자 수준까지 전체 Click 이벤트 처리 개념을 다뤘습니다. 우리는 클릭 이벤트를 작성하는 다양한 구문과 |_+_|를 사용하는 다양한 방법에 대해 배웠습니다. 개발자 및 다양한 이벤트 수정자의 편의를 위해 Vue.js에서 제공하는 지시문. Vue.js와 관련된 이와 같은 더 유용한 콘텐츠를 보려면 linuxhint.com을 계속 방문하세요.