Vue v-접두사 종류와 예시

Vue.js는 웹 애플리케이션 개발을 위한 프론트엔드 JavaScript 프레임워크이다.
v-접두사는 Vue.js에서 사용되는 디렉티브(directive)를 나타내며, HTML 요소의 동적인 동작을 제어하기 위해 사용된다.

v- 접두사를 가진 디렉티브는 Vue.js에서 미리 정의되어 있으며, 애플리케이션에서 사용할 수 있습니다. 아래는 v- 접두사를 가진 몇 가지 디렉티브와 예시이다.

v-bind: HTML 요소의 속성값을 Vue.js 데이터와 연결합니다.

<img v-bind:src="imageSrc">

v-if: 조건부 렌더링을 수행합니다. 지정된 조건이 참일 경우에만 HTML 요소를 렌더링합니다.

<div v-if="showElement">이 요소는 조건이 참일 때만 보입니다.</div>

v-for: 배열을 순회하면서 HTML 요소를 반복 렌더링합니다.

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

v-on: 이벤트 핸들러를 등록합니다. HTML 요소에서 지정한 이벤트가 발생하면, 지정한 JavaScript 메소드가 호출됩니다.

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

v-model: 양방향 데이터 바인딩을 수행합니다. HTML 요소의 값을 Vue.js 데이터와 동기화합니다.

<input v-model="message" type="text">