Vue 시작하기

👉🏻설치방법👈🏻 바로가기

이중 중괄호

• 데이터 바인딩의 가장 기본 형태

• html의 content를 출력할 때 사용

• html 속성은 v-html 사용

• 문자열 보간법(text interpolation)

• {{ content }} 형식

Directive(지시문) 종류

• html속성에 데이터를 연결, 바인딩

• v-bind 엘리먼트의 class 목록, 인라인 style 조작

  • v-bind:href
  • 약어 :href

• v-on Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가

  • 화면의 요소들과 연결해서 상호 작용 만듦
  • v-on:click
  • 약어 @click

• v-slot

  • 약어 #

• v-if 조건문

• v-for 배열, 객체 등 데이터들 반복문

• v-once 데이터를 한 번만 출력, 메모리 절약

• v-show 엘리먼트의 display CSS 속성을 전환

• v-cloak

  • 연결된 컴포넌트 인스턴스가 컴파일을 완료 할 때 까지 엘리먼트에 남아있다.
  • 컴포넌트 인스턴스가 준비될 때 까지 컴파일 되지 않은 mustache 바인딩을 숨기는데 사용

  [v-cloak] {
  	display: none;
  }

  <div v-cloak>
    {{ message }}
  </div

컴포넌트

• Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스

• 컴포넌트 객체를 만들고 부모 컴포넌트의 conponents옵션에 정의

  • prop : 부모 영역의 데이터를 자식 컴포넌트에 전달

• script에서는 PascalCase을 이용한 컴포넌트명을 그대로 html에서 dash-case로 변경하여 태그를 생성하여 사용

  • Vue.js에서 통제되어 사용이 가능

애플리케이션 API

예제와 자세한 설명은 여기

Vue의 동작을 전역적으로 변경하는 API가 Vue3의 새로운 createApp 메소드에 의해 생성된 애플리케이션 인스턴스로 이동

• component
• config
• directive
• mixin
• mount
• provide
• unmount
• use
• version

라이프사이클 다이어그램

• beforeCreate() Vue Application이 생성되기 전

• created() Vue Application이 생성된 직후 ⭐

• beforeMount() html구조와 연결되기 전

• mounted() html구조(DOM)와 연결된 직후 ⭐

• beforeUpdate() data의 업데이트가 아닌 화면의 업데이트를 의미

• updated() 업데이트 직후

• beforeUnmount() html구조(DOM)와 해제되기 전

• unmounted() html구조(DOM)와 해제된 직후

created()를 우선적으로 고려 후 처리되지 않는 내용은
mounted()을 고려하면 언제 무엇을 쓸지 쉽게 결정할 수 있다.

Proxy

• Proxy객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용

• new Proxy(target, handler); 생성자 함수

• get(target, key), set(target, key, value) 이용해서 데이터의 조회와 갱신을 감시하면서 로직을 추가

Methods

• 컴포넌트 인스턴스에 메서드를 추가할 때 사용하는 옵션

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this`는 컴포넌트 인스턴스를 참조합니다.
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5

• methods 안의 컴포넌트 인스턴스를 참조할 때 this값을 자동으로 바인딩
• methods 정의 할때만 화살표함수를 사용하지 않고, 내부에서만 가능