λ·° μΈμŠ€ν„΄μŠ€

μΈμŠ€ν„΄μŠ€λŠ” 뷰둜 κ°œλ°œν•  λ•Œ ν•„μˆ˜λ‘œ 생성해야 ν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€.

μΈμŠ€ν„΄μŠ€ 생성

μΈμŠ€ν„΄μŠ€λŠ” μ•„λž˜μ™€ 같이 생성할 수 μžˆμŠ΅λ‹ˆλ‹€.

new Vue();

μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜κ³  λ‚˜λ©΄ μ•„λž˜μ™€ 같이 μΈμŠ€ν„΄μŠ€ μ•ˆμ— μ–΄λ–€ 속성과 APIκ°€ μžˆλŠ”μ§€ μ½˜μ†” μ°½μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

var vm = new Vue();
console.log(vm);

크둬 개발자 도ꡬλ₯Ό μ—΄κ³  Console νŒ¨λ„μ„ ν™•μΈν•˜λ©΄ μ•„λž˜μ™€ 같은 κ²°κ³Όκ°€ λ‚˜μ˜΅λ‹ˆλ‹€.

μ½˜μ†”μ—μ„œ ν™•μΈν•œ μΈμŠ€ν„΄μŠ€ λ‚΄μš©

이처럼 μΈμŠ€ν„΄μŠ€ μ•ˆμ—λŠ” 미리 μ •μ˜λ˜μ–΄ μžˆλŠ” 속성과 λ©”μ„œλ“œ(API)듀이 있기 λ•Œλ¬Έμ— 이 κΈ°λŠ₯듀을 μ΄μš©ν•˜μ—¬ λΉ λ₯΄κ²Œ 화면을 κ°œλ°œν•΄λ‚˜κ°ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

μΈμŠ€ν„΄μŠ€μ˜ 속성, APIλ“€

μΈμŠ€ν„΄μŠ€μ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” 속성과 APIλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});
  • el : μΈμŠ€ν„΄μŠ€κ°€ κ·Έλ €μ§€λŠ” ν™”λ©΄μ˜ μ‹œμž‘μ  (νŠΉμ • HTML νƒœκ·Έ)
  • template : 화면에 ν‘œμ‹œν•  μš”μ†Œ (HTML, CSS λ“±)
  • data : 뷰의 λ°˜μ‘μ„±(Reactivity)이 반영된 데이터 속성
  • methods : ν™”λ©΄μ˜ λ™μž‘κ³Ό 이벀트 λ‘œμ§μ„ μ œμ–΄ν•˜λŠ” λ©”μ„œλ“œ
  • created : 뷰의 라이프 사이클과 κ΄€λ ¨λœ 속성
  • watch : dataμ—μ„œ μ •μ˜ν•œ 속성이 λ³€ν™”ν–ˆμ„ λ•Œ μΆ”κ°€ λ™μž‘μ„ μˆ˜ν–‰ν•  수 있게 μ •μ˜ν•˜λŠ” 속성

이외에도 각 속성에 λŒ€ν•œ μžμ„Έν•œ μ„€λͺ…은 κ΄€λ ¨λœ μ±•ν„°μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.