Vue.JS) 튜토리얼 : Declarative Rendering / Composition API

<script setup>
import { ref, onMounted } from 'vue'

const num = ref(0)

const increment = () => {
  num.value += 1
}

onMounted(() => {
  console.log('안녕~!')
})
</script>

<template>
  <h1>{{`안녕 나는 ${num}DC야`}}</h1>
  <button @click="increment">
    누르면 숫자 올라감
  </button>
</template>

버튼을 누르면 숫자가 올라간다.

What you see in the editor is a Vue Single-File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file.

 

The core feature of Vue is declarative rendering: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScript state. When the state changes, the HTML updates automatically.

 

State that can trigger updates when changed are considered reactive. In Vue, reactive state is held in components.

 

We can declare reactive state using the data component option, which should be a function that returns an object:

---

위 에디터에서 보이는 것은 SFC(single file component)이다. SFC는 HTML과 CSS, JS를 모두 다루는 캡슐같은 컴포넌트이고, .vue 확장자 내부에서 쓰여진다.

 

vue의 핵심 특징은 선언형 렌더링(declarative rendering)이다. HTML을 확장한 템플릿 문법을 사용하면서 JS state와 HTML을 묶어서 선언할 수 있다. state가 변환이 되면 HTML은 자동적으로 업데이트 된다.

 

트리거를 통해 변경될때마다 업데이트 되는 State는 reactive state로 여겨지게 되며, reactive 상태는 컴포넌트에 유지된다.