Vue.js 소개 및 기본 개념

1. Vue.js 소개

 

Vue.js는 경량의 점진적 프레임워크로, 사용자 인터페이스를 구축하는 데 사용됩니다. Vue는 주요 라이브러리 부분만으로도 충분히 활용할 수 있지만, 복잡한 애플리케이션을 개발할 때는 다양한 도구와 라이브러리들을 포함하는 생태계를 제공합니다.

 

주요 특징

 

• 컴포넌트 기반 구조: 재사용 가능한 컴포넌트를 통해 복잡한 UI를 효율적으로 관리할 수 있습니다.

• 반응형 데이터 바인딩: 데이터와 DOM이 자동으로 동기화되어 개발자 경험을 향상시킵니다.

• 유연성: 프로젝트의 크기와 복잡도에 맞게 필요한 기능만 선택적으로 사용할 수 있습니다.

• 친화적인 학습 곡선: 기본적인 HTML, CSS, JavaScript 지식만으로 쉽게 학습할 수 있습니다.

 

2. Vue.js 기본 개념

 

2.1 Vue 인스턴스

 

Vue 애플리케이션의 모든 것은 Vue 인스턴스에서 시작합니다. Vue 인스턴스를 생성하여 특정 DOM 요소에 연결하고, 데이터와 메소드를 정의합니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

2.2 템플릿 문법

 

Vue는 HTML 기반 템플릿 문법을 사용하여 DOM에 데이터를 바인딩합니다. Vue의 템플릿 문법은 선언적 렌더링을 가능하게 합니다.

 

• Mustache 구문: 데이터를 HTML로 바인딩하는 구문입니다.

<span>{{ message }}</span>

 

• 디렉티브: v- 접두사를 사용하는 특수 속성으로, HTML 요소에 Vue의 반응형 기능을 제공합니다.

• v-bind: 속성 바인딩

• v-model: 양방향 데이터 바인딩

• v-if, v-else, v-show: 조건부 렌더링

• v-for: 리스트 렌더링

 

2.3 데이터 바인딩과 이벤트 처리

 

Vue는 데이터 바인딩과 이벤트 처리를 통해 UI와 데이터의 동기화를 쉽게 할 수 있습니다.

 

• 데이터 바인딩: Vue 인스턴스의 데이터 속성을 HTML에 바인딩합니다.

<span>{{ message }}</span>

• 이벤트 처리: v-on 디렉티브를 사용하여 이벤트를 처리할 수 있습니다.

<button v-on:click="reverseMessage">Reverse Message</button>

 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

 

2.4 컴포넌트

 

컴포넌트는 Vue의 핵심 기능으로, 재사용 가능한 UI 블록을 생성합니다. 컴포넌트를 통해 복잡한 애플리케이션을 모듈화하여 관리할 수 있습니다.

 

• 전역 등록:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

 

• 로컬 등록:

var Child = {
  template: '<div>A custom component!</div>'
};

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  }
});

 

2.5 Vue 인스턴스의 생명주기

 

Vue 인스턴스는 생성부터 소멸까지 여러 생명주기 단계를 거칩니다. 각 단계에서 특정 이벤트가 발생하며, 이 이벤트를 통해 특정 시점에 로직을 실행할 수 있습니다.

 

• 생명주기 훅: created, mounted, updated, destroyed 등 다양한 훅을 통해 애플리케이션의 생명주기 동안 특정 작업을 수행할 수 있습니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function () {
    console.log('Vue instance is created');
  }
});

요약

 

• Vue 인스턴스: Vue 애플리케이션의 기본 단위로, 데이터와 DOM 요소를 연결합니다.

• 템플릿 문법: 선언적 렌더링을 위한 HTML 기반 문법입니다.

• 데이터 바인딩: Vue의 반응형 데이터 바인딩으로 데이터와 UI를 동기화합니다.

• 컴포넌트: 재사용 가능한 UI 블록을 통해 애플리케이션을 모듈화합니다.

• 생명주기: Vue 인스턴스의 생성부터 소멸까지의 단계로, 각 단계에서 특정 로직을 실행할 수 있습니다.