30. Introduction to Components

내용

이 강의에서는 Vue.js의 컴포넌트에 대해 설명합니다.
컴포넌트는 Vue 애플리케이션을 구성하는 재사용 가능한 템플릿으로, 자체 데이터, 메소드, 계산된 속성 및 감시자를 포함할 수 있습니다. 주요 내용은 다음과 같습니다:

컴포넌트 정의: 컴포넌트는 헤더, 푸터, 콘텐츠와 같이 애플리케이션을 구성하는 부분입니다.
복잡한 애플리케이션의 경우, 템플릿을 별도의 파일로 분리하여 관리하는 것이 이상적입니다.
컴포넌트 생성: component 함수를 사용하여 컴포넌트를 생성합니다.
이 함수는 Vue 인스턴스가 마운트되기 전에 호출되어야 합니다.
컴포넌트 이름 규칙: 컴포넌트 이름에는 kebab-case(소문자 및 하이픈 사용) 또는 PascalCase(모든 단어의 첫 글자 대문자)를 사용할 수 있습니다.
이름 충돌을 피하기 위해 네임스페이스(프로젝트 고유 접두사)를 사용하는 것이 좋습니다.
컴포넌트 구성: 컴포넌트는 데이터, 계산된 속성, 메소드 등을 포함할 수 있으며, 각 컴포넌트는 고유한 상태를 가집니다.
컴포넌트 사용: 컴포넌트를 사용하기 위해 Vue 인스턴스나 다른 컴포넌트 내에서 해당 컴포넌트의 태그를 작성합니다.
컴포넌트의 장점: 코드를 분리하여 관리할 수 있고, 컴포넌트는 재사용 가능합니다.

이 강의는 컴포넌트를 통해 Vue 애플리케이션을 효율적으로 관리하고 확장하는 방법에 대해 설명하며, 컴포넌트가 애플리케이션의 복잡성을 다루는 데 어떻게 도움이 되는지를 강조합니다.

index.html

<!DOCTYPE>
<html>

<head>
   <title>VueJS Course</title>
   <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
   <hello></hello>
   <hello></hello>
   <hello></hello>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.global.min.js"></script>
<script src="app.js"></script>
</body>

</html>

app.js

let vm = Vue.createApp({
   
})

vm.component('hello', {
   template: `<h1>{{ message }}</h1>`,
   data() {
      return {
         message: 'Hello World!'
      }
   }
})

vm.mount('#app')

main.css

body{
   font-size: 20px;
   font-family: sans-serif;
}
.red{
   color: red;
}

# 30. Introduction to Components

# 내용

30. Introduction to Components

내용