리스트 렌더링 (2) 썸네일형 리스트형 Vue.js) 이벤트 핸들링 1. 이벤트 핸들링 v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. 2. 사용 예제이벤트 출력 Click1위 사진과 같이 해당 event와 관련된 속성들이 담긴 event 객체와 event.target으로 해당 event가 등록되어 있는 엘리먼트가 출력됨을 알 수 있습니다.* 매개변수는 event외에도 임의로 설정해도 event객체를 불러올 수 있습니다. ex) e* v-on:['event'] 형식은 @:['event'] 형식으로 축약해서 사용할 수 있습니다. 매개변수와 이벤트를 동시에 출력 Click1이벤트 함수를 호출할 때 매개변수와 이벤트를 같이 출력하고 싶을 때 위와 같이 ('매개변수',..., $event) 호출하면 event 객체를 받.. Vue.js) 리스트 렌더링 1. 리스트 렌더링Vue.js의 리스트 렌더링은 배열이나 객체 같은 데이터 구조를 기반으로 반복적인 HTML 요소를 생성할 수 있게 해 줍니다. 이를 통해 데이터의 항목 수에 따라 동적으로 렌더링 할 수 있습니다. 2. v-for로 엘리먼트에 배열 매핑 엘리먼트 배열 매핑 {{ fruit }}-{{ index + 1 }} 엘리먼트 배열 매핑 Apple-1 Banana-2 Cherry-3" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스v-for 디렉티브를 사용하여 해당 배열을 반복하여 li 엘리먼트를 반복 생성할 수 있습니다. key 값은 고유한 값을 가집니다. 3. v-for 와 객체 엘리먼트 객체 매핑 {{ fruit.name }}-{{ fru.. 이전 1 다음
