Vue 인스턴스 생성 및 연결하기

Vue 인스턴스를 생성하고 element에 연결해서 Vue를 이용하여 컴포넌트를 생성하겠습니다.

 

HTML를 이용하여 아래와 같이 화면을 만들 수 있습니다.

하지만 "파워쿠의 블로그"나 "url 주소"의 경우 데이터에 따라 문자를 변경하거나 HTML 구조를 변경할 수 있습니다.

이러한 작업들을 Vue에서 하기 위해서는 Vue 인스턴스를 생성하고 화면에 연결해야 합니다.

<p>파워쿠의 블로그</p>
<a href="https://powerku.tistory.com">이동하기</a>

 

Vue 인스턴스 생성

Vue API 중 createApp를 이용해서 인스턴스를 생성합니다.

createApp 파라미터에는 컴포넌트 옵션이 들어 있는 객체를 넣습니다.

const App = {
  data() {
    return {
      name: '파워쿠의 블로그',
      address: '/https://powerku.tistory.com/'
    }
  }
}

const app = Vue.createApp(HelloVueApp);

 

Vue 인스턴스 연결하기

HTML 화면에 있는 element에 Vue 인스턴스를 연결합니다.

생성한 Vue 인스턴스에 mount API를 실행합니다.

파라미터는 연결할 element 생성자를 입력합니다.

app.mount('#app');

 

Vue 인스턴스를 생성하고 element에 연결하면 Vue를 이용하여 컴포넌트를 생성할 수 있습니다.

 

See the Pen Untitled by powerku (@powerku) on CodePen.