프로그래머스 데브코스 - 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 |