웹(web)/프론트엔드-vue25 form & v-model, @input input value에 양방향 바인딩을 하려면 어떻게 해야할까? 을 하면된다. v-model 사용시 한글이 바로바로 반영이 안되는데 어떻게 해야할까? 을 통해 데이터의 값을 변경해주면 된다. 핸들러에는 this.데이터이름 = event.target.value 코드가 포함되어야 한다. @input사용시 처음 렌더링 되면 초기값이 없는데 초기값을 Vue에 정의된 데이터 값으로 하려면? :value = "데이터이름"으로 단방향 바인딩을 해준다. 아래 예시를 통해 직접 확인해보면 된다. 2020. 7. 9. event handle - modifier 인풋 태그에 텍스트를 입력하다가 enter 키가 눌렸을 때만 콘솔에 로그를 찍고 싶으면 어떻게 해야할까? 또 ctrl+ enter키가 눌렸을 때 콘솔에 로그를 찍으려면 어떻게 해야할까? 방법은 두가지가 있다. 두 가지 모두 동일한 결과를 나타낸다. 첫 번째는 키가 입력 되었을 때 이벤트 핸들러를 호출하고 핸들러 함수 안에서 키의 값을 판별하여 로그를 찍는방법. 두 번쨰는 key modifier를 사용하는 방법. 다음의 코드가 그 예시이다. 2020. 7. 9. v-on 이벤트 핸들링 수식어 클릭 이벤트 사용시 여러 겹의 레이어가 겹쳐 있을 때 이를 구분해서 원하는 레이어만 실행하려면 어떻게 해야할까? 이벤트 핸들링에 대한 수식어를 사용하면 된다. 위 그림에서 red영역은 child 고 blue영역은 chlid를 감싸는 parent라고 해보자. 위와 같은 구조에서 클릭 이벤트 핸들러를 동일한 함수를 사용하면 child 영역을 클릭했을 때 child에 대한 이벤트 핸들링을하고 parent에 대한 이벤트 핸들링도 된다. 그 이유는 클릭한 부분에 해당하는 영역이기 때문이다. 이것을 원하지 않고 child를 클릭하면 child만 반응하게 하려면 어떻게 해야할까? 아래 코드와 같이 작성하면 된다. 2020. 7. 9. v-on event handler 등록 버튼을 클릭할 때 콘솔에 이벤트가 발생했음을 표시하려면 어떻게 해야할까? v-on:click 과 같은 이벤트 사용을 위해 핸들러를 등록할 수 있다. 매우 간단하며 규칙은 다음과 같다. v-on:이벤트이름 = "[이벤트핸들러 호출식;]+ " 이벤트핸들러 호출하는 수식을 여러개 적어도 된다. 세미콜론을 습관적으로 쓰는 것이 실수를 방지해줄 것이다. 또한 핸들러 등록시 $event를 써주면 핸들러에서 해당 이벤트를 사용할 수 있다. $event를 사용하기 위해서 인자 순서는 상관 없다. 2020. 7. 9. 이전 1 2 3 4 5 6 7 다음
