Intro to Vue.js
What, Why, and How
1. What is Vue.js?
a progressive framework for building user interfaces
1. Front End
2. SPA (Single Page Application)
λ¨μΌ νμ΄μ§λ‘ ꡬμ±λ μΉ μ΄ν리μΌμ΄μ
νλ©΄μ΄λ μμ νμν λ°μ΄ν°λ₯Ό μλ²μ¬μ΄λμμ HTMLμΌλ‘ μ λ¬λ°μ§ μκ³ (μλ²μ¬μ΄λ λ λλ§ X), νμν λ°μ΄ν°λ§ μλ²λ‘λΆν° JSONμΌλ‘ μ λ¬ λ°μ λμ μΌλ‘ λ λλ§
client side rendering!
λͺ¨λ HTMLμ ν΄λΌμ΄μΈνΈκ° κ°κ³ μκ³ μλ²μ¬μ΄λμλ νμν λ°μ΄ν°λ₯Ό μμ²νκ³ JSONμΌλ‘ λ°κΈ° λλ¬Έμ κΈ°μ‘΄μ μ΄ν리μΌμ΄μ μ λΉν΄ νλ©΄μ ꡬμ±νλ μλκ° λΉ λ₯΄λ€
μ₯μ
νλνλ νλ©΄ μ 체λ₯Ό λ λλ§ν νμκ° μκΈ° λλ¬Έμ νλ©΄μ΄λμ΄ λΉ λ₯΄λ€.
νλ©΄μ νμν λΆλΆμ λ°μ΄ν°λ§ λ°μμ λ λλ§ νκΈ° λλ¬Έμ μ²λ¦¬κ³Όμ μ΄ ν¨μ¨μ μ΄λ€.
μ μ μ μ μ₯ν΄μ μ¬μ©νκΈ° νΈλ¦¬νλ€.
λ¨μ
μ²μ νλ©΄μ λ‘λ©ν λ, λͺ¨λ νλ©΄μ΄ λ―Έλ¦¬ μ€λΉλμ΄ μμ΄μΌ νκΈ° λλ¬Έμ λ‘λ©μ μκ°μ΄ κ±Έλ¦°λ€.
μ΄ν리μΌμ΄μ μ ꡬννλλ° λ³΄λ€ μκ°μ΄ 걸리며 볡μ‘νλ€.
3. Client Side Rendering

4. MVVN (Model View ViewModel) Pattern

