전체 글291 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. 반응성 유지하면서 데이터 주입 배열객체와 일반 객체에 데이터를 주입하면서 반응성도 만들어 내는 방법은 없을까? 답은 set을 사용하면 된다. 전역객체 Vue.set도 가능하고 vm인 this를 사용해도 된다. 인자는 주입될 객체, 배열인 경우 인덱스/객체인 경우 키, 추가할 값 순서이다. this.todos[3] =new data 이 아니라 this.$set(todos, 3, new data) 를 사용해야 반응성이 생긴다. 2020. 7. 9. 이전 1 ··· 17 18 19 20 21 22 23 ··· 73 다음
