반복문

동일한 문구가 반독될 때 반복문 사용을 한다. 예를 들어서 네비 상단바에 있는 각 태그들은 Home, Shop , About 와 같이 a태그의 반복으로 구성되어 있다. 중복코드 작성을 줄이기 위해서 v-for라는 문법을 사용해 보려 한다.

위 코드는 v-for를 사용한 코드이다. v-for는 for문과 매우 유사한 성격을 띄고 있다. 먼저 태그 안에 속성값처럼 선언을 한다.

in을 기준으로 좌우가 나누어지는데 위 코드상으로 좌측에 (k,i) 우측에 menu가 존재한다.

in 우변 (메뉴들)

먼저 우측에 menu는 반복문이 실행될 횟수를 의미한다. 해당 부분에 숫자로 반복문의 횟수를 정의 해도 되지만 위 코드와 같이 변수를 할당하여 선언해줄수 있다.

아래 data쪽에 menu라는 배열을 선언 해 놨고, 해당 배열의 크기는 3이다. 그러면 자동적으로 for문이 3번 동작한다는 뜻이 된다.

in 좌변 (list,i)

다음으로 in 좌변을 보면 list와 i가 있다.

먼저 list는 a,b,c 와 같은 변수로 작명하여 선언하면 된다. 이 변수는 해당 for문을 돌면서 우변에 선언된 횟수만큼 변하게 된다. 우변에 선언된 값이 특정 배열과 같은 변수라면 배열에 담긴 값을 순서대로 꺼내게 되고, 일반 숫자라면 1,2,3..N 과 같이 우변에 선언된 N까지 증가하게 된다.

다음으로 i는 :key에서 한번더 불러지는것을 볼 수 있다. 이는 해당 태그가 for문을 돌면 해당 i값이 1씩 증가하게 되고, 이는 고유 번호처럼 동작을 한다. 내가 이해한 바로는 html의 id 와 유사한것으로 이해했다.