ꡬ쑰
Model
μ΄ν리μΌμ΄μ μμ μ¬μ©λλ λ°μ΄ν°μ κ·Έ λ°μ΄ν°λ₯Ό μ²λ¦¬νλ λΆλΆ
View
μ¬μ©μμμ 보μ¬μ§λ UI λΆλΆμ λλ€.
View Model
Viewλ₯Ό νννκΈ° μν΄ λ§λ Viewλ₯Ό μν Model
Viewλ₯Ό λνλ΄ μ£ΌκΈ° μν Modelμ΄μ Viewλ₯Ό λνλ΄κΈ° μν λ°μ΄ν° μ²λ¦¬λ₯Ό νλ λΆλΆ
λμ μμ
μ¬μ©μμ Actionλ€μ Viewλ₯Ό ν΅ν΄ λ€μ΄μ€κ² λ¨
Viewμ Actionμ΄ λ€μ΄μ€λ©΄, Command ν¨ν΄μΌλ‘ View Modelμ Actionμ μ λ¬
View Modelμ Modelμκ² λ°μ΄ν°λ₯Ό μμ²
Modelμ View Modelμκ² μμ²λ°μ λ°μ΄ν°λ₯Ό μλ΅
View Modelμ μλ΅ λ°μ λ°μ΄ν°λ₯Ό κ°κ³΅νμ¬ μ μ₯
Viewλ View Modelκ³Ό Data Bindingνμ¬ νλ©΄μ λνλ
μ₯μ
MVVM ν¨ν΄μ Viewμ Model μ¬μ΄μ μμ‘΄μ±μ΄ μλ€
λν Command ν¨ν΄κ³Ό Data Bindingμ μ¬μ©νμ¬ Viewμ View Model μ¬μ΄μ μμ‘΄μ± λν μμ€ λμμΈν¨ν΄
κ°κ°μ λΆλΆμ λ 립μ μ΄κΈ° λλ¬Έμ λͺ¨λν νμ¬ κ°λ°ν μ μμ
μΆμ²: https://beomy.tistory.com/43 [beomy]
Vue.js λ MVVM ν¨ν΄μ ViewModel λ μ΄μ΄μ ν΄λΉνλ View λ¨ λΌμ΄λΈλ¬λ¦¬μ΄λ€
5. λ°μν (Reactive)
Vue vs React
곡ν΅μ
κ°μ DOMμ νμ©
λ°μμ μ΄κ³ μ‘°ν© κ°λ₯ν component μ 곡
core library
μλ§ μ§μ€νκ³ μκ³ routing λ° μ μ μνλ₯Ό κ΄λ¦¬νλcompanion library
κ° μμ
+
Vue.js μ λ€λ₯Έ νλ μμν¬μμ λΉκ΅
https://kr.vuejs.org/v2/guide/comparison.html
2. Why Vue.js?
λ°°μ°κΈ° μ½λ€!
$ (μ μ½)
Client Side Rendering
UX ν₯μ
λΉλκΈ° / SPA
νλ μμν¬ (νλ 체μ΄μ¦)μ μ₯μ (DX ν₯μ - κ°λ°μ κ²½ν ν₯μ)
No etc, μ νκ³Ό μ§μ€
μ μ§/보μ μ©μ΄
Communityμ library
3. How?
Setups
VS Code
Vetur
μ€μΉ
Chrome Web Store
Vue.js devtools
λ°μ λ κ°μ§ μ ννκΈ°
image-20200525103628912
CDN
(μ§κΈμ) μμ κ°λ° version μ¬μ©νκΈ°
4-1. data
attribute
data
attributeνλ©΄μ 보μ¬μ§ λ°μ΄ν°λ₯Ό μ μ
ex)
01_data.html
4-2. Interpolation
ex)
02_interpolation.html
4-3. v-text
v-text
Vannila JSμ DomElement.innertextμ κ°μ
v- μ λμ¬λ‘ μμνλ κ²λ€μ λͺ¨λ directive(λͺ λ Ή)λΌκ³ λΆλ₯Έλ€
ex)
03_v-text.html
4-4. v-if
v-if
if νκ°μμ falseμ΄λ©΄ νλ©΄μ λμ€μ§ μλλ€
ex)
04_v-if.html
4-5. v-if
, v-else-if
, v-else
v-if
, v-else-if
, v-else
ex)
05_v-if-elseif-else.html
4-6. v-for
v-for
ex)
06_v-for.html
4-7. v-bind
v-bind
νμ€ HTML μμ±κ³Ό Vue Instanceλ₯Ό μ°λν λ μ¬μ© (+ a)
v-bind:
λ₯Ό μ€μ¬μ:
μΌλ‘ μΈ μ μλ€!
ex)
07_v-bind.html
4-8. methods
attribute
methods
attributeex)
08_methods.html
4-9 v-on
v-on
listenerλ₯Ό λ±λ‘νλ κ²
v-on:
μ μ€μ¬μ@
μΌλ‘ μΈ μ μλ€!
ex)
09_v-on.html
4-10. v-model
v-model
input, select, textarea μμλ§ κ°λ₯ν μλ°©ν₯ binding
v-model
λλ ν°λΈλ₯Ό μ¬μ©νμ¬ νΌ inputκ³Ό textarea μ리먼νΈμ μλ°©ν₯ λ°μ΄ν° λ°μΈλ©μ μμ±ν μ μλ€v-model
μ κΈ°λ³Έμ μΌλ‘ μ¬μ©μ μ λ ₯ μ΄λ²€νΈμ λν λ°μ΄ν°λ₯Ό μ λ°μ΄νΈνλ βsyntax sugarβ λ€v-model
μ λͺ¨λ form μ리먼νΈμ μ΄κΈ°value
μchecked
그리κ³selected
μμ±μ 무μνλ€νμ Vue μΈμ€ν΄μ€ λ°μ΄ν°λ₯Ό μλ³Έ μμ€λ‘ μ·¨κΈ
μ»΄ν¬λνΈμ
data
μ΅μ μμ μλ JavaScriptμμ μ΄κΈ°κ°μ μ μΈν΄μΌν¨!
ex)
10_v-model.html
4-11. v-show
v-show
v-if λ νκ°(t/f) κ° μμ£Ό λ°λμ§ μμ λ μ 리νλ€
=> μ΄κΈ° rendering costκ° μ λ€
v-showλ νκ° (t/f)κ° μμ£Ό λ°λ λ μ’λ€
=> toggle costκ° μ λ€
v-showλ μ΄λ―Έ DOM μ μ€λΉ ν΄λ¨λλ° displayλ§ none μ!
ex)
11_v-show.html
+
Lodash
A modern JavaScript utility library delivering modularity, performance & extras.
CDN
Last updated
Was this helpful?