Vue_기본문법

 

mustache {{}}
안에 변수명을 넣으면 출력된다.

java와 달리 import -> export -> component까지 입력해주어야 정상 실행된다는 것이 아주 감명깊다...

 

자식 name은 무조건 multi 단어로 해야 한다. 얼마 전에 바뀌었다고 한다.

 

컬러풀하게 잘 나온다.

 

 

 

 

 

props
부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 법

 

확실히 컴포넌트끼리 정보를 전송하는데 간단하다

 

 

 

 

한 장 요약

하나의 vue파일
- Template: 화면 상에 보이는 부분
- script:   javascript
- style:    css

컴포넌트
- 부모 컴포넌트
    - 스크립트:     import 변수명 from '경로';
    - 템플릿:       <변수명/>
    - 스크립트:     export default{
                        name: '부모명'
                        components: {
                            자식명1, 
                            자식명2...
                        }
                    }


부모가 자식에게 정보 전달
- 자식 컴포넌트:    props: { 변수명 : 데이터 타입}
- 부모 컴포넌트:    <자식 컴포넌트명 변수명="데이터 값">
- 자식 컴포넌트:    <div> {{ 변수명 }} </div>

 

 

아직 노드 초반이라 어렵긴 한데 간단한 구현은 쉬운 것 같기도 하다.
그리고 무엇보다 웹에 코드 반영이 빨라서
확인하면서 하는 작업이 더 빠르다는 장점이 정말 큰 것 같다.