<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }

        });

    </script>

</body>
</html>

절차 
1. new Vue() 인스턴스 안에 el, data 를 정의하고 인스턴스 생성 
2. <div id='app'>{{message}}</div> 해당 돔에 인스턴스 부착됨
3. data 속성의 message 값 Hello Vue.js!가 {{message}}와 치환되서 화면에 출력

유효 범위
1.뷰 라이브러리 파일 로딩 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

2. 인스턴스 객체 생성
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }

        });

3.  el:'#app' Vue 객체 스코프에 인스턴스 연결 
    <div id="app">
        {{message}}
    </div>

4. 인스턴스 내용 ( data )이 화면 요소로 변환 
    <div id="app">
        Hello Vue.js!
    </div>

5. 변환된 요소가 화면에 출력


 

 

'코드 정리' 카테고리의 다른 글

Vue.js 실전_ 연습 순서  (0) 2023.11.08
스프링 시큐리티_구글 소셜로그인_DB연결  (0) 2023.11.01
local=> Git  (0) 2023.11.01
파이썬 기초_1  (1) 2023.10.24
파일질라_리눅스_자바서비스_vmware_ftp  (1) 2023.10.06

+ Recent posts