Vue.js에서 사용되는 모든 특수문자 완벽 정리

 

 

Vue.js에서 사용되는 특수문자는 주로 템플릿 문법, 디렉티브, 그리고 컴포넌트 통신에서 나타납니다. 아래에서 Vue에서 자주 사용되는 특수문자와 그 의미를 체계적으로 정리해 드리겠습니다.

---

1. 템플릿 문법에서 사용되는 특수문자

Vue 템플릿에서 데이터를 바인딩하거나 제어할 때 사용됩니다.

 

 

특수문자	의미	예시	설명
{{ }}	Mustache (이중 중괄호)	{{ message }}	데이터나 표현식을 렌더링. 예: message 변수의 값을 출력.
:	v-bind 의 축약형	:class="className"	속성 값을 동적으로 바인딩. v-bind:class 와 동일.
@	v-on 의 축약형	@click="handler"	이벤트 리스너를 바인딩. v-on:click 와 동일.
#	v-slot 의 축약형 (Vue 2.6+ 및 Vue 3)	#default="{ data }"	슬롯을 지정. v-slot:default 와 동일.
.	디렉티브 수식어	@click.stop="handler"	이벤트나 바인딩에 추가 조건 적용 (예: .stop , .prevent ).
[]	동적 속성/이벤트	:[key]="value"	동적으로 속성 이름이나 이벤트 이름을 지정.

예제

 

<template>
  <div>
    <p>{{ message }}</p> <!-- 데이터 출력 -->
    <button :disabled="isDisabled" @click.stop="handleClick">클릭</button> <!-- 속성 바인딩 + 이벤트 -->
    <slot #header="{ data }"></slot> <!-- 슬롯 -->
  </div>
</template>

---

2. Vue 인스턴스/컴포넌트에서 사용되는 특수문자

Vue의 JavaScript 코드 내에서 주로 사용됩니다.

 

 

특수문자	의미	예시	설명
$	Vue 제공 속성/메서드 접두사	this.$emit()	Vue 인스턴스나 컴포넌트의 내장 속성/메서드 (예: $emit , $refs ).
_	관례적 비공개 속성	_privateVar	Vue 내부나 개발자가 비공개로 간주하는 변수/메서드에 사용 (강제성은 없음).
.	객체 속성 접근	this.data.value	JavaScript 객체 속성 접근. Vue에서도 동일하게 사용.

예제

 

export default {
  data() {
    return { message: 'Hello' };
  },
  methods: {
    sendEvent() {
      this.$emit('my-event', this.message); // $emit으로 이벤트 발생
    },
  },
};

---

3. 디렉티브 수식어에서 사용되는 특수문자

디렉티브에 추가적인 동작을 정의할 때 사용됩니다.

 

수식어	의미	예시	설명
.stop	이벤트 전파 중지	@click.stop	상위 요소로 이벤트가 전파되지 않음.
.prevent	기본 동작 방지	@submit.prevent	폼 제출 같은 기본 동작을 막음.
.once	한 번만 실행	@click.once	이벤트가 한 번만 트리거됨.
.native	네이티브 이벤트 감지	@click.native	컴포넌트에서 DOM 네이티브 이벤트를 감지 (Vue 2에서 주로 사용).
.sync	양방향 바인딩 (Vue 2)	:value.sync	v-bind 와 함께 사용해 양방향 바인딩 구현 (Vue 3에서는 제거됨).

예제

<template>
  <form @submit.prevent="submitForm">
    <button @click.stop="handleClick">클릭</button>
  </form>
</template>

---

 

4. 슬롯 관련 특수문자 (Vue 2.6+ 및 Vue 3)

슬롯에서 이름과 데이터를 지정할 때 사용됩니다.

 

특수문자	의미	예시	설명
#	v-slot 축약형	#default="{ data }"	슬롯 이름 지정.
{}	슬롯 스코프 데이터	#item="{ item }"	슬롯에서 전달된 데이터를 구조 분해로 받음.

예제 

<template>
  <ChildComponent>
    <template #header="{ headerData }">
      <h1>{{ headerData }}</h1>
    </template>
  </ChildComponent>
</template>

---

5. Composition API에서 사용되는 특수문자

Vue 3의 Composition API에서 추가적으로 나타나는 특수문자입니다.

 

 

 

특수문자	의미	예시	설명
<script setup>	컴파일 타임 문법	<script setup>	컴포넌트 정의를 간소화 (Vue 3).
:	타입 힌트 (TypeScript)	defineProps<{ name: string }>()	TypeScript와 함께 사용할 때 타입 정의.

예제

 

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

---

 

6. 기타 특수문자 (JavaScript 문맥)

 

Vue는 JavaScript 기반이므로 일반적인 JavaScript 특수문자도 자주 사용됩니다.

 

특수문자	의미	예시	설명
()	함수 호출	method()	메서드 실행.
[]	배열/동적 키	array[0]	배열 접근 또는 객체의 동적 키 접근.
=>	화살표 함수	() => console.log('Hi')	ES6 화살표 함수로 콜백 정의.
...	전개 연산자	...array	배열이나 객체를 펼침.

예제

 

const items = ref(['a', 'b']);
const addItem = () => items.value.push('c');

---

종합 예제

모든 특수문자를 한 번에 볼 수 있는 예제입니다.

 

<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const message = ref('부모 메시지');
const receivedData = ref('');

const handleEvent = (data) => {
  receivedData.value = data;
};
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent
      :parent-msg="message"
      @custom-event="handleEvent"
      #header="{ slotData }"
    >
      <p>{{ slotData }}</p>
    </ChildComponent>
    <p>받은 데이터: {{ receivedData }}</p>
    <button @click.stop="() => message = '변경됨'">클릭</button>
  </div>
</template>

 

 

728x90

 

<!-- ChildComponent.vue -->
<script setup>
defineProps(['parentMsg']);
const emit = defineEmits(['custom-event']);

const sendEvent = () => {
  emit('custom-event', '자식에서 온 데이터');
};
</script>

<template>
  <div>
    <p>{{ parentMsg }}</p>
    <button @click.once="sendEvent">부모로 보내기</button>
    <slot name="header" :slotData="'슬롯 데이터'"></slot>
  </div>
</template>

---

결론

Vue.js에서 사용되는 특수문자는 주로 데이터 바인딩({{}}, :), 이벤트 처리(@, $emit), 슬롯(#) 등에 집중되어 있으며, 각각의 역할이 명확합니다. 이들은 Vue의 직관적이고 선언적인 문법을 가능하게 하는 핵심 요소입니다. 추가로 궁금한 점이나 더 깊은 설명이 필요하면 말씀해주세요!