[Vue] .vue 파일의 기본 구조

<template>
    <!-- HTML 태그 내용 -->
</template>

<script>
export default {
    // 자바스크립트 내용
}
</script>

<style>
    /* CSS 스타일 내용 */
</style>

화면에 표시할 요소들을 정의하는 영역

ex) HTML + 뷰 데이터 바인딩

<template>
    <!-- HTML 태그 내용 -->
</template>

뷰 컴포넌트의 내용을 정의하는 영역

ex) template, data, methods 등

<script>
export default {
    // 자바스크립트 내용
}
</script>

템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역

<style>
    /* CSS 스타일 내용 */
</style>

• v-bind + props : 상위 컴포넌트에서 하위 컴포넌트로의 데이터 전달
• v-on + $emit : 하위 컴포넌트에서 상위 컴포넌트로 데이터 전달