[Vue.js] component (1)

component 예제1)

component 라는 속성을 이용하면

template에 정의한 요소를 불러올 수 있다.

컴포넌트에 my-component라는 컴포넌트를 정의하고 <my-component> 으로 사용한다.

 

컴포넌트에서 정의한 박스 요소가 생성된것을 볼 수 있다.

 

 

your-component에서는 요소안에 greet 라는 값을 받아서 

your-component v-bind:greet(데이터명)="입력할 값" 으로 사용한다.

두번째 greet에서는 msg라는 값을 사용하여 위에 input 값에 입력한 텍스트가 나타난다.

 

input 에 입력한 데이터가 값이 박스안의 텍스트에 나타난다.