Vue.js는 MVVM 아키텍처를 기반으로 한 프레임워크로, 데이터와 뷰를 자동으로 동기화하여 개발자의 작업을 간소화합니다. 아래에서는 Vue.js의 기본적인 사용 방법과 주요 기능들을 살펴보겠습니다.

Vue.js 시작하기

먼저 HTML 파일에 Vue.js를 포함시킵니다. 다음 코드를 통해 CDN을 통해 Vue를 로드할 수 있습니다.

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

이제 간단한 예제를 만들어 보겠습니다. 아래 코드는 "Hello World!"라는 메시지를 화면에 표시하는 예제입니다.

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

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
  });
</script>

위 코드에서 {{ message }} 부분은 Vue가 자동으로 데이터 바인딩을 처리하여 화면에 출력됩니다.

데이터 변경하기

브라우저 콘솔에서 Vue 인스턴스의 데이터를 직접 변경할 수 있습니다. 아래 명령어를 실행하면 화면에 표시되는 내용도 함께 업데이트됩니다.

app.message = '변경된 메시지!';

템플릿 표현식

Vue 템플릿에서는 다양한 표현식을 사용할 수 있습니다. 아래는 몇 가지 예제입니다.

<div id="app">
  <p>이름: {{ name }}</p>
  <p>나이: {{ age + 5 }}</p>
  <p>좋아요 수: {{ likes > 10 ? '많음' : '적음' }}</p>
</div>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      name: 'John',
      age: 30,
      likes: 15
    }
  });
</script>

디렉티브 사용하기

Vue는 여러 디렉티브를 제공하여 DOM 조작을 쉽게 할 수 있도록 도와줍니다.

v-text와 v-html

v-text는 태그 내부에 텍스트를 삽입하고, v-html은 HTML 코드를 그대로 렌더링합니다.

<div id="app">
  <p v-text="message"></p>
  <p v-html="link"></p>
</div>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: '텍스트 메시지',
      link: '<a href="https://vuejs.org">Vue 공식 사이트</a>'
    }
  });
</script>

v-if와 v-show

조건에 따라 요소를 표시하거나 숨길 수 있습니다.

<div id="app">
  <p v-if="isVisible">이 문장은 보입니다.</p>
  <p v-else>이 문장은 숨깁니다.</p>
  <p v-show="isVisible">v-show로 제어됩니다.</p>
</div>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      isVisible: true
    }
  });
</script>

v-bind (속성 바인딩)

태그의 속성을 동적으로 설정할 수 있습니다.

<a v-bind:href="url">클릭하세요</a>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      url: 'https://example.com'
    }
  });
</script>

v-on (이벤트 리스너)

사용자 이벤트를 처리할 수 있습니다.

<button v-on:click="increaseCount">클릭!</button>
<p>{{ count }}</p>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increaseCount() {
        this.count++;
      }
    }
  });
</script>

리스트 렌더링

배열이나 객체를 반복하여 요소를 생성할 수 있습니다.

- {{ item.name }}

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      items: [
        { name: '사과' },
        { name: '바나나' },
        { name: '체리' }
      ]
    }
  });
</script>

키값 추가하기

v-for를 사용할 때 각 요소에 고유한 키 값을 지정하면 성능이 향상됩니다.

<div v-for="(item, index) in items" :key="index">{{ item.name }}</div>

연습문제: 이미지 슬라이드

다음 코드는 버튼 클릭 시 이미지가 순환하고, 이미지를 클릭하면 해당 정보가 팝업으로 나타납니다.

![]()
시작



const app = new Vue({
el: '#app',
data: {
images: [
{ url: 'image1.jpg', info: '첫 번째 이미지' },
{ url: 'image2.jpg', info: '두 번째 이미지' },
{ url: 'image3.jpg', info: '세 번째 이미지' }
],
currentIndex: 0
},
computed: {
currentImage() {
return this.images[this.currentIndex].url;
}
},
methods: {
startSlide() {
this.timer = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.images.length;
}, 1000);
},
stopSlide() {
clearInterval(this.timer);
alert(this.images[this.currentIndex].info);
}
}
});