Directives Vue.js에서는 DOM의 요소에 특별한 동작을 적용할 수 있습니다. 구문 접두사가 붙고 v- DOM을 조작하고, 이벤트를 처리하고, 요소를 조건부로 렌더링하는 등의 작업에 사용됩니다. Vue.js 는 광범위한 일반적인 사용 사례를 다루는, , 및 와 directives 같은 여러 내장 기능을 제공합니다. v-if v-for v-bind v-on
directives 다음은 Vue.js에서 흔히 볼 수 있는 몇 가지입니다 .
1. 지시어: 이 지시어는 조건에 따라 요소를 조건부로 렌더링하는 데 사용됩니다. v-if
예:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. 지시어: 이 지시어는 배열 또는 객체를 반복하고 해당 요소를 생성하는 데 사용됩니다. v-for
예:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. 지시어: 이 지시어는 표현식의 값을 요소의 속성 또는 속성에 바인딩하는 데 사용됩니다. v-bind
예:
<img v-bind:src="imageUrl">
4. 지시어: 이 지시어는 요소의 이벤트를 수신하고 처리하는 데 사용됩니다. v-on
예:
<button v-on:click="handleClick">Click me!</button>
5. 지시어: 이 지시어는 입력 요소와 데이터 속성 간에 양방향 바인딩을 생성합니다. v-model
예:
<input v-model="message">
이것들은 directives Vue.js의 기본입니다. directives Vue.js 애플리케이션에서 특정 동작을 수행하기 위해 고유한 사용자 정의를 만들 수도 있습니다 .