Vue 코드 구성
- template: html 코드가 들어가며, 출력될 페이지를 구성하게 됨.
- script: 뷰에 대한 클래스의 정의 내역이 들어감. 즉, 뷰가 사용할 데이터와 함수코드가 들어가는 공간. 함수형으로 명시되어야 한다.
- style: css와 같이 꾸미는 속성의 영역.
data가 함수형인 이유: 만약 vue파일이 component이고 data 부분이 그냥 Object이면 component로서 vue가 여러번 로드되어도 같은 데이터를 공유하게 된다. 하지만 만약 data가 함수형으로 되어 있을 경우에는 로드될 때마다 새로운 데이터를 구축하게 되므로 서로 영향을 끼치지 않게 된다.
Vue를 통한 다양한 기능들
- vbase: vue.js가 가지고 있는 기본 틀을 구성해줌.
- v-model: v-bind와 v-on의 기능의 조합으로 동작. input에서 넣은 텍스트를 바로 data에 할당할 수 있도록 연결한다. 그러나 한글 텍스트의 경우 한 글자가 끝나야지만 적용된다는 한계가 있기에 v-bind와 v-on의 연계를 사용하는 것을 추천하기도 한다.
- v-bind: 웹의 동적 기능을 사용하기 위해 data 항목을 html에 지정할 때 사용. 즉, 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용. 이 때는 중괄호 중첩으로 묶어 사용하지 않아도 된다. v-bind는 ‘:’만 써도 같은 의미를 가진다.
- v-for: html에서 반복문을 구현하기 위해 태그 내에 사용. 값에는 data에 있는 배열이 명시되어야 하며, 특히 :key 값이 지정되어야 함. 이 key값은 반복문의 기준이 되는 것이기에 필수적이며, 이는 배열의 key attribute로 지정.
- v-if(v-else): html에서 조건문을 사용하기 위해 태그 내에 사용. 값으로 true나 false를 넣게 된다.
- v-on: 이벤트를 지정할 때 사용. 예를 들어 ‘v-on:click’이라는 것을 명시하면 해당 태그가 클릭되었을 때의 이벤트를 지정할 수 있음.