Vue3 Composition API와 기초 문법 다뤄보기(1)

이번 프로젝트 때 Vue3 환경에서 Composition API를 사용하고 있다. 

vue3 기본문법을 정리하고자한다.

<script setup>
</script>

<template>
</template>

<style>
</style>

<!--Vue의 기본 형식-->

1.Vue3의 특징 

1-1. 선언적 랜더링 (Declarative Rendering)

컴포넌트를 랜더링 할 때 HTML과 vue에서 제공하는

Template 문법을 가지고 컴포넌트가 어떻게 보이면 되는지를 정의해주면 된다.

쉽게 말해서 컴포넌트 형태를 정의하면 되는 것 이다.

상태가 변경 될 때 자동으로 업데이트 된다.

 

1-2. 반응성 (Reactive)

변경될 때 업데이트를 트리거 할 수 있는 상태를 반응형으로 간주한다.

Vue에서 reactive() 를 선언하면 반응형 상태가 된다.

 

reactive()는 객체(배열, Map, Set)에서만 작동한다.

반면 ref()로 선언해주면 모든 타입의 값을 반응형 상태로 만들 수 있다.

 

또한 .value 속성으로 내부 값을 노출하는 객체를 생성한다.

 

<script setup>
import {ref} from 'vue';

const boom = ref("반응성 텍스트로 만들기!");
</script>

<template>
  <h1> 나를 다이내믹 하게 만들어줘<h1>
  <h2>{{boom}}</h2>
</template>

 

template안에 있는 html에 반응성 값을 넣고 싶으면 머스테치 {{}} 안에 넣어주면 된다.

 

---

2. <script setup>

여기서 사용되는 <script setup>은 싱글 파일 컴퍼넌트(SFC)

내에서 컴포지션 API를 좀 더 쉽게 사용하기 위한 컴파일 문법이다.

composition 사용시 위 문법을 권장하고 있다.

내부에 선언된 모든 최상위 바인딩은 템플릿에서 직접 사용할 수 있다.

<script setup>
// 변수
const msg = '안녕!'

// 함수
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

 

---

3. 속성 바인딩

속성 값을 동적으로 바인딩 하려면 v-bind를 사용해주면 된다.

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

const titClass = ref('title')
//ref를 사용하여 반응성이 가능하도록 추가했다.
</script>

<template>
<div v-bind:class="titClass"></div>
</template>


<style>
.title {
  color: red;
}
</style>

콜론 뒤에 붙은 부분은 디렉티브의 "인자"이다. v-bind는 단축 문법으로 사용이 가능하다.

<div :class="titClass"></div>

 

---

4.이벤트 리스너

v-on 디렉티브를 사용하여 DOM이벤트를 수신할 수 있다.

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

const count = ref(0)

function increament(){
  count.value++
}
//1씩 증가되는 함수 추가

</script>

<template>
  <button v-on:click="increament">숫자 세기: {{ count }}</button>
  <!--v-on으로 이벤트 수신--> 
</template>

 

 

---

 

5.폼(form) 바인딩

v-bind와 v-on을 함께 사용시 양방향 바인딩이 가능하다.

<input :value="text" @input="onInput">

하지만 두개를 간소화해서 v-model로 표기할 수 있다.

 

예제 코드)

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

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="여기에 입력하기">
  <p>{{ text }}</p>
</template>

//////////위 코드는 아래 코드와 같다////////

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

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="여기에 입력하기">
  <p>{{ text }}</p>
</template>

다음과 같은 결과물이 나온다.

 

 

글이 길어져서 추가 문법에 대한 내용은 2편에서 다뤄보도록 하겠다.

 

 

 

참고 : https://ko.vuejs.org/