IT/development

[Vue.js] 인스턴스와 생성자

알 수 없는 사용자 2023. 7. 26.

인스턴스

뷰 인스턴스는 뷰 개발 시 필수로 생성해야 하는 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue test</title>
</head>
<body>
		<!-- sample Vue.js code -->
    <div id="app">
				<!-- vue 데이터 바인딩 표현식(콧수염이라고도 함) -->
        {{ message }}
    </div>
		<!-- vue.js cdn 주소 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
				//생성자 함수를 통해 인스턴스를 만들어서 변수 vm에 치환
        let vm = new Vue({
            el: '#app', // body태그안의 div의 id명과 일치해야 제대로 vue 작동
            data: { //데이터는 이 속성으로 세팅
                message: 'Hello Vue.js : )'
            }                
        })
        console.log(vm);
    </script>

</body>
</html>

console.log(vm)에 찍힌 vue 인스턴스의 속성과 API들

new Vue({…})로 인스턴스를 만들고 인스턴스에 미리 정의된 속성과 기능들을 사용

크롬 확장프로그램(Vue.js devtools) 설치 시 브라우저에서 Vue 개발을 더 효율적으로 할 수 있음

인스턴스를 div에 붙이면 인스턴스를 적용한 엘리먼트는 Root 컴포넌트가 됨

생성자 함수

일반함수와 구분하기 위해 함수명 앞이 대문자로 되어 있고 new 연산자를 통해 인스턴스를 생성

생성자 함수에 속성, 기능들을 미리 정의해 놓고 인스턴스를 만들어서 미리 정의된 속성과 기능 사용

reference: https://www.inflearn.com/course/age-of-vuejs/dashboard

Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의

Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., [사진] Vue.js 시작하기,Ag

www.inflearn.com

저작자표시 비영리 변경금지 (새창열림)

'IT > development' 카테고리의 다른 글

[Vue.js] Props(부모 -> 자식) (0)	2023.07.26
[Vue.js] 컴포넌트(재사용 유용) (0)	2023.07.26
[Vue.js] 컴포넌트끼리의 데이터 전달(feat. props, event emit) (0)	2023.07.26
[JavaScript] 동등연산자(==, !=)와 일치연산자(===, !==) (0)	2023.07.24
[Vue.js] ajax로 데이터 조회 예제(feat. axios) (18)	2023.07.23

[Vue.js] 인스턴스와 생성자

인스턴스

생성자 함수

'IT > development' 카테고리의 다른 글

댓글

티스토리툴바