강의 듣다가 질문드립니다.
119
작성한 질문수 44
양방향 바인딩 강의 듣다가 @input이 나왔는데요.
이게 자바스크립트의 onchange와 같은 역할을 하나요?
vue를 처음 접하는지라 사소한것도 질문드리게되네요.
vue3 => v-on:input="aaa" => @input="aaa"
js => onchange="aaa()"
위처럼 생각해도될까요?
답변 1
1
안녕하세요, 인프런 AI 인턴입니다.
Minkoo Lee님, Vue.js에서의 @input 디렉티브와 JavaScript의 onchange 이벤트 리스너의 사용에 대해 질문 주셨네요.
Vue.js에서의 @input는 Vue의 디렉티브로, 입력이 발생할 때마다 자동으로 이벤트를 감지하고 호출할 메서드를 실행시킵니다. 이는 주로 <input>, <textarea>와 같은 폼 요소의 값이 변경될 때 실시간으로 반응하도록 사용되는데, JavaScript의 oninput 이벤트와 유사합니다.
JavaScript에서 onchange는 사용자가 입력을 하고 포커스를 벗어났을 때 반응하는 이벤트입니다. 따라서, @input은 사용자가 입력할 때마다 반응하고, onchange는 포커스를 벗어날 때 반응하는 차이가 있습니다.
Vue.js에서 @input="aaa"로 지정하면, 데이터 바인딩이 이루어져 사용자가 입력할 때마다 지정한 aaa 메서드가 호출됩니다. 이는 v-on:input과 동일한 용법입니다.
관련하여 추가적인 학습을 원하신다면, 다음의 질문과 답변을 참고하세요:
- props, emit 질문이 있습니다.
- https://v3.vuejs.org/guide/events.html#form-input-bindings: Vue 공식 문서에서 Form Input 바인딩에 대한 상세 정보를 제공하고 있으니, 참고하시면 큰 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
npm init vue@3.1.9
0
36
2
크롭 웹스토어 vue devtools 설치 관련
0
38
1
snippets 작성하는 부분 설명이 있었나요?
0
47
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
52
2
소스 공유 어디서 해야하는지 궁금합니다
0
60
2
component 등록과 사용
0
57
2
강의교안
0
56
2
eslint 룰 관련 질문이 있습니다.
0
63
2
npm init -y 명령어 실행에 관한 질문
0
153
2
volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.
0
167
2
깊은 감시자 질문
0
88
2
정리된 내용
0
153
2
화면이 왜 이렇게 뜨는걸까요?
0
184
2
왜 다르게 뜰까요..?ㅠㅠ
0
155
2
npm init vue , npm create vue@latest 명령 오류
0
289
2
강의를 듣다보니 궁금한 점 질문드립니다.
0
141
2
watch강의 질문
0
153
1
이벤트 처리 부분 강의 실습
0
140
2
v-pre는 설명이 없나요?
0
152
2
AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다
0
146
1
개발자도구 Vue 탭 관련 문의
0
240
2
강의를 인텔리제이로 수업따라가도 되져?
0
177
2
API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?
3
274
2
이벤트 수식어 event 전달인자 관련 질문
0
136
1