다메카솔

개요

Vue.js는 JavaScript 프레임워크입니다. 

표준 HTML, CSS, JavaScript로 만들어져 있으며, 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공하여 효율적으로 사용자 인터페이스를 개발할 수 있도록 도와줍니다.

Vue의 가장 큰 특징 두가지는 선언적 렌더링(Declarative Rendering)과 반응성(Reactivity)입니다.

선언적 렌더링(Declarative Rendering)

Vue는 표준 HTML을 템플릿 문법과 함께 확장하여 Javascript 상태에 기반한 HTML 결과물을 만들어냅니다.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

반응성(Reactivity)

Vue는 JavaScript의 상태변화를 추적하고, 변화가 발생하였을 때 DOM을 효과적으로 업데이트 할 수 있습니다.

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

진보적인 프레임워크

Vue는 프론트엔드 개발에 필요한 공통적인 특징들을 지원하는 프레임워크이며 생태계입니다.

Vue는 유연하고 점진적으로 채택할 수 있도록 설계되었습니다.

사용 사례에 따라 Vue를 다양한 방식으로 사용할 수 있습니다.

• 빌드 단계 없이 정적 HTML 향상 모든 페이지에 웹 구성 요소로 포함
• 단일 페이지 애플리케이션(SPA)
• 풀스택/서버 측 렌더링(SSR)
• Jamstack/정적 사이트 생성(SSG)
• 데스크탑, 모바일, WebGL, 터미널까지 타겟팅

싱글 파일 컴포넌트

Vue 프로젝트에서 단일 파일 구성 요소(*.vue 파일이라고도 함, SFC로 약칭)라는 HTML과 유사한 파일 형식을 사용하여 Vue 구성 요소의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일로 캡슐화합니다.

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

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

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

API 스타일

Vue 구성 요소는 옵션 API와 구성 API의 두 가지 API 스타일로 작성할 수 있습니다.

Options API

Options API를 사용하여 데이터, 메소드, 마운트와 같은 옵션의 개체를 사용하여 구성 요소의 논리를 정의합니다. 옵션으로 정의된 속성은 구성 요소 인스턴스를 가리키는 내부 함수에 노출됩니다.

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

Composition API

구성 API를 사용하면 가져온 API 기능을 사용하여 구성 요소의 논리를 정의할 수 있습니다. SFC에서는 일반적으로 <script setup>과 함께 Composition API를 사용합니다. setup 속성은 더 적은 상용구로 컴포지션 API를 사용할 수 있도록 하는 컴파일 타임 변환을 수행하도록 Vue에 지시하는 힌트입니다. 예를 들어 <script setup>에서 선언된 import와 최상위 변수/함수는 템플릿에서 직접 사용할 수 있습니다.

다음은 정확히 동일한 템플릿을 사용하지만 대신 Composition API와 <script setup>을 사용하는 동일한 구성 요소입니다.

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

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

참고

Vue.js 레퍼런스 문서https://vuejs.org/guide/introduction.html#the-progressive-framework