반응성2 14. Vue - 리스트 렌더링(= 배열 처리) 0. 시작하기 전에 이전 포스팅에서 간단하게 v-for를 사용하여 반복처리를 해보았다. 리스트 렌더링이란, 간단하게 말해서 반복문을 사용한 배열 처리 과정을 말한다. 오늘은 반복문을 사용한 배열 처리 과정에 대해서 알아보자. 공식문서 바로가기 1. index a) 예제코드 {{ fruit }} - {{ index }} b) 출력화면 c) 해설 예제코드에서 v-for 디렉티브를 사용한 곳을 살펴보자. 반복문을 사용하다보면 다양한 이유로 index가 필요한 경우가 있다. 이때 v-for 디렉티브에서 제공하는 표현식을 사용하면 인덱스를 쉽게 얻을 수 있다. 배열의 요소와 index를 위의 예제코드에서 처럼 괄호()를 이용하여 묶어주면 된다. 인덱스의 이름은 반드시 index일 필요는 없다. 필요에 따라서 자유.. 2021. 5. 19. 5. Vue - 기본 동작원리 및 반응성 - 이전 포스팅까지는 Vue를 사용한 개발환경을 구축해보았다. - 이번 포스팅부터는 Vue에 대해서 하나씩 배워보도록 하자. 1. vue의 개념 SPA 디자인 패턴에서는 메인 프레임이 되는 App.vue를 제외하고 컨텐츠 영역의 화면이 전환된다. 이 컨텐츠 영역에 들어가는 각 페이지 또는 화면을 우리는 컴포넌트라고 부른다. vue가 이 컴포넌트의 역할을 하기 때문에 vue는 하나의 화면을 의미한다. 이와 같은 이유로, vue를 SFC(Single File Component)라고도 부른다. 2. vue의 기본 동작원리 3. 실습 예제 vue의 기본적인 개념과 작동원리를 이해하기 위해 간단한 실습예제를 만들어보자. 해당 예제는 브라우저의 숫자를 클릭하면 해당 숫자 값이 증가한다. 아래 코드는 App.vue에.. 2021. 5. 13. 이전 1 다음
