티스토리 뷰

FRONT-END

[Vue] Vue 인스턴스

퉁이리 2021. 8. 31. 15:55
반응형

 

뷰 인스턴스

뷰를 사용하여 개발하기 위해서 필수적으로 생성해야 하는 기본 단위이다.

 

 

뷰 인스턴스 사용법

new Vue(); //인스턴스 생성

위 코드와 같이 인스턴스를 생성할 수 있다.

 

 

 

그리고 var vm안에 Vue 인스턴스를 담아보자

var vm = new Vue();

*vm은 뷰 모델의 약자이다

 

 

 

 

전체 코드를 한번 확인해보자

(아래 코드는 뒤 포스팅에서도 계속해서 사용할 예정이다)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>tooo1</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:'hello world'
            },
            methos: {

            },
        });
    </script>
</body>
</html>

 

 

위 전체 코드에서 보면

var vm = new Vue();

인스턴스 안에 여러개의 옵션이 들어있는 것을 확인할 수 있다.

이것들이 뷰 인스턴스의 속성이다.

 

 

뷰 인스턴스의 속성

new Vue({
  el: ,
  data: ,
  methods: ,
});

우리는 이 속성들을 재정의하여 옵션을 선택할 수 있다.

우선 위 코드에서 사용된 el, data, methods에 대해 알아보자

 

  • el : element로 CSS 선택자(id or class)를 사용해 DOM 요소를 찾아 어플리케이션을 마운트
  • data : 뷰의 데이터 속성
  • methods : 화면의 동작과 이벤트 로직을 제어하는 메서드

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!

728x90
반응형
저작자표시 비영리

'FRONT-END' 카테고리의 다른 글

[React] map 함수 사용 시 Key 값을 부여해 주는 이유  (2) 2022.04.26
[React] .env (환경변수 관리)  (4) 2022.03.17
[React] Redux-Persist (새로고침을 해도 데이터 유지)  (2) 2022.02.20
[Vue] V-Calendar  (0) 2021.11.02
[Vue] Vue란?  (0) 2021.08.31
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함