개요

Vue.js는 진입 장벽이 낮고 배우기 쉬운 프로그레시브 자바스크립트 프레임워크입니다. 이 퀵 스타트 가이드에서는 30분 안에 간단한 웹 애플리케이션을 만들면서 Vue.js의 기본 개념을 배우게 됩니다. 초보자도 쉽게 따라 할 수 있도록 단계별로 설명하고 예제 코드를 제공합니다.

설치 및 설정

Vue.js를 시작하려면 CDN을 이용하거나 npm/yarn을 통해 설치할 수 있습니다. 이 가이드에서는 CDN을 사용하여 빠르게 시작하는 방법을 보여드리겠습니다.

HTML 파일에 다음 코드를 추가하여 Vue.js를 포함시킵니다:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

기본적인 Vue.js 구조 이해하기

Vue.js는 `new Vue()`를 사용하여 인스턴스를 생성합니다. 이 인스턴스는 데이터, 메서드, 라이프사이클 훅 등을 포함합니다.

new Vue({
  el: '#app', // Vue 인스턴스가 제어할 DOM 요소 선택자
  data: {
    message: 'Hello Vue!'
  }
});
        

위 코드에서 `el`은 Vue 인스턴스가 관리할 HTML 요소를 지정하고, `data`는 Vue 인스턴스가 사용할 데이터를 정의합니다. `#app` 아이디를 가진 요소 안의 내용이 Vue.js에 의해 관리됩니다.

데이터 바인딩

Vue.js의 가장 중요한 기능 중 하나는 데이터 바인딩입니다. `{{ message }}` 와 같은 문법을 사용하여 데이터를 HTML에 표시할 수 있습니다.

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

이벤트 처리

Vue.js는 `v-on` 지시어를 사용하여 이벤트를 처리할 수 있습니다. 예를 들어, 버튼 클릭 이벤트를 처리하려면 다음과 같이 합니다.

<button v-on:click="handleClick">Click Me</button>
        

methods: {
  handleClick: function() {
    this.message = 'Button clicked!';
  }
}
        

조건부 렌더링

Vue.js는 `v-if` 지시어를 사용하여 조건부로 요소를 렌더링할 수 있습니다. 예를 들어, 특정 조건이 충족될 때만 요소를 표시하려면 다음과 같이 합니다.

<p v-if="showParagraph">This paragraph is shown only if showParagraph is true.</p>
        

마무리 및 추가 학습

이 퀵 스타트 가이드를 통해 Vue.js의 기본적인 개념을 배우셨습니다. 더 자세한 내용은 공식 문서를 참조하세요. Vue.js는 강력하고 유연한 프레임워크이며, 웹 개발의 다양한 분야에서 사용될 수 있습니다. 앞으로 더 많은 기능과 예제를 배우면서 Vue.js를 마스터해 보세요!

Vue.js 공식 문서