VUE 개요

2022-01-13
Vue 개요.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_Hellow_Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="main">
        <!--
            vue라는 인스턴스 메모리를 구성한다.
            data라는 속성 내부에 위치한 sTitle의 값을 전달 받아서 HTML의 p 엘리먼트 값으로 변환하여 표기한다.
        -->
        <p>{{sTitle}}</p>
        <!--
            {{}} 머시태그(코수염 태그) 사용:
            vue의 가장 중요한 기능은 어플리케이션을 실행하면서 변수 또는 함수의 결과값을 HTML 문서 내의 지정된 곳에 변환하여 출력하기 위한 도구. (렌더링)
        -->
    </div>
    <script>
        // 인스턴스를 생성 (메모리 공간)
        new Vue({
            // 아이디 선택자가 "main"의 요소인 div 엘리먼트와 앱을 연결하여 구동하겠다고 선언
            el : "#main",
            data : {
                // {{sTitle}}로 데이터 값을 전달
                sTitle : "안녕하세요"
            }
        })
        // 뷰의 앱 구동 방법 : 뷰 앱을 처음부터 시작하려면 뷰 객체를 생성해야 함. (new Vue())
        // 이때 HTML의 엘리먼트 중에서 선택자를 구성하여 지정된 요소를 가져온다. (getElementById('아이디값'))
        // data 속성 : 뷰 내부에서 데이터를 변수명으로 선언하여 관리하는 장소. 객체나 함수를 선언하여 데이터를 읽고 저장하는 일을 담당하는 곳
    </script>
</body>
</html>
REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미