vue18 @change, v-model+lazy,number,trim input에서 입력하는 순간순간 변경되는 것이 아니라 엔터를 치거나 focus가 사라졌을 때 변경되도록 하려면 어떻게 해야할까? @change에 핸들러를 붙이거나 v-model.lazy를 사용하면 된다. input text에서 입력된 value의 값이 있을 때 좌우측 공백을 제거해서 데이터에 반영하려면 어떻게 해야할까? v-model.trim 을 사용한다. input text에 입력된 value가 숫자인 경우에 자동으로 int형태로 캐스팅해서 데이터에 반영하려면 어떻게 해야할까? v-model.number를 사용한다. 아래 코드를 보면서 위의 설명을 확인하도록 하자. v-model은 양방향 바인딩이다. 2020. 7. 9. 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. 이전 1 2 3 4 5 다음
