Vue instance

MVVM Pattern

: 마크업 언어로 구현하는 GUI의 개발을 Back-end 로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함

 

• View : 우리 눈에 보이는 부분 = DOM
• Model : 실제 데이터 = JSON
• View Model (Vue) 

"서로가 서로를 모름 == 독립성 증가, 적은 의존성"

 

 

 

 

View Model

- View를 위한 Model

- View와 연결되어 Action을 주고받음

- Model이 변경되면 View Model도 변경되고 바인딩된  View도 변경됨

- View에서 사용자가 데이터를 변경하면  View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨

 

 

View Instance === 1개의 객체

-> 아주 많은 속성과 메서드를 이미 가지고 있고, 이러한 기능들을 사용하는 것

 

 

 

 

Vue Instance 생성

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만들고 시작

<script>
   const app = new Vue({
   		// 옵션
   })
</script>

-> Vue 인스턴스를 생성할 때는 Options 객체를 전달해야 함

 

[참고] 생성자 함수

동일한 구조의 객체를 여러개 만들고 싶다면? -> new 연산자 사용

// 함수 이름은 반드시 대문자로 시작
function Person(name, age, phone) {
  this.name = name
  this.age = age
  this.phone = phone
}

// 생성자 함수를 사용할 때는 반드시 new 연산자를 사용
const 조승우 = new Person('승우', 42, 010-1234-5678)

 

 

 

 

Options : el ( element )

: Vue instance와 DOM을 연결(mount)하는 옵션

- View와 Model을 연결하는 역할, HTML id 혹은 class와 마운트 가능

 

=> Vue instance와 연결되지 않은 DOM 외부는 Vue의 영향을 받지 않음 (속성 및 메서드 사용 불가)

<div id="app"><div>

<script>
   const app = new Vue({
       el: '#app'
   })
</script>

 

 

 

Options : data

 

: Vue instance의 데이터 객체 혹은 인스턴스 속성

• 객체 또는 함수의 형태로 작성
• 컴포넌트를 정의할 때 data는 데이터를 반환하는 함수로 선언
• 화살표 함수 사용 X

<div id="app">
  <h2> {{ msg }} </h2>
<div>

<script>
   const app = new Vue({
       el: '#app',
       data: {
         msg: 'Hello'
       }
   })
</script>

 

 

 

 

Options : methods

: Vue instance에 추가할 메소드

• 화살표 함수 사용 X
• 모든 메소드는 자동으로 this 컨텍스트를  Vue 인스턴스에 바인딩 함

<div id="app">
  <h2> {{ count }} </h2>
<div>

<script>
   const app = new Vue({
       el: '#app',
       data: {
         count: 1
       },
       methods: {
         plus: function() {
           this.count++;
         }
       }
   })
</script>

 

 

 

Options : template

: Vue 인스턴스의 마크업으로 사용할 문자열 템플릿

• template은 마운트된 엘리먼트를 대체함
• Vue 옵션에 render 함수가 있으면 템플릿 속성은 무시