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

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
  methods: {
    increment() {
      this.num++
    }
  },
  mounted() {
    console.log('num이 변경되었을걸요?')
  },
}
</script>

<template>
  <h1>{{`안녕하세요. ${num}DC입니다.`}}</h1>
  <button @click="increment">
    숫자UP
  </button>
</template>

숫자UP을 누르면 state가 자동적으로 갱신되어 화면에 출력된다.

 

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 상태는 컴포넌트에 유지된다.

 

객체를 리턴하는 함수인 data 컴포넌트 옵션을 이용해서 reactive state를 선언할 수 있다.

---