가볍게 문법과 개념 훑기

이번 시간에는 가볍게 문법과 개념에 대해 훑어보려 합니다! 주요 개념들을 문법과 함께 살펴보도록 하겠습니다.😎

 

Vue Instance

인스턴스는 Vue.js로 화면을 개발하기 위해 생성해야 하는 필수 단위이다.

Vue Instance 생성자

생성자 함수를 사용하여 인스턴스를 생성하는 방법이다.

new Vue({
  // instance option properties
});

Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle hook 등 옵션 속성을 포함할 수 있다.

new Vue({
  // instance option properties
  template: "",
  el: "",
  methods: {}
  // ...
});

Vue Instance 라이프싸이클 초기화

• 인스턴스(객체)가 생성될 때 수행되는 초기화 작업
• 데이터 관찰템플릿 컴파일 DOM에 객체 연결
• 데이터 변경 시 DOM 업데이트

이런식으로 초기화 작업 외, 개발자가 의도하는 커스텀 로직을 작성할 수 있다.

vm이란 ViewModel의 약자라고 한다.

new Vue({
  data: {
    a: 1
  },
  created: function() {
    // this 는 vm 을 가리킴
    console.log("a is: " + this.a);
  }
});

---

Vue Components

화면의 영역을 일정한 단위로 쪼개 분리시켜 재활용 가능한 형태로 관리하는 것이 컴포넌트이다.

컴포넌트 등록

<div id="app">
  <my-component></my-component>
</div>

new Vue({
  el: "#app",
  // 컴포넌트 등록 코드
  components: {
    // '컴포넌트 이름': 컴포넌트 내용
    "my-component": {
      template: "<div>A custom component!</div>"
    }
  }
});

Global Component

전역 컴포넌트 등록 방식이다.

Vue.component('my-component', {
  // 컴포넌트 내용
  template: '',
  ...
})