[JavaScript 문법] 44일차: Vue.js 기초

Vue.js란?

Vue.js는 사용자 인터페이스를 구축하기 위한 진보적인 JavaScript 프레임워크입니다. Vue.js는 간결한 API와 컴포넌트 기반 아키텍처를 제공하여 개발자가 효율적으로 애플리케이션을 작성할 수 있도록 도와줍니다. Vue.js의 주요 개념으로는 Vue 인스턴스, 템플릿 문법, 데이터 바인딩 등이 있습니다.

Vue 인스턴스

Vue 인스턴스는 Vue 애플리케이션의 핵심 객체로, 데이터, 템플릿, 메서드 등을 정의합니다. Vue 인스턴스를 생성하려면 new Vue를 사용합니다.

예제: Vue 인스턴스 생성

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

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>

위 예제에서는 new Vue를 사용하여 Vue 인스턴스를 생성하고, #app 요소에 연결합니다. data 객체의 message 속성은 템플릿에서 바인딩되어 렌더링됩니다.

템플릿 문법

Vue 템플릿은 HTML과 유사한 구문을 사용하여 데이터와 DOM을 바인딩합니다. 템플릿 내에서는 Mustache 구문({{ }})을 사용하여 데이터를 렌더링할 수 있습니다.

예제: 템플릿 문법

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

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

위 예제에서는 message 속성과 이를 뒤집은 문자열을 렌더링합니다. computed 속성을 사용하여 reversedMessage를 정의하고, 템플릿에서 바인딩합니다.

데이터 바인딩

Vue.js는 양방향 데이터 바인딩을 지원하여 데이터와 뷰를 동기화합니다. 이를 통해 모델 상태가 변경되면 뷰가 자동으로 업데이트됩니다.

예제: 양방향 데이터 바인딩

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>

위 예제에서는 v-model 디렉티브를 사용하여 입력 필드와 message 속성을 양방향으로 바인딩합니다. 입력 필드의 값이 변경될 때마다 message 속성이 업데이트되고, 이는 템플릿에 반영됩니다.

디렉티브

Vue.js 디렉티브는 DOM 요소에 특수한 반응형 동작을 적용하기 위한 특수 속성입니다. 주요 디렉티브로는 v-bind, v-if, v-for, v-on 등이 있습니다.

v-bind 디렉티브

v-bind 디렉티브는 요소의 속성을 동적으로 바인딩합니다.

예제: v-bind

<div id="app">
  <a v-bind:href="url">Visit Vue.js</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>

v-if 디렉티브

v-if 디렉티브는 조건부 렌더링을 수행합니다.

예제: v-if

<div id="app">
  <p v-if="seen">Now you see me</p>
  <button v-on:click="toggleSeen">Toggle</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      seen: true
    },
    methods: {
      toggleSeen() {
        this.seen = !this.seen;
      }
    }
  });
</script>

v-for 디렉티브

v-for 디렉티브는 배열 또는 객체를 반복하여 렌더링합니다.

예제: v-for

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, text: 'Learn JavaScript' },
        { id: 2, text: 'Learn Vue.js' },
        { id: 3, text: 'Build something awesome' }
      ]
    }
  });
</script>

v-on 디렉티브

v-on 디렉티브는 이벤트 리스너를 등록합니다.

예제: v-on

<div id="app">
  <button v-on:click="sayHello">Say Hello</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    methods: {
      sayHello() {
        alert('Hello, Vue.js!');
      }
    }
  });
</script>

결론

Vue.js는 사용자 인터페이스를 구축하기 위한 강력한 프레임워크로, 컴포넌트 기반 아키텍처와 양방향 데이터 바인딩을 제공합니다. 이번 글에서는 Vue 인스턴스, 템플릿 문법, 데이터 바인딩, 디렉티브에 대해 배웠습니다. 다음 글에서는 Angular 기초에 대해 알아보겠습니다.

다음 글에서 만나요!