📚 Reference

• 참고 자료 1

🔖 Index

파일 구조

• .vue 파일의 구조

<!--HTML 코드-->
<template></template>

<!--JavaScript 코드-->
<script></script>

<!--CSS 코드-->
<style></style>

• <template/>
  • html 태그를 작성하는 부분으로 하나의 vue 파일은 최대 1개의 template을 가진다.
• <script/>
  • 하나의 vue 파일은 최대 하나의 <script>를 가짐 (<script setup>은 제외)
  • script는 es의 module로 실행됨.
  • default export 내용은 vue component의 options 객체이거나 기본 객체
  • composition API 방식에서는 <script setup> 형태로 작성해서 component의 setup()에 작성하던 코드를 작성
• <style/>
  • 컴포넌트에서 사용할 스타일로 하나의 vue에 여러 개의 <style>존재 가능
  • 기본으로 전역이며 현재 component에만 적용할 경우는 scoped 속성 사용 (<style scoped></style>)
• Vue는 스크립트, 마크업, 스타일 시트를 한 파일 안에서 작성할 수 있는 SFC(Single File Component) 문법으로 컴포넌트를 작성할 수 있는 *.vue 파일을 지원한다.
• SFC는 아래와 같은 방식으로 작성할 수 있다.

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

• template 태그 안은 마크업이며 script 안에서 선언한 변수를 사용할 수 있다.
• 마크업 안에서는 style 태그 안에서 작성한 스타일시티도 사용할 수 있다.
• Vue는 기본적으로 컴포넌트 모듈을 객체 형태로 선언하며 props 정의(props), 상태 변수(data), 메소드(methods), 라이프사이클(mounted, updated, beforeUnmount, …), 계산된 값(computed), 특정 값의 업데이트 탐지(watch) 등의 기능을 객체의 속성과 메소드를 사용해서 선언한다.
• 속성별로 역할과 책임 소재가 분명히 나눠져 있다는 점에서 컴포넌트가 어떻게 동작하는지 이해하는 데 도움을 준다.

문제점