데이터바인딩
데이터바인딩이란?
- JS데이터를 HTML에 꽂아넣는 문법
이유
1. HTML에 하드코딩해놓으면 나중에 변경이 어렵다.
2. Vue의 실시간 자동 렌더링을 쓰기 위함. (Vue는 data를 변경하면 data와 관련된 HTML에도 실시간으로 반영이 된다)
-> {{}} 를 써서 데이터 바인딩
데이터 보관함부터 있어야 함
데이터는 object 자료로 저장해두기 ({자료이름:자료내용})
밑에 있는 데이터 HTML에 꽂아넣고 싶으면 -> {{데이터이름}}
HTML 속성도 데이터바인딩 가능 -> :속성="데이터이름"
HTML 반복문
코드 짜다보면 반복적인 HTML 태그 출몰
문법
<태그 v-for="작명 in 몇회" :key=""> (:key="작명"도 필요)
몇회에 밑에 있는 데이터도 집어넣기 가능
특징
1. array/object 집어넣기 가능
그럼 자료안의 데이터 갯수만큼 반복됨
그럼 작명한 변수는 데이터안의 자료가 됨
2. 변수 작명 2개까지 가능
- 왼쪽 변수는 array 내의 데이터
- 오른쪽 변수는 1씩 증가하는 정수
:key=""의 용도
- 반복문쓸 때 꼭 써야함
- 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀
Tips
web-app을 만들 때 유용하다
문법을 배울 때는 언제 쓰는지를 배워야 한다!
array 자료형 -> var 어레이 = [10, 20, 30]; 어레이[1]
I am what I repeatedly do