컴포넌트 (1)

1. template

- HTML로 작성됨. (+ vue 템플릿 기본 문법)

- DOM 구성 부분 작성하는 것. (DOM = Document Oriented Model)

 

2. script

- import (다른 컴포넌트 등)

- component 정의

- component life cycle 관리

- data 정의

- method

 

3. style : 해당 컴포넌트에만 적용

- css, sass

- inline 작성 혹은 src 통해 로드하여 사용

 

---

Data

- 컴포넌트가 가지고 있는(내부에서 사용할 수 있는 데이터)

- <script>영역에서 함수 형태로 정의

 

data() {

     return {

          msg : '반갑습니다!',

          author : 'bob'

     }

}

 

---

디렉티브

 

1) v-if

활용 예) <script>에 "seen" 정의하여 DOM을 넣었다가 뺐다가 할 수 있음.

 

2) v-else

 

3) v-show

 

 

4) v-bind: 어트리뷰트

 

'v-bind'는 생략 가능