Vue_TIL #1 MVVM 패턴, 인스턴스와 컴포넌트

e_ong·2022년 5월 10일
0

Vue

목록 보기
1/3

📘 교재

👀 Vue.js?

  • SPA(Single Page Application) 개발을 위한 JAVASCRIPT 프레임워크

  • Vue는 MVVM 패턴을 이용하는 프레임워크이며, 이 중 View만을 위한 Model인 VM(ViewModel)에 집중

  • 뷰View 는 사용자에게 보여지는 브라우저 화면(html) 을 의미
    ➡️ DOM을 통해 자바스크립트를 조작

  • ViewModel에 해당하는 뷰Vue 인스턴스DOM Listners(이벤트 핸들링) / Data Bindings(데이터 변환)를 통해 자바스크립트 코드를 실행하고 화면 View에 반영


💡 Vue.js 사용하기

📌 데이터가 변경될 때, 그 값을 적용하기

📘 참고자료

  • 자바스크립트 내장 메서드
    • Object.defineProperty() : 객체의 동작을 재정의하는 메서드
     	Object.defineProperty(대상 객체, 객체의 속성, { 새로 정의 또는 수정하려는 속성, get : , set : })

📌 Reactivity ➡️ 데이터 바인딩 구현

⭐️ Reactivity, 반응성


📌 인스턴스 생성하기

  • new Vue() -> 생성자 함수로 인스턴스를 만든다.
  • 미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용(재사용)하여 화면을 개발
new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});
  • el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
  • template : 화면에 표시할 요소 (HTML, CSS 등)
  • data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
  • methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
  • created : 뷰의 라이프 사이클과 관련된 속성
  • watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
  • 인스턴스 안에 들어가는 객체는 따로 변수로 지정하지 않고 리터럴 형식으로 바로 값을 대입해주는 것이 가독성이 높다.

  • 인스턴스를 생성하면 Root 컴포넌트가 된다.
    ( crome extenstion - Vue Devtool 화면 )

📌 컴포넌트 생성하기

  • vue를 사용해 화면의 영역을 나누어 개발할 수 있다.

  • 전역 / 지역 컴포넌트를 만들 수 있는데, 실무에서 전역은 거의 사용하지 않는다(⭐️ 지역 컴포넌트로 만들었을 때 하위 컴포넌트 조회가 가능).

  • 전역 컴포넌트는 플러그인, 라이브러리 등 전역에서 사용이 필요할 때만 만든다.

  • 지역 컴포넌트 등록하기
    ⭐️ 속성 이름이 components! s 붙이는 것 주의 ( 보통 여러 개의 컴포넌트를 만들기 때문 )

        new Vue({
            el: '#app',
            //지역 컴포넌트 등록
            components: {
             // '컴포넌트 이름': 컴포넌트 내용,
            'app-footer' : {
                template: '<footer>footer</footer>'
            }
            }
        })

📌 컴포넌트와 인스턴스

  • 💡 배경지식으로 알고 있기 : 전역 컴포넌트는 인스턴스를 생성할 때마다 자동으로 등록이 되어있고, 지역 컴포넌트는 새로 등록해줘야함
    (콘솔 에러메세지 캡처 -지역 컴포넌트로 만든 app-footer)

  • 그러나 앞서 말했듯 실제 서비스를 개발할 때는 인스턴스는 하나를 생성하고 그 안에서 컴포넌트를 더해나가는 식으로 진행된다!

profile
걸음마 개발 분투기

0개의 댓글