Vue 공부 - 1

목차

• 목차
• Vue란
• 핵심 기능
• 프로그레시브 Framework
• SFC(Single-File Component)
• API 스타일
  • option API
  • Composition API

Vue란

• 사용자 인터페이스를 구축하기 위한 Javascript 프레임워크
• 표준 HTML, CSS 및 JavaScript를 기반으로 구축된 컴포넌트 기반 프로그래밍 모델을 제공

핵심 기능

• 선언적 렌더링(Declarative Rendering): 표준 HTML을 템플릿 문법으로 확장하여 상태 기반으로 화면에 출력될 HTML을 선언적으로 작성가능
• 반응성(Reactivity): 상태(State) 변경을 추적하고, 변경 발생 시 DOM을 효율적으로 자동 업데이트

프로그레시브 Framework

• 빌드 과정 없이 정적 HTML에 적용
• 모든 페이지에 웹 컴포넌트 추가
• SPA(Single-Page Application)
• Full Stack / SSR(Server-Side Rendering)
• Jamstack / SSG(Static-Site-Generation)
• 데스크톱, 모바일 WebGL 또는 터미널을 대사응로 하는 경우

SFC(Single-File Component)

• 빌드 도구를 ㅅ사용하는 대부분의 Vue 프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트라는 파일 형식을 사용하여 Vue Component를 작성
• Javascript, HTML, CSS를 하나의 파일에 캡슐화

API 스타일

• Vue component는 option API, Composition API 두가지 스타일로 작성할 수 있다.

option API

• 옵션 API를 사용하여 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직을 정의
• 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출

  <script>
    export default {
      // data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
      data() {
        return {
          count: 0
        }
      },

      // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
      // 템플릿 내에서 이벤트 리스너로 바인딩 될 수 있음.
      methods: {
        increment() {
          this.count++
        }
      },

      // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
      // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
      mounted() {
        console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
      }
    }
  </script>

  <template>
    <button @click="increment">숫자 세기: {{ count }}</button>
  </template>

Composition API

• composition API를 사용하는 경우, import해서 가져온 API 함수들을 사용하여 component의 로직을 정의
• 일반적으로 <script setup>과 함께 사용

출처) Vue.js 공식 문서