[Vue.js] Vue.js의 바인딩 문법

Vue.js는 반응형 웹 애플리케이션을 구축하기 위해 다양한 바인딩 문법을 제공합니다. 

이러한 바인딩 문법은 데이터를 HTML 요소에 연결하고, 사용자 인터랙션을 처리하는 데 유용합니다.

이 글에서는 Vue.js의 바인딩 문법의 종류와 사용 방법에 대해 설명하겠습니다.

 

1. 데이터 바인딩

Vue.js의 핵심 기능 중 하나는 데이터 바인딩입니다. 

데이터 바인딩을 통해 Vue 인스턴스의 데이터와 HTML 요소를 연결할 수 있습니다.

#1-1 텍스트 바인딩

Vue.js에서는 {{ }} 템플릿 문법을 사용하여 데이터를 표시할 수 있습니다.

<div>{{ message }}</div>

 

위의 코드에서 message는 Vue 인스턴스의 데이터 속성으로, 해당 값이 화면에 출력됩니다.

 

#1-2 HTML 바인딩

HTML을 안전하게 바인딩하려면 v-html 디렉티브를 사용할 수 있습니다. 

이 디렉티브는 HTML 문자열을 렌더링합니다.

<div v-html="rawHtml"></div>

여기서 rawHtml은 HTML 형식의 문자열입니다. 

⚠️ 주의할 점은 이 방법이 XSS 공격에 취약할 수 있으므로 신뢰할 수 있는 데이터에만 사용해야 합니다. ⚠️

 

2. 속성 바인딩

속성 바인딩은 HTML 요소의 속성에 Vue 인스턴스의 데이터를 연결하는 방법입니다. 

v-bind 디렉티브를 사용하여 속성을 바인딩할 수 있습니다.

 

#2-1  일반 속성 바인딩

버튼의 disabled 속성을 바인딩합니다.

<button v-bind:disabled="isDisabled">클릭하세요</button>

이처럼 약어를 사용하면 코드가 더 간결해집니다.

 

3. 클래스 바인딩

Vue.js는 객체 또는 배열을 사용하여 동적으로 클래스를 바인딩할 수 있습니다. 

이는 CSS 클래스를 조건부로 적용할 때 유용합니다.

3.1. 객체 문법

객체 문법을 사용하면 클래스 이름을 키로, 조건을 값으로 설정할 수 있습니다.

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

isActive가 true일 경우 active 클래스가 추가되고, hasError가 true일 경우 text-danger 클래스가 추가됩니다.

 

3.2. 배열 문법

배열 문법을 사용하면 여러 클래스를 동시에 적용할 수 있습니다.

<div v-bind:class="[activeClass, errorClass]"></div>

 

activeClass와 errorClass는 Vue 인스턴스의 데이터 속성으로, 각각의 값에 따라 클래스가 적용됩니다.

 

4. 스타일 바인딩

Vue.js에서는 인라인 스타일을 바인딩할 수 있습니다. 

v-bind:style 디렉티브를 사용하여 CSS 스타일을 동적으로 적용할 수 있습니다.

4.1. 객체 문법

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

 

activeColor와 fontSize는 Vue 인스턴스의 데이터 속성으로, 해당 값에 따라 스타일이 적용됩니다.

4.2. 배열 문법

배열 문법을 사용하여 여러 스타일을 적용할 수도 있습니다.

<div v-bind:style="[baseStyle, overridingStyle]"></div>

baseStyle과 overridingStyle은 스타일 객체입니다.

 

5. 이벤트 핸들링

Vue.js에서는 사용자 이벤트를 처리하기 위해 v-on 디렉티브를 사용합니다. 

이 디렉티브는 이벤트 리스너를 추가하는 데 사용됩니다.

5.1. 기본 사용

버튼 클릭 이벤트를 처리합니다.

<button v-on:click="handleClick">클릭하세요</button>

handleClick은 Vue 인스턴스의 메서드로, 버튼이 클릭될 때 호출됩니다.

5.2. 약어 사용

v-on은 @로 축약할 수 있습니다.

<button @click="handleClick">클릭하세요</button>

 

약어를 사용하면 코드가 간결해집니다.

 

6. 양방향 데이터 바인딩

Vue.js에서는 v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 쉽게 구현할 수 있습니다. 

주로 폼 입력 요소에 사용됩니다.

6.1. 입력 필드 예제

<input v-model="inputText" placeholder="입력하세요">

inputText는 Vue 인스턴스의 데이터 속성으로, 사용자가 입력한 값이 실시간으로 업데이트됩니다.

6.2. 체크박스 및 라디오 버튼

v-model은 체크박스나 라디오 버튼에도 사용될 수 있습니다.

<input type="checkbox" v-model="isChecked"> 체크박스

<input type="radio" v-model="picked" value="A"> A
<input type="radio" v-model="picked" value="B"> B

 

v-model을 사용하면 폼 요소와 데이터 간의 상호작용을 간편하게 처리할 수 있습니다.