제 4장 Vue.js 기초 이론

2021.08.17 - [Front/Vue.js] - 제 3장 Vue.js 둘러보며 친해지기!

저번 시간에 이래저래 필요한 것들에 대해서 알아보았다.
이제는 조금 더 파고 들어서 관련  내용들을 이해할  수 있도록 공부해보자.

• Vue.js는 SPA(Single Page Application) Framework

• Vue Instance는 MVVM패턴의 View Model에 해당
  • var vm = new Vue({ /* options */ }) 형태 
  • 참고 형태(View, Model)
    • View는 vm.$el // The View  형태 
    • vm.$data // The Model  형태
  • View(DOM)와 MOdel(Javascript Object) 사이의 통신을 가능하게 해주는 역할.
    • binder를 가지고 있어 View와 Model을 서로 맺어줌(바인딩).
      • Data Binding이 자동적으로  가능한 이유
• 위의 그림에서 DOM Listeners는 클릭 이벤트 같은 것.
  Data Binidings는 Directives를 통해 자바스크립트 객체를 바인딩해 뷰에 들어갈수 있도록 해준다.
• Directives는 <div v-text="message"></div>  이런 형태에서 v-text 가 directive이다.
  cf. https://012.vuejs.org/guide/#Directives

Data Binding 흐름설명

 

소스로 예제를 한번 보자.

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done ? 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn Vue.js'
      }
    ]
  }
})

위의 소스는 jsfiddle에서 좀 더 보면 좋겠다.
https://jsfiddle.net/yyx990803/yMv7y/

Vue Instance Life Cycle Hook

 

Debuging시 유용 한 Crome 확장 앱
Crome : Vue.js devtools