001. Vue.js CDN을 통해 Vue.js 체험 및 뷰 속성 개념

Hello Vue.js 출력하기

CDN : https://cdn.jsdelivr.net/npm/vue/dist/vue.js

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue sample</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        // 인스턴스 생성
        new Vue({
            el:"#app",
            data:{
                message : "Hello Vue.js!"
            }
        })

    </script>
</body>
</html>

Vue인스턴스를 새로 생성한 후 data에 message 값을 넣어

위쪽 id="app"엘리먼트를 통해 {{message}}값을 전달합니다.

여기서 뷰 인스턴스 생성자

new Vue( ) 일때 Vue( )

Vue.js 라이브러리를 로딩하고 나면 접근 가능합니다.

사용하는 이유는 필요한 기능들을 미리 정의해 놓고, 사용자가 재정의 하여 편리하게 사용하기 위해입니다.

생성자란?

자주사용하는 옵션과 기능들을 미리저장
기존에 포함된 기능과 더불어 기존 기능을 확장하여 사용
객체 지향 프로그래밍의 객체 정의 방식

뷰 인스턴스 옵션 속성

data, el, template 등을 의미

message 라는 새로운 속성 추가 ex)<div id = "app">{{message}}</div>

속성	설명
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods	화면 로직 제어와 관계된 메소드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다.
created	뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.

뷰 인스턴스의 유효 범위

뷰 인스턴스 옵션 속성 적용과정

1. 뷰 라이브러리 파일 로딩

2. 인스턴스 객체 생성

3. 특정 화면 요소에 인스턴스를 붙임

4. 인스턴스 내용이 화면 요소로 변환 ←← 변환된 화면 요소를 사용자가 최종 확인.

저작자표시

'WEB > Vue.js' 카테고리의 다른 글

004. 상 하위 컴포넌트 관계 (0)	2019.11.21
003. 뷰 컴포넌트(Component) (0)	2019.11.21
002. Vue의 라이프 싸이클 (0)	2019.11.21
000. Vue.js란? (1)	2019.11.20

001. Vue.js CDN을 통해 Vue.js 체험 및 뷰 속성 개념