Vue single file component 소개

<!-- .vue 파일 구조 -->
<template>
  <!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>

<script>
  // 자바스크립트 (뷰 컴포넌트 내용)
</script>

<style>
  /* CSS (뷰 템플릿의 스타일링) */
</style>

 

.vue로 시작하는 파일의 구조이다. 바로 표출되는게 아닌 vue로 인해 가공이 된 후에 표출 되게 된다. 이처럼 vue 확장자 파일은 싱클파일컴포넌트라고 한다.

 

vue2는

<template>
	<div>
     내용
    </div>
<template>

vue3는

<template>
     내용
<template>

 

vue2는 가장 상위가 div로 감싸져야 했는데 vue3는 div가 없어도 된다.

 

파일 명명 규칙

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  //싱글파일 컴포넌트의 경우
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  //기존 helloWorld로 읽힘
  <hello-world msg="Welcome to Your Vue.js App"/>
</template>

<script>
import 라이브러리 from '라이브러리이름'
import 컴포넌트 from './파일위치'

import HelloWorld from './components/HelloWorld.vue'

1) vue 파일의 이름과 같이 HelloWorld로 대문자가 가장 앞에오며 카멜케이스를 사용한다.

2) import 구문은 라이브러리와 파일 컴포넌트를 가져올 수 있다.

 

export default {
//인스턴스 옵션 속성
  name: 'App',
  components: {
    HelloWorld
  }
}

이곳에 data() 나 methods 속성이 들어가게 된다. Vue.createApp으로 인스턴스를 생성하는 것이 되는 곳이다.