Vue 란?
Vue는 사용자 인터페이스 개발을 간결하고 효율적으로 하기 위해 만들어진 프레임워크이다.
컴포넌트 기반 아키텍처를 활용한 재사용성 높은 UI설계
간단한 템플릿 구문을 사용하여 선언적 렌더링을 통한 설계
반응형 데이터 바인딩을 통한 동적인 데이터 처리
를 특징으로 뽑을 수 있다.
핵심은 데이터와 DOM을 자동으로 연결하는 반응형 시스템이다.
DOM에 대한 설명은 다른 글에 게시해뒀다.
기본 원리 및 작동방식
일반적으로 HTML,JavaScript,CSS로 구성되며, Vue 인스턴스 또는 컴포넌트를 사용하여 화면을 조작한다.
각 컴포넌트는 자체 템플릿(template), 데이터와 메서드(script)를 가지고 컴포넌트를 재사용하거나 부모-자식 관계로 조합할 수 있다.
Vue Single File Component(SFC)
빌드 도구를 사용하는 대부분의 vue 프로젝트에서는 HTML과 유사한 SFC라는 파일 형식을 사용하여 Vue 컴포넌트를 작성한다.
HTML,JavaScript,CSS를 한곳에서 관리하게 되는데 템플릿, 로직 및 스타일을 하나의 파일로 묶어낸 특수한 파일 형식이다.
기본적인 구조는 다음과 같다
<template>
<!-- HTML: UI 구조 정의 -->
</template>
<script>
// JavaScript: 데이터 및 로직 관리
</script>
<style>
/* CSS: 스타일 정의 */
</style>
1️⃣ template UI구조
template 태그 안에서 HTML 코드를 작성하며, 컴포넌트의 UI를 정의하는 역할을 한다.
이 안에서 Mustache(머스타치 이중 중괄호)와 디렉티브(v-if, v-for, @click)등을 사용하여 동적으로 데티어를 표시한다.
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">클릭하세요</button>
</div>
</template>
Mustache 문법 ({{ message }})
디렉티브 (@click 이벤트 리스너 사용)
2️⃣ script 데이터 및 로직
script태그에서는 JavaScript 코드가 들어가며, 컴포넌트의 데이터, 메서드, 라이프사이클등을 정의한다.
<script>
export default {
data() {
return {
message: "안녕하세요, Vue!"
};
},
methods: {
changeMessage() {
this.message = "반갑습니다!";
}
}
};
</script>data() → 반응형 데이터 정의
methods → 버튼 클릭 시 message 변경
3️⃣ style 스타일(CSS)
style 태그 안에는 컴포넌트의 스타일을 정의한다.
특정 컴포넌트 내부에서만 스타일을 적용하려면 scoped 속성을 추가하면 된다.
<style scoped>
h1 {
color: blue;
}
button {
background-color: lightgray;
border: none;
padding: 10px;
cursor: pointer;
}
</style>scoped 속성 → 이 스타일이 현재 컴포넌트에만 적용됨
h1, button 등의 스타일 지정
