vue.js의 컴포넌트 구성요소

APP.vue

• template 
  • html컨텐츠에 해당한다. 
  • div로 감싸는 컨텐츠 하나만 인정한다. 두가지는 인정하지 않는다. 
  • view에 해당하는 html코드를 작성하는 영역이다. 
  • template의 태그 내부에는 모든 html코드를 감싸는 태그가 하나 존재해야한다. 
  • {{}} -->수염처럼 생겨서 불리는 mustache라이브러리를 사용할 수 있다. 
    • 표현식을 사용해서 modal혹은 data,props컴포넌트 객체의 데이터를 표현한다. 
• script
  • export default{}
    • 다른곳에서 import를 사용해서 얻을 수 있다. 
  • name: '컴포넌트의 이름'
  • components: {
    childcomponent1,
    childcomponent2
    }
    • 여러개를 작성할 수 있다. 
    • 이컴포넌트가 사용하는 다른 컴포넌트를 지정한다. 
    • import로 경로가 지정되어 있어야한다.
  • data(){return{}}
    • 이 컴포넌트가 제공하는 데이터이다. 
    • data()메소드가 반환하고 객체는 이 컴포넌트의 상태 data 혹은 state이다. 
    • title:책목록
      books:[{},{}]
  • prop:["프로퍼티명":"프로퍼티명"]
    • 이 컴포넌트의 부모컴포넌트로부터 전달받은 데이터를 담은 변수명(프로퍼티명)을 지정한다. 
    • 부모로부터 물려받았다. 
    • <List:bookList="books">
      • 이 컴포넌트가 가지고 있는 데이터를 자식컴포넌트의 <List>BookList프로퍼티 명으로 전달한다. 
    • import하고 data(){return{}}값으로 list:로 값을 넘겨줄수 있다. 
    • 자식컴포넌트에서는 name:"List", props:["bookList"]받은 프로퍼티명으로 꺼낼 수 있다. 
      전달받은 자료를 자식요소에게 쓰고싶으면 사용하는 방법이 porp이다
  • methods:
    • 이 컴포넌트에서 사용하는 다양한 함수를 정의한다. 
    • 사용자와 상호작용하는 이벤트 핸들러 함수 혹은 다른 함수에서 사용하는 함수를 정의할 수 있다. 
  • created()
    •  vue 컴포넌트의 라이프 사이클함수이다. 
    • 컴포넌트가 생성되면 실행된다. 
  • mounted()
    • 템플릿에 작성한 HTML코드가 랜더링된 후에 실행된다. 
    • 화면에 표현될 때 실행된다. 
  • unmounted()
    • 컴포넌트를 빠져나갈 때 실행된다. 
    • 많이 사용된다.