Template
λ·°μ ν νλ¦Ώμ HTML, CSS λ±μ λ§ν¬μ μμ±κ³Ό λ·° μΈμ€ν΄μ€μμ μ μν λ°μ΄ν° λ° λ‘μ§μ μ°κ²°νμ¬ μ¬μ©μκ° λΈλΌμ°μ μμ λ³Ό μ μλ ννμ HTMLλ‘ λ³νν΄μ£Όλ μμ±μ΄λ€.
ES5μμ λ·° μΈμ€ν΄μ€μ template μμ± νμ©
μ±κΈ νμΌ μ»΄ν¬λνΈ μ²΄κ³μ
<template>
μ½λ νμ©
ν νλ¦Ώ μμ±μ λ€μκ³Ό κ°μ΄ λκ°μ§ λ°©λ²μΌλ‘ μ¬μ©ν μ μλ€.
1. ES5μμ λ·° μΈμ€ν΄μ€μ template μμ± νμ©
μ΄μ μμ μμ μ£Όλ‘ μ¬μ©ν μμ κ°μ μ½λμ΄λ€.
ν
νλ¦Ώμ μ¬μ©μκ° λ³Ό μλ μμ§λ§ λΌμ΄λΈλ¬λ¦¬ λ΄λΆμ μΌλ‘ template μμ±μμ μ μν λ§ν¬μ
+ λ·° λ°μ΄ν°λ₯Ό κ°μ λ κΈ°λ°μ render()
ν¨μλ‘ λ³ννλ€. λ³νλ render()
ν¨μλ μ΅μ’
μ μΌλ‘ μ¬μ©μκ° λ³Ό μ μκ² νλ©΄μ 그리λ μν μ νλ€.
template μμ±μ μ¬μ©νμ§ μμ κ²½μ°
template μμ±μ μ¬μ©νμ§ μμ κ²½μ°μλ μ°μ <h3>{{message}}</h3>
μ½λλ₯Ό νλ©΄μ νμνκ³ , μΈμ€ν΄μ€κ° μμ±λλ©΄ messageμ κ°μ dataμμ± μμ κ°μΌλ‘ μΉννλ€.
template μμ±μ μ¬μ©ν κ²½μ°
templateμμ±μ μ¬μ©νλ©΄ μ무 λ΄μ©μ΄ μλ€κ° μΈμ€ν΄μ€κ° μμ±λλ©΄ <h3>{{message}}</h3>
μ½λκ° νλ©΄μ μΆκ°λμ΄ νμλλ€.
2. μ±κΈ νμΌ μ»΄ν¬λνΈ μ²΄κ³μ <template>
μ½λ νμ©
<template>
μ½λ νμ©λ°μ΄ν° λ°μΈλ©
λ°μ΄ν° λ°μΈλ©μ HTML νλ©΄ μμλ₯Ό λ·° μΈμ€ν΄μ€μ λ°μ΄ν°μ μ°κ²°νλ κ²μ μλ―Ένλ€.
{{}}
λ·° μΈμ€ν΄μ€μ λ°μ΄ν°λ₯Ό HTML νκ·Έμ μ°κ²°νλ κ°μ₯ κΈ°λ³Έμ μΈ ν μ€νΈ μ½μ λ°©μμ΄λ€.
data μμ±μ message κ°μ {{message}}
μ μ°κ²°νμ¬ νλ©΄μ λνλ΄λ μ½λμ΄λ€. μ¬κΈ°μ data μμ±μ message κ°μ΄ λ³κ²½λλ©΄ λ·° λ°μμ±μ μν΄ νλ©΄μ΄ μλμΌλ‘ κ°±μ λλ€.
λ§μ½μ λ·° λ°μ΄ν°κ° λ³κ²½λμ΄λ κ°μ λ°κΎΈκ³ μΆμ§ μλ€λ©΄ v-once
μμ±μ μ¬μ©νλ©΄λλ€.
v-bind
v-bind
λ id, class, style λ±μ HTML μμ± κ°μ λ·° λ°μ΄ν° κ°μ μ°κ²°ν λ μ¬μ©νλ λ°μ΄ν° μ°κ²° λ°©μμ΄λ€.
λ€μκ³Ό κ°μ΄ v-bind μμ±μΌλ‘ μ§μ ν HTML μμ±μ΄λ props μμ±μμ μ λμ¬λ‘ λΆμ¬μ£Όλ©΄λλ€.
μ½λλ₯Ό μ€ννλ©΄ λ°μ΄ν°μ κ°μ΄ κ° <p>
μ μ°κ²°λμ΄ νλ©΄μ λνλλ€.
μ¬κΈ°μ v-bind:
λ¬Έλ²μ :
λ‘ κ°μνν μ μλ€. μλ₯Ό λ€μ΄ v-bind:id
λ :id
μ κ°μ λμμ νλ€.
μλ°μ€ν¬λ¦½νΈ ννμ
λ·°μ ν
νλ¦Ώμμλ μλ°μ€ν¬λ¦½νΈ ννμμ μΈ μ μλ€. {{}}
μμ μλ°μ€ν¬λ¦½νΈ ννμμ λ£μΌλ©΄ λλ€.
μλ°μ€ν¬λ¦½νΈ ννμμ μ¬μ©ν λ μ£Όμν΄μΌν μ μ΄ μλ€.
μλ°μ€ν¬λ¦½νΈ μ μΈλ¬Έκ³Ό λΆκΈ° ꡬ문μ μ¬μ©ν μ μλ€.
볡μ‘ν μ°μ°μ μΈμ€ν΄μ€ μμμ μ²λ¦¬νκ³ νλ©΄μλ κ°λ¨ν μ°μ° κ²°κ³Όλ§ νμν΄μΌνλ€.
computed
cpmputed μμ±μ λ°μ΄ν° μ°μ°λ€μ μ μνλ μμμ΄λ€.
볡μ‘ν κ³μ°μ computed
(λ°μ΄ν° μμ±μ μλμΌλ‘ κ³μ°ν΄μ£Όλ μμ±)λ₯Ό μ΄μ©νμ¬ λνλ΄λ κ²μ΄ μ’λ€. HTMLμ μ΅μ’
μ μΌλ‘ ννλ κ°λ§ λνλ΄κ³ , λ°μ΄ν°μ κΈ°λ³Έμ°μ°μ μλ°μ€ν¬λ¦½νΈ λ¨μμ ν¨μΌλ‘μ¨ νλ©΄λ¨ μ½λμ κ°λ
μ±μ λμΌ μ μκΈ° λλ¬Έμ΄λ€. λν λ°λ³΅μ μΈ μ°μ°μ λν΄μλ 미리 κ³μ°νμ¬ μ μ₯ν΄ λκ³ , νμν λ λ°λ‘ λΆλ¬μ€λ caching ν¨κ³Όλ₯Ό μ»μ μ μλ€.
μ¦, computed μμ±μ λ€μκ³Ό κ°μ μ₯μ μ κ°μ§κ³ μλ€.
data μμ± κ°μ λ³νμ λ°λΌ μλμΌλ‘ λ€μ μ°μ°νλ€.
caching : λμΌν μ°μ°μ λ°λ³΅ν΄μ νμ§ μκΈ° μν΄ μ°μ°μ κ²°κ³Ό κ°μ 미리 μ μ₯νκ³ μλ€κ° νμν λ λΆλ¬μ€λ λμ ( μ’ μ λμ )
computed vs methods
methods μμ±μ νΈμΆν λλ§ ν΄λΉ λ‘μ§μ΄ μνλκ³ , computed μμ±μ λμ λ°μ΄ν° κ°μ΄ λ³κ²½λλ©΄ μλμ μΌλ‘ μνλλ€. μ¦, μλμ μΌλ‘ λ°μ΄ν°λ₯Ό κ°±μ νλμ§, λ₯λμ μΌλ‘ λ°μ΄ν°λ₯Ό κ°±μ νλμ§μ μ°¨μ΄μ΄λ€.
methodsμμ±μ μνν λλ§λ€ μ°μ°μ νκΈ° λλ¬Έμ λ³λλ‘ μΊμ±μ νμ§ μμ§λ§, computed μμ±μ λ°μ΄ν°κ° λ³κ²½λμ§ μλ ν λ°μ΄ν°λ₯Ό μΊμ±νκ³ μλ€κ°, νμν λ λ°νν΄ μ€λ€. λ°λΌμ, 볡μ‘ν μ°μ°μ λ°λ³΅ μνν΄μ νλ©΄μ λνλ΄μΌ νλ€λ©΄, computed μμ±μ μ΄μ©νλ κ²μ΄ μ±λ₯λ©΄μμ λ ν¨μ¨μ μ΄λ€.
computed μμ±μ μ’
μ λμμ λ°λΌ μ μ₯(μΊμ±)λκΈ° λλ¬Έμ Date.now()
μ κ°μ΄ μ무곳μλ μμ‘΄νμ§ μλ μμ±μ μ λλ‘ updateλμ§ μλλ€.
computed vs watch
watch μμ±μ λ°μ΄ν° λ³νλ₯Ό κ°μ§ν΄ μλμΌλ‘ νΉμ λ‘μ§μ μννλ€. computed μμ±κ³Ό μ μ¬νμ§λ§ computed μμ±μ λ΄μ₯ APIλ₯Ό νμ©ν κ°λ¨ν μ°μ°μ μ ν©ν λ°λ©΄, watch μμ±μ λ°μ΄ν° νΈμΆκ³Ό κ°μ΄ μκ°μ΄ μλμ μΌλ‘ λ§μ΄ μλͺ¨λλ λΉλκΈ° μ²λ¦¬μ μ ν©νλ€.
Directive
λ·° λλ ν°λΈλ HTML νκ·Έ μμ v-μ λμ¬
λ₯Ό κ°μ§λ λͺ¨λ μμ±λ€μ μλ―Ένλ€. μμμ λ€λ£¬ v-bind
μμ±λ λλ ν°λΈμ ν΄λΉλλ€. λλ ν°λΈλ νλ©΄μ μμλ₯Ό λ μ½κ² μ‘°μνκΈ° μν΄ μ¬μ©νλ κΈ°λ₯μΌλ‘ λ·°μ λ°μ΄ν° κ°μ΄ λ³κ²½λμμ λ νλ©΄μ μμλ€μ΄ λ³κ²½λ λ°μ΄ν° κ°μ λ°λΌ κ°±μ λλ€. νλ©΄μ μμλ₯Ό μ§μ μ μ΄ν νμμμ΄ λ·°μ λλ ν°λΈλ₯Ό νμ©ν΄ νλ©΄ μμλ₯Ό μ‘°μν μ μλ€.
λλ ν°λΈ μ’ λ₯
μν
v-if
μ§μ ν λ·° λ°μ΄ν° κ°μ μ°Έ, κ±°μ§ μ¬λΆμ λ°λΌ ν΄λΉ HTML νκ·Έλ₯Ό νλ©΄μ νμνκ±°λ νμνμ§ μλλ€. (ν΄λΉ νκ·Έ μμ ν μμ )
v-for
μ§μ ν λ·° λ°μ΄ν°μ κ°μλ§νΌ ν΄λΉ HTML νκ·Έλ₯Ό λ°λ³΅ μΆλ ₯νλ€.
v-show
v-ifμ μ μ¬νκ² λ°μ΄ν°μ μ§μ μ¬λΆμ λ°λΌ ν΄λΉ HTML νκ·Έλ₯Ό νλ©΄μ νμνκ±°λ νμνμ§ μλλ€. (display:none
css λ₯Ό μ£Όμ΄ μ€μ νκ·Έλ λ¨μ μκ³ , νλ©΄μμΌλ‘λ§ λ³΄μ΄μ§ μμ)
v-bind
HTML νκ·Έμ κΈ°λ³Έ μμ±κ³Ό λ·° λ°μ΄ν° μμ± μ°κ²°
v-on(@)
νλ©΄ μμμ μ΄λ²€νΈλ₯Ό κ°μ§νμ¬ μ²λ¦¬ν λ μ¬μ©
v-on:
μ κ°μνν λ¬Έλ²μ @
μ΄λ€.
v-model
formμμ μ£Όλ‘ μ¬μ©λλ μμ±μΌλ‘, νΌμ μ
λ ₯ν κ°μ λ·° μΈμ€ν΄μ€μ λ°μ΄ν°μ μ¦μ λκΈ°ννλ€. νλ©΄μ μ
λ ₯λ κ°μ μ μ₯ν΄ μλ²μ 보λ΄κ±°λ watch
μ κ°μ μμ±μ μ΄μ©ν΄ μΆκ° λ‘μ§μ μνν μ μλ€. <input>
, <select>
, <textarea>
νκ·Έμλ§ μ¬μ©κ°λ₯
μ΄λ²€νΈ μ²λ¦¬
λ·° νλ©΄μμ λ°μν μ΄λ²€νΈλ₯Ό μ²λ¦¬νκΈ° μν΄ v-on
λλ ν°λΈμ methods
μμ±μ νμ©νλ€.
λ€μ μμ λ v-on:click λλ ν°λΈλ₯Ό μΆκ°νμ¬ ν΄λ¦ λ²νΌ ν΄λ¦μ clickBtn
λ©μλκ° μ€νλλ€.
λ€μκ³Ό κ°μ΄ μΈμλ₯Ό λκΈΈ μ μλ€. μΆκ°μ μΌλ‘ event μΈμλ₯Ό μ΄μ©ν΄ νλ©΄ λ μ΄λ²€νΈμ μ κ·Όν μ μλ€.
function(event){}
μ κ°μ΄ event μΈμλ₯Ό μ μνλ©΄ ν΄λΉ λ μμμ μ΄λ²€νΈ κ°μ²΄μ μ κ·Όν μ μλ€.
Last updated
Was this helpful?