[Vue3] Vue Instance 생성

SHINYEJI·2023년 11월 2일

Front-End

목록 보기

1/12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

    <div id="app">
        <h1>{{hello}}</h1>  <!-- {{}} 콧수염, 데이터를 출력해준다-->
    </div>

    <script>
        const {createApp, ref} = Vue;  // createApp: vue intance를 만드는 함수 / ref:반응형 객체를 만드는 함수

        const app = createApp({  // createApp으로 vue를 생성할 때 객체를 넘겨줘야함
            setup(){
                const hello = ref('Hello,Vue');  // 반응형 참조변수로 hello를 만들어야 함으로 ref를 사용한다.
                return {hello};                  // hello를 반환하여 #app에서 hello 변수를 사용할 수 있게 함
            }
        });
        
        app.mount("#app");              // #app인 것과 묶어줌
    </script>
</body>
</html>

🔴 Text Interpolation

이중 괄호(콧수염 구문)는 데이터 바인딩의 기본적인 형태로 데이터를 일반 텍스트로 해석한다.
아래 코드는 해당 구성 요소의 인스턴스(vue)의 msg 속성 값으로 대체되어 속성이 변경될 때만다 업데이트 된다.

	<p> {{ data }} </p>

SHINYEJI

[Vue3] Vue Instance 생성

Front-End

🔴 Text Interpolation

0개의 댓글

관련 채용 정보