Vue.js 템플릿 완벽 분석: 데이터 바인딩부터 디렉티브 활용까지

vue.js 로고

Vue.js 템플릿 시스템의 주요 기능과 예제를 소개하겠습니다.

• 텍스트 보관법:

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return { message: "Hello, Vue!" }
  }
}
</script>

 

 

• HTML 출력:

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

<script>
export default {
  data() {
    return { htmlContent: "<strong>Bold text</strong>" }
  }
}
</script>

 

 

• 속성 바인딩:

<template>
  <img :src="imageUrl" alt="Vue logo">
</template>

<script>
export default {
  data() {
    return { imageUrl: "https://vuejs.org/images/logo.png" }
  }
}
</script>

 

 

• JavaScript 표현식:

<template>
  <p>{{ isEven ? 'Even' : 'Odd' }}</p>
</template>

<script>
export default {
  data() {
    return { number: 4 }
  },
  computed: {
    isEven() { return this.number % 2 === 0 }
  }
}
</script>

 

 

• [디렉티브] v-if (조건부 렌더링):

<template>
  <p v-if="isVisible">Now you see me</p>
</template>

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

 

 

• [디렉티브] v-for (리스트 렌더링):

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" }
      ]
    }
  }
}
</script>

 

 

 

• [디렉티브 v-model (양방향 데이터 바인딩):

<template>
  <input v-model="inputText">
  <p>You typed: {{ inputText }}</p>
</template>

<script>
export default {
  data() {
    return { inputText: "" }
  }
}
</script>

 

 

 

이러한 템플릿 기능들을 조합하여 동적이고 반응적인 UI를 구축할 수 있습니다.

 

[Vue] 뷰 템플릿 사용

 

Vue.js 앱 생성