Vue 템플릿 문법 핵심 정리 - Vue 기본기 다지기 2편

Core Vue Template Syntax - Building Vue Fundamentals Part 2

<template>
  <!-- script에 있는 message 데이터를 이곳에 보여줍니다. -->
  <h1>{{ message }}</h1>
  <p>저의 이름은 {{ user.name }}이고, 나이는 {{ user.age }}살 입니다.</p>
</template>
 
<script setup>
import { ref, reactive } from 'vue';
 
// ref는 주로 문자열, 숫자 등 기본형 데이터를 다룰 때 사용합니다.
const message = ref('안녕하세요! Vue의 세계에 오신 것을 환영합니다.');
 
// reactive는 주로 여러 정보가 담긴 객체 데이터를 다룰 때 사용합니다.
const user = reactive({
  name: '김뷰',
  age: 10
});
</script>

<template>
  <!-- v-bind를 사용해 이미지 주소를 연결합니다. -->
  <img v-bind:src="imageUrl" alt="귀여운 강아지">
 
  <!-- v-bind는 자주 사용하기 때문에 단축 문법을 제공합니다. -->
  <!-- v-bind: 를 생략하고 콜론(:)만 사용해도 똑같이 작동합니다. -->
  <a :href="linkUrl">네이버로 이동하기</a>
  
  <!-- 클래스(class)도 동적으로 제어할 수 있습니다. -->
  <p :class="{ active: isActive, 'text-danger': hasError }">
    이 글씨는 특정 조건에 따라 스타일이 바뀝니다.
  </p>
</template>
 
<script setup>
import { ref } from 'vue';
 
const imageUrl = ref('https://placedog.net/300/200'); // 이미지 주소 데이터
const linkUrl = ref('https://www.naver.com'); // 링크 주소 데이터
 
const isActive = ref(true);
const hasError = ref(false);
</script>
 
<style>
.active {
  color: green;
  font-weight: bold;
}
.text-danger {
  color: red;
}
</style>

<template>
  <!-- input 창에 입력하는 값이 message 데이터와 실시간으로 동기화됩니다. -->
  <input type="text" v-model="message" placeholder="여기에 입력하세요">
 
  <!-- p 태그는 message 데이터를 보여주기만 합니다. -->
  <p>입력된 메시지: {{ message }}</p>
 
  <button @click="resetMessage">메시지 초기화</button>
</template>
 
<script setup>
import { ref } from 'vue';
 
const message = ref(''); // 빈 문자열로 시작
 
function resetMessage() {
  // 버튼을 누르면 자바스크립트 데이터가 바뀌고,
  // v-model로 연결된 input 창의 내용도 함께 초기화됩니다.
  message.value = '초기화되었습니다!';
}
</script>

<template>
  <!-- 버튼을 클릭하면 counter 데이터가 1씩 증가합니다. -->
  <p>카운터: {{ counter }}</p>
  <button v-on:click="increment">더하기</button>
 
  <!-- @ 단축 문법을 사용하는 것이 일반적입니다. -->
  <button @click="decrement">빼기</button>
 
  <!-- .prevent는 이벤트의 기본 동작을 막는 '수식어'입니다. -->
  <!-- 여기서는 폼 제출 시 페이지가 새로고침되는 것을 막아줍니다. -->
  <form @submit.prevent="submitForm">
    <button type="submit">제출</button>
  </form>
</template>
 
<script setup>
import { ref } from 'vue';
 
const counter = ref(0);
 
function increment() {
  counter.value++;
}
 
function decrement() {
  if (counter.value > 0) {
    counter.value--;
  }
}
 
function submitForm() {
  alert('폼이 제출되었습니다!');
}
</script>