뷰의 ν…œν”Œλ¦Ώ 문법

뷰의 ν…œν”Œλ¦Ώ λ¬Έλ²•μ΄λž€ 뷰둜 화면을 μ‘°μž‘ν•˜λŠ” 방법을 μ˜λ―Έν•©λ‹ˆλ‹€. ν…œν”Œλ¦Ώ 문법은 크게 데이터 바인딩과 λ””λ ‰ν‹°λΈŒλ‘œ λ‚˜λ‰©λ‹ˆλ‹€.

데이터 바인딩

데이터 바인딩은 λ·° μΈμŠ€ν„΄μŠ€μ—μ„œ μ •μ˜ν•œ 속성듀을 화면에 ν‘œμ‹œν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. κ°€μž₯ 기본적인 데이터 바인딩 방식은 μ½§μˆ˜μ—Ό κ΄„ν˜Έ(Mustache Tag)μž…λ‹ˆλ‹€.

<div>{{ message }}</div>
new Vue({
  data: {
    message: 'Hello Vue.js'
  }
})

div νƒœκ·Έμ— μ½§μˆ˜μ—Ό κ΄„ν˜Έλ₯Ό μ΄μš©ν•΄ λ·° μΈμŠ€ν„΄μŠ€μ˜ message 속성을 μ—°κ²°ν–ˆμŠ΅λ‹ˆλ‹€. μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ 화면에 Hello Vue.jsλΌλŠ” μ½”λ“œκ°€ 좜λ ₯λ©λ‹ˆλ‹€.

λ””λ ‰ν‹°λΈŒ

λ””λ ‰ν‹°λΈŒλŠ” 뷰둜 ν™”λ©΄μ˜ μš”μ†Œλ₯Ό 더 μ‰½κ²Œ μ‘°μž‘ν•˜κΈ° μœ„ν•œ λ¬Έλ²•μž…λ‹ˆλ‹€. ν™”λ©΄ μ‘°μž‘μ—μ„œ 자주 μ‚¬μš©λ˜λŠ” 방식듀을 λͺ¨μ•„ λ””λ ‰ν‹°λΈŒ ν˜•νƒœλ‘œ μ œκ³΅ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ μ•„λž˜μ™€ 같이 νŠΉμ • 속성 값에 따라 ν™”λ©΄μ˜ μ˜μ—­μ„ ν‘œμ‹œν•˜κ±°λ‚˜ ν‘œμ‹œν•˜μ§€ μ•Šμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

<div>
  Hello <span v-if="show">Vue.js</span>
</div>
new Vue({
  data: {
    show: false
  }
})

μœ„μ˜ μ½”λ“œλŠ” showλΌλŠ” 데이터 속성 값에 따라 Vue.js ν…μŠ€νŠΈκ°€ 좜λ ₯λ˜κ±°λ‚˜ λ˜μ§€ μ•ŠλŠ” μ½”λ“œμž…λ‹ˆλ‹€. 또 λ‹€λ₯Έ 사둀λ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>
new Vue({
  data: {
    items: ['shirts', 'jeans', 'hats']
  }
})

v-for λ””λ ‰ν‹°λΈŒλ₯Ό ν™œμš©ν•˜λ©΄ 데이터 μ†μ„±μ˜ 개수만큼 ν™”λ©΄μ˜ μš”μ†Œλ₯Ό λ°˜λ³΅ν•˜μ—¬ 좜λ ₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λͺ©λ‘μ„ ν‘œμ‹œν•΄μ•Ό ν•  λ•Œ μœ μš©ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€.

이외에도 자주 μ‚¬μš©λ˜λŠ” λ””λ ‰ν‹°λΈŒλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  • v-bind
  • v-on
  • v-model