[Vue.js] 템플릿에서 JavaScript 표현식 활용: 심층 가이드 및 실무 활용 팁

 

1. 서론

Vue.js는 HTML 기반 템플릿 시스템을 사용하여 UI를 구성하고 데이터 바인딩을 통해 컴포넌트 데이터와 연결하는 프론트엔드 JavaScript 프레임워크입니다. 템플릿 내에서 JavaScript 표현식을 활용하면 데이터 조작, 동적 콘텐츠 생성, 조건부 렌더링 등 다양한 기능을 구현할 수 있습니다.

본 가이드에서는 Vue.js 템플릿에서 JavaScript 표현식을 사용하는 방법에 대해 심층적으로 다룹니다. 기본적인 표현식부터 조건부 표현, 반복, 문자열 조작, 심지어 동적 DOM 생성까지 실제 코드 예시와 함께 자세히 살펴보겠습니다. 또한, JavaScript 표현식 활용 시 주의해야 할 사항과 실제 개발에서 활용할 수 있는 실용적인 팁을 제공하여 개발자 여러분의 Vue.js 숙련도를 한 단계 높일 수 있도록 돕겠습니다.

2. 기본 표현식

Vue.js 템플릿 내에서 다음과 같은 기본적인 JavaScript 표현식을 사용할 수 있습니다.

• 산술 연산: +, -, *, /, %
• 비교 연산: ==, !=, >, <, >=, <=
• 논리 연산: &&, ||, !
• 조건부 표현: a ? b : c
• 함수 호출: myFunction(arg1, arg2)

예시:

HTML

{{ 10 + 5 }}  // 15
{{ message === 'hello' }}  // true
{{ items.length > 0 }}  // true
{{ message ? '존재합니다' : '없습니다' }}  // '존재합니다'
{{ Math.random() }}  // 0과 1 사이의 랜덤 값

 

3. 조건부 표현

v-if 지시문과 함께 JavaScript 표현식을 사용하여 조건에 따라 요소를 렌더링할 수 있습니다.

예시:

HTML

<div v-if="isLoggedIn">
  로그인되었습니다.
</div>

<div v-else>
  로그인하지 않았습니다.
</div>

 

4. 반복

v-for 지시문과 함께 JavaScript 표현식을 사용하여 데이터 배열을 반복하고 각 항목에 대한 템플릿을 렌더링할 수 있습니다.

예시:

HTML

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

  

5. 문자열 조작

JavaScript 문자열 메서드를 사용하여 템플릿 내 문자열을 조작할 수 있습니다.

예시:

HTML

{{ message.toUpperCase() }}  // 'HELLO'
{{ message.toLowerCase() }}  // 'hello'
{{ message.split(' ').join('-') }}  // 'hello-world'

 

6. 동적 DOM 생성

템플릿 내 JavaScript 표현식을 사용하여 동적으로 DOM 요소를 생성할 수 있습니다.

예시:

HTML

<template>
  <div>
    <button v-for="n in 10" :key="n" @click="createListItem">
      {{ n }}
    </button>
    <ul id="list">
      </ul>
  </div>
</template>

<script>
export default {
  methods: {
    createListItem() {
      const listItem = document.createElement('li');
      listItem.textContent = '새로운 항목';
      document.getElementById('list').appendChild(listItem);
    }
  }
}
</script>