RIEN😚
이상한 나라의 개발자
RIEN😚
전체 방문자
오늘
어제
  • 분류 전체보기 (125)
    • Algorithm (68)
      • 알고리즘 (0)
      • Baekjoon (8)
      • 프로그래머스 (55)
      • HackerRank (5)
    • Android (30)
      • Project (1)
      • Error (2)
      • Studio (1)
      • Android (26)
    • Kotlin (6)
    • CS (4)
      • 네트워크 (2)
      • 데이터베이스 (2)
    • Front End (5)
      • React (1)
      • VUE (3)
      • Project (0)
      • 기타 (1)
    • 기록 (11)
      • 회고록 (6)
      • TIL (5)

블로그 메뉴

  • Github🔥
  • 포트폴리오🌹

공지사항

인기 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
RIEN😚
Front End/VUE

[Vue 공식 문서 뽀시기-2] 어플리케이션 & 컴포넌트 인스턴스

Front End/VUE

[Vue 공식 문서 뽀시기-2] 어플리케이션 & 컴포넌트 인스턴스

2022. 5. 11. 15:59
728x90
반응형

프로그래머스 데브코스 - Vue

 

시작하기 | Vue.js

시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를

v3.ko.vuejs.org

 

어플리케이션 인스턴스 생성하기

Vue 객체 생성하기

먼저 Vue의 어플리케이션 인스턴스를 생성해 보겠습니다.

Vue 객체는 Vue object의 createApp 메서드를 이용해서 생성할 수 있습니다.

cosnt app = Vue.createApp({
	data() {
    	return {
        	msg: 'Hello World'
        }
    }
})

createApp에는 앞에서 보았던 data, methods 등과 같은 옵션들이 포함될 수 있으며, 말 그대로 option이기 때문에 필수적인 요소는 아닙니다.

 

createApp에 전달된 옵션들(data, methods 등)은 Root 컴포넌트를 구성하는데 사용되며,

이렇게 생성된 Vue 어플리케이션을 HTML에 마운트 시켜주어야 화면에서 볼 수 있습니다.

이 때, mount()메서드를 사용합니다.

 

예를 들어, HTML의 id가 app인 element에 해당 Vue 어플리케이션을 마운트 시키고자 한다면 아래와 같이 작성할 수 있습니다.

app.mount('#app')
🌹 요소를 선택할 때는 CSS 선택자를 사용하며, 되도록 id를 사용합시다!

 

여기까지 되었다면 Vue 어플리케이션과 HTML이 연결되었습니다.😊

 

그럼 mount말고 추가적으로 createApp에 의해 생성된 Vue 어플리케이션 인스턴스가 제공하는 API에 대해서 조금 더 알아보겠습니다.🙌🏻

 

Application API

가장 자주 사용되는 대표적인 3개의 API만 보도록 하겠습니다.

 

1. mount

어플리케이션 루트 컴포넌트의 template을 렌더링 한다.

전달된 DOM element의 innerHTML을 templage으로 치환합니다.

app.mount('#app')

 

2. component

전역 컴포넌트를 등록하거나 검색할 때 사용
// 전역 컴포넌트 추가
app.component('my-component', {
	/* ... */
})
// 컴포넌트 검색
const myComponent = app.component('my-component')
🌹 component의 첫 인자는 component의 이름으로 사용됩니다.

 

3. use

사용할 플러그인을 등록하는데 사용
import plugin from './Plugin'

app.use(plugin)
자세한 사용방법은 추후에!!🔥

Application API는 이외에도 여러 가지가 있으며, 필요할 때 찾아 사용하시면 됩니다.😊

 

저희는 Vue 어플리케이션 인스턴스를 생성하였습니다.

이제 이 인스턴스가 어떤 단계를 거쳐 생성되고 소멸되는지 Vue 라이프사이클에 대해 알아보겠습니다.😆

반응형

'Front End > VUE' 카테고리의 다른 글

[Vue 공식 문서 뽀시기-3] Vue 라이프 사이클  (0) 2022.05.11
[Vue 공식 문서 뽀시기-1] Vue 맛보기  (0) 2022.05.10
  •  
  • 어플리케이션 인스턴스 생성하기
  • Application API
'Front End/VUE' 카테고리의 다른 글
  • [Vue 공식 문서 뽀시기-3] Vue 라이프 사이클
  • [Vue 공식 문서 뽀시기-1] Vue 맛보기
RIEN😚
RIEN😚
안드로이드 / 코틀린 독학으로 취업하자!

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.