본문으로 건너뛰기
Advertisement

Vue.js 기초

Vue.js는 사용자 인터페이스를 만들기 위한 진보적인(Progressive) 자바스크립트 프레임워크입니다.

1. Vue의 특징​

  • 접근성: HTML, CSS, JS 기초만 있다면 바로 시작할 수 있을 만큼 쉽습니다.
  • 반응형(Reactivity): 데이터가 변경되면 화면이 자동으로 업데이트되는 강력한 반응형 시스템을 갖추고 있습니다.
  • 컴포넌트 기반: UI를 독립적이고 재사용 가능한 조각으로 나눌 수 있습니다.

2. 선업형 렌더링 (Composition API)​

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

3. 디렉티브 (Directives)​

Vue는 v- 접두사가 붙은 특스 속성을 사용하여 템플릿에 로직을 추가합니다.

  • v-if: 조건부 렌더링
  • v-for: 목록 렌더링
  • v-model: 양방향 데이터 바인딩

4. 생태계​

상태 관리를 위한 Pinia, 라우팅을 위한 ** Vue Router**등을 통해 대규모 어플리케이션을 구축할 수 있습니다.

다음 장에서는 Vue의 풀스택 프레임워크인 Nuxt에 대해 알아봅니다.

Advertisement
Advertisement