1. Vue.js란 무엇인가? + 컴포넌트 이해하기

1. Vue란 무엇인가?

Vue의 특징

1. 선언적 렌더링

 - 선언만해도 템플릿에 사용하면 자동으로 값이 바뀌고 렌더링된다.

- 자바스크립트로만 하려면 값을 바꾸고 싶을때마다 다시 변수에 할당해야한다.

2. 반응성

- 값이 바뀌었을때 자동으로 업데이트 된다.

 

핵심 기능

1. 바인딩 v-bind 디렉티브

- dom의 속성에 데이터를 바인딩해준다.

- 템플릿의 태그에서 :로 시작하는건 다 바인딩

2. v-on 이벤트 헨들링

- 템플릿의 태그에서 @로 시작하는건 다 이벤트

3. v-model 양방향 바인딩 

4. v-if

5. v-for

6. v-html

7. v-once

- 한번만 데이터가 변경되고 반응하지 않게 하는 기능

---

2. 컴포넌트 이해하기

컴포넌트

- 재사용 모듈

- UI 재사용 한다

 

문자열 컴포넌트

- 안씀 template 의 태그 하나하나를 문자로써서 변수에 저장한다음 불러쓰는거임

문자열 컴포넌트

Single-File Components: SFC

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

- 보다시피 Vue SFC는 HTML, CSS 및 JavaScript 이 3개를 하나로 자연스럽게 합친 것

- 실무에서 쓰는 컴포넌트. 

- 싱글 파일 컴포넌트를 사용하기 위해서는 Vite 또는 Vue CLI ( Webpack ) 같은 Build 도구가 필요하다.

- Vite로 개발하기 위해서는 npm으로 프로젝트를 관리해야 한다.

- 이렇게 컴포넌트를 사용하면 UI를 재사용 할 수 있다.

---