2. 뷰 컴포넌트의 기본 구조

<template>

 

</template>

<script>

  export default{

   

  }

</script>

<style>

</style>

기본 구조이다.

template는 html의 body,

 

script는 자바스크립트인데, commonJS의 형태이고,

export default{ }

이거는 밖으로 내보내겠다는 뜻인데, 객체 형식으로 내보내는 거다. default는 누군가 import하려고 하면 이걸 기본으로 내보내겠단 소리이다.

객체 뿐만 아니라 상수, 변수 등 여러가지 값도 된다.

 

<script>

import HelloVue from './components/HelloVue.vue';

  export default{

    components:{

      HelloVue

    }

  }

</script>

이거는 외부 컴포넌트를 import 한거고, 

바깥으로 내보낼 export 안에 이 컴포넌트를 쓰려면 사용되어야 할 컴포넌트들을 정리해 놨다.

 

<template>

  <HelloVue firstMsg="안녕하세요."></HelloVue>

</template>

이렇게 태그이름으로 사용한다. HelloVue의 컴포넌트는 아래와 같이 정의했다.

 

<template>

  <div class="hello-vue">

    <h1>첫번째 시작.</h1>

    <p>

      너의 첫번째 말. <br>

      {{ firstMsg }}

    </p>

  </div>

</template>

<script>

  export default{

    name:'hello-vue',

    props:{

      firstMsg : String

    }

  }

</script>

<style>

</style>

 

 

 

 

 

<template>

    아래 스크립트에서 import한 이름을 태그명으로 사용

</template>

 

<script>

    import 사용할컴포넌트이름 from 컴포넌트경로

    export default{

        export할 내용

 

        components:{

            사용할컴포넌트이름

        }
    }

</script>

 

 

스타일은 스타일이다,

<style scope>

</style>

 

이렇게 쓰면 이 스타일을 이 컴포넌트 안에서만 사용한다.