Tutorial | Vue.js

1. 시작하기

App.vue

<template>
  <h1>안녕 Vue!</h1>
</template>

• 결과

2. 선언적 렌더링

→ SFC는 HTML, CSS, JavaScript를 캡슐화한 코드 블록으로 재사용 가능한 .vue 파일이다.

• Vue의 핵심 기능은 선언적 렌더링이다.

  • HTML을 확장하는 템플릿 문법을 사용하여, JavaScript 상태가 기반이다.
  • 상태가 변경되면 HTML이 자동으로 업데이트된다.

• 변경 시, 업데이트를 트리거할 수 있는 상태는 반응형으로 간주된다.

  • reactive() 를 사용하여 반응형 상태를 선언할 수 있다.

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

• reactive() 는 객체에서만 작동한다.
  • 반면 ref() 는 모든 타입의 값을 사용할 수 있고, .value 속성으로 내부값을 노출하는 객체를 생성한다.