[Vue] Vue와 DOM 상호작용

youngseo·2022년 6월 11일

새로배운 내용

목록 보기

31/42

Vue와 DOM 상호작용

1. Vue 인스턴스 생성

1-1 애플리케이션 인스턴스

모든 Vue 애플리케이션은 다음 기능을 사용하여 새 애플리케이션 인스턴스를 생성 하여 시작합니다.createApp

import { createApp } from 'vue'
const app = createApp({
  /* root component options */
})

1-2 루트 구성 요소

createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용됩니다

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)

1-3 앱 마운트

응용 프로그램 인스턴스는 해당 .mount()메서드가 호출될 때까지 아무 것도 렌더링하지 않습니다.

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

app.mount('#app')

1-4 DOM 내 루트 구성 요소 템플릿

빌드 단계 없이 Vue를 사용할 때 마운트 컨테이너 내부에 직접 루트 구성 요소의 템플릿을 작성할 수 있습니다.

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

2. 보간 및 데이터 바인딩

vue의 data는 반응성을 가지게 됩니다. 이 데이터를 {{}}를 통해 화면에 출력할 수 있습니다.

3. "v-bind", 데이터 속성 바인딩하기

{{}} 이중 줄괄호 구문에서 속성을 사용할 수는 없습니다. 대신 v-bind를 이용할 수 있습니다.

※단, 값이 단순히 boolean속성인 경우 v-bind에서 약간 다르게 존재를 하게 됩니다.

4. 보간구문에서의 JS표현식

간단한 JS코드를 실행할 수가 있습니다.{{outputGoal()}}
- 연산을 할 수도 있습니다. {{ 1 + 1 }}
- Math메소드를 이용해 랜덤값을 구할 수도 있습니다.{{Math()}}
JS표현식을 작성할 수 있습니다.
- if문을 사용할 수는 없지만 대신 삼항연산자를 사용할 수 있습니다.

5. 메소드와 this

Vue는 methods 안에서 컴포넌트 인스턴스를 항상 참조할 수 있도록 this 값을 자동으로 바인딩합니다. 이렇게 하면 메서드가 이벤트 리스너나 콜백으로 사용될 때, 올바른 this 값을 유지하게 됩니다. 화살표 함수를 사용해서 methods를 정의하면 Vue가 적절한 this 값을 바인딩하지 못합니다. 따라서 methods를 정의할 때, 화살표 함수를 사용하지 않도록 합니다.