1.Vue.js 기본

• MVVM 패턴 이란 Model - View - View Model 패턴을 말한다.
• 화면의 요소를 제어하는 코드 , 데이터를 제어하는 로직을 분리시켜 코드를 직관적이게 만든다.
• View 는 사용자가 보는 화면이다.
• DOM 은 HTML 정보를 담은 Tree
• DOM Listener 는 DOM 의 변경사항에 반응하여 로직을 실행시키는 장치이다.
• Model 은 데이터를 담은 용기
• VM 이라고 불리는 View Model 은 View 와 Model 의 중간에 있으며, DOM Listener 와 Data binding 을 가진다.

---

예를 들면, Click . KeyUp KeyPress 같은 이벤트가 발생시에 DOM LIstener 가 이를 감지하고 기술된 로직을 실행한다.

 

여기서 Data Binding 이 작동하며, Data Binding 에 의해 Model 의 정보를 가져와 즉각적으로 데이터를 갱신시킨다.

 

---

 

Component 기반 프레임워크이다.

• Vue 는 화면을 Tree 구조의 컴포넌트 기반으로 나누는 프레임워크이다.
• 하나의 판 (Instance) 에 Component 를 조합시켜 화면을 완성시키며 각 노드는 부모 - 자식 관계로 성립된다.
• 이는 사용한 컴포넌트를 다른 인스턴스에 붙일 수 있으며, 각자의 코드가 분리되어 재사용성과 직관성을 가져다준다.
• Vue 는 Angular 의 양방향 데이터 바인딩, React 의 단방향 데이터 흐름 을 결합시켜 놓았다.
• 양방향 데이터 바인딩 : 화면의 값과 Model 데이터 값이 동기화 되어서 화면이나 Model 중 하나라도 변경이 일어나면 즉각적으로 반대 쪽도 변경시킨다.
• 단방향 데이터 흐름 : 컴포넌트 간의 데이터는 언제나 상위 -> 하위 컴포넌트로 이동해야만한다.
• 빠른 화면 렌더링(그리는 것) 을 위해 React 의 가상 DOM 방식을 채용하여 DOM Element 의 추가, 삭제가 일어나면 화면을 전부 다시 그리지 않고, 정의한 방식대로 화면을 그린다. 이로 인해 성능 부하가 감소하여 일반 렌더링보다 더욱 빠르고 생산적이다.

 

---

 

간단하게 실행하여 보기

vue create proj-name -> npm i -gvue init webpack-simple proj-name -> npm i -g

 

• App 컴포넌트는 Root Component 로서 main.js 에 기술 되고 App.vue 에 기술된 <div> 에 마운팅 된다.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

/// App.vue

<template>
  <div id="app">
    <BasicComp></BasicComp>
  </div>
</template>

<script>
import BasicComp from "@/components/BasicComp";

export default {
  components: {BasicComp}
}
</script>

<style>

</style>

• SingFileComponent 에서 name 속성으로 마운팅 할 DOM Elment 의 Selector 을 기재한다.
• data 속성은 반드시 function 타입이여야 하며 Key 로 값을 끌어오므로 object를 리턴해야만 한다.

<template>
  <div id="app">
    <BasicComp></BasicComp>
  </div>
</template>

<script>
import BasicComp from "@/components/BasicComp";

export default {
  components: {BasicComp}
}
</script>

<style>

</style>

/// BasicComp.vue

<template>
  <div id="basic">
    {{greeting}}
  </div>
</template>

<script>
export default {
  // Single File Component 에서는 name 속성으로 Component 이름을 정한다.
  name:'basic',
  // Vue Data Must Be Function
  data() {
      // 넘겨줄 데이터는 템플릿 기호에서 Key로 인식한다. 그러므로  Key : Value 를 가진 Object 를 리턴해야만한다.
    return {greeting:'Hello Basic!'}
  }

}
</script>

<style scoped>

</style>