Vue.js 지시문의 기본

Vue.js 지시문은 라이브러리에 DOM 요소에 대해 무언가를 하라고 지시하는 마크업의 특수 토큰입니다. Vue에서 제공하는 특수 속성임을 나타내기 위해 v- 접두사가 붙습니다. 지시문은 Vue.js의 핵심 기능 중 하나로, 개발자가 DOM을 효율적으로 조작할 수 있도록 합니다.

이 문서에서는 Vue.js 지시문의 기본을 살펴보고, 가장 일반적으로 사용되는 지시문과 이를 Vue 애플리케이션에서 사용하는 방법을 설명합니다.

Vue.js에서 일반적으로 사용되는 지시어

Vue.js에서 가장 일반적으로 사용되는 지시어는 다음과 같습니다.

v-bind: 하나 이상의 속성 또는 구성 요소 prop을 표현식에 동적으로 바인딩합니다.
v-model: 폼 입력, 텍스트 영역 및 선택 요소에 양방향 데이터 바인딩을 생성합니다.
v-if: 요소나 구성요소를 조건부로 렌더링합니다.
v-else:v-if에 대한 else 블록을 제공합니다.
v-else-if:는 v-if에 대한 else-if 블록을 제공합니다.
v-for: 배열이나 객체를 사용하여 항목 목록을 렌더링합니다.
v-on: 요소에 이벤트 리스너를 연결합니다.
v-show: 표현식에 따라 요소의 가시성을 전환합니다.
v-html: 요소의 내부 HTML을 업데이트합니다.

v-bind: 속성을 동적으로 바인딩

v-bind 지시문은 속성이나 속성을 표현식에 동적으로 바인딩하는 데 사용됩니다. 예를 들어, img 요소의 src 속성을 데이터 속성에 바인딩할 수 있습니다.

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

v-bind의 약어는 단순히 콜론(:)이므로 위의 예는 다음과 같이 다시 쓸 수 있습니다.

<img :src="imageSrc" alt="Dynamic Image" />

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

v-model 지시문은 폼 입력 요소에 양방향 데이터 바인딩을 만드는 데 사용됩니다. 입력 요소와 데이터 속성을 동기화 상태로 유지합니다.

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

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

v-if, v-else-if, 및 v-else 지시어는 요소의 조건부 렌더링에 사용됩니다. 이를 통해 표현식의 평가에 따라 요소를 조건부로 렌더링할 수 있습니다.

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: 목록 렌더링

v-for 지시문은 배열이나 객체를 반복하여 항목 목록을 렌더링하는 데 사용됩니다. 배열의 각 항목은 루프를 사용하여 렌더링할 수 있습니다.

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: 이벤트 처리

v-on 지시문은 이벤트 리스너를 DOM 요소에 첨부하는 데 사용됩니다. 클릭, 입력 등과 같은 사용자 상호 작용을 처리할 수 있습니다.

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

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

v-on의 약어는 at 기호(@)이므로 위의 예는 다음과 같이 다시 쓸 수 있습니다.

<button @click="showAlert">Click Me</button>

v-show: 가시성 전환

v-show 지시문은 표현식에 따라 요소의 가시성을 토글하는 데 사용됩니다. v-if와 달리 DOM에서 요소를 제거하지 않습니다. 단지 display CSS 속성만 토글합니다.

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: HTML 렌더링

v-html 지시문은 요소의 내부 HTML을 업데이트하는 데 사용됩니다. Vue 구성 요소에서 원시 HTML을 렌더링해야 할 때 유용합니다.

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

결론

Vue.js 지시문은 DOM을 조작하고 동적이고 대화형 웹 애플리케이션을 만드는 강력한 방법을 제공합니다. v-bind, v-model, v-if, v-for, v-on, v-show, v-html과 같은 Vue.js 지시문의 기본 사항을 이해하는 것은 모든 Vue 개발자에게 필수적입니다. 이러한 지시문을 숙지하면 Vue.js로 더욱 강력하고 기능이 풍부한 애플리케이션을 빌드할 수 있습니다.

vue 지시어 v-bind v-model v-if v-for v-on v-show v-html 반응성 데이터 이벤트 조건 렌더링