[Vue.js] 기초 템플릿, v- 디렉티브

토누권 2025. 3. 19. 13:06

2025. 3. 19. 13:06

2025/03/19

📌 Vue 디렉티브(Directive)란?

디렉티브(Directive)는 Vue에서 HTML 태그에 추가적인 반응형 동작을 부여하는 특수 속성

디렉티브 값은 문자열이 아님, JS 표현식(자바스크립트 문법이 적용됨)

v-text 디렉티브

innerTEXT 속성과 연결, 태그 문자열이 그대로 나타남
단방향 데이터 바인딩

<div id="app">
    <h2 v-text="message"></h2>
</div>
<script>
    let model = { message: '<h1>Hello Vue3!</h2>' };

v-html 디렉티브

innerHTML 속성과 연결, 태그 문자열을 파싱하여 나타냄
단방향 데이터 바인딩

<body>
    <div id="app">
        <div v-html="message"></div>
    </div>
</body>

<script>
    let model = { message: '<h1>Hello Vue3!</h2>' };
    let vm = Vue.createApp({
        name: "App",
        data() {
            return model;
        }
    }).mount('#app');
</script>

v-bind 디렉티브

요소의 속성을 바인딩
단방향 데이터 바인딩
- Vue 인스턴스의 데이터나 속성이 바뀌면 UI가 갱신됨
- 화면에서 값을 변경하는 것은 데이터에 반영되지 않음

<body>
    <div id="app">
        <input type="text" v-bind:value="message">
        <br/>
        <img v-bind:src="imagePath">
    </div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
    let vm = Vue.createApp( {
        name : "App",
        data() {
            return {
                message : "v-bind 디렉티브",
                imagePath : "https://contactsvc.bmaster.kro.kr/photos/18.jpg"
            };
         }
    }).mount('#app');
</script>

v-model 디렉티브

양방향 데이터 바인딩
주로 form요소 바인딩에 사용
html의 value 속성과 연동

<div id="app">
    <input type="text" v-model="name">
    <br />
    입력한 값: <span>{{name}}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
    let vm = Vue.createApp({
        name: "App",
        data() {
            return { name: '' };  //line2에서 양방향 데이터 바인딩됨
        }
    }).mount('#app');
</script>

❗ ❗주의 사항 ❗ ❗

다중 선택 vs 단일 선택에 따라 데이터 형식 변동

다중 선택 : 배열

단일 선택 : 문자열

  <div>
        선택한 취미: {{hobby.join(',')}} <br />
        선택한 상품 분류: {{category}}
  </div>
----------------
        data() {
            return {
                hobby: [],
                category: ''
            };
        }

수식어(modifier)

v-model에 기능 추가 역할

lazy
- input에서 엔터를 치거나 포커스를 이동했을 떄 입력값과 속성을 동기화
- <input type="text" v-model.lazy="name" />
number
- 문자열을 숫자로 자동 형변환시켜 속성에 반영
- <input type="text" v-model.number="num" />
trim
- 문자열의 앞뒤 공백을 자동으로 제거
- <input type="text" v-model.trim="message" />

v-show 디렉티브

화면에 보여줄지 말지를 결정하는 디렉티브(HTML 요소를 생성하지만 화면에 보여주지는 않을 수 있음)
display 속성을 제어

<img v-show = "amount<0" ...

v-if 디렉티브

조건에 부합하지 않을 경우 요소를 생성하지 않음(화면 출력 없음)

 <img v-if="amount < 0" ...

v-else, v-else if 디렉티브

<div id="app">
    잔고:<input v-model="balance" />
    <br/>
    회원님의등급:
    <span v-if="balance>1000000">Gold</span>
    <span v-else-if="balance>=500000">Silver</span>
    <span v-else-if="balance>=200000">Bronze</span>
    <span v-else="balance">Basic</span>
</div>

v-for 디렉티브

반복적인 데이터 렌더링
형식(배열 사용시) : <태그명 v-for="변수in 배열" :key="id값">

<tr v-for="contact in contacts" :key="contact.no">

형식(객체 사용시) : <태그명v-for="(val, key) in 객체" :key="key">

 <option v-for="(val, key) in regions" :value="key" :key="key">{{val}}</option>

인덱스 번호가 필요한 경우)

template 태그 - 여러 요소를 묶어서 반복 렌더링

 <template v-for="(contact, index) in contacts" :key="contact.no">

v-for 디렉티브와 key 특성

배열을 렌더링할 때 데이터 변경없이 위치만 바뀌는 경우

key 속성이 없으면 => 전부 다시 렌더링
key 속성이 있으면 => 위치만 변경 가능

❗key 특성에는 인덱스 번호가 아닌, 고유한 변경되지 않는 값 부여

Proxy 객체

데이터의 변경 사항 감시, 값 변경 시 렌더링 다시 유도
Vue 인스턴스에서 data 옵션으로 지정한 객체
data로 지정된 객체는 모두 Proxy로 래핑
배열의 데이터를 변경하는 메서드들도 매핑되어 있어, 배열 내용 변경시 watcher에게 변경을 알려서 다시 렌더링 필요

❓궁금증❓
네트워크에서 배운 Proxy 서버의 Proxy와 유사한 개념인건가?
==>
Vue에서 "프록시"는 JavaScript의 Proxy 객체를 기반으로 작동하는 개념으로,Vue의 반응형(Reactivity) 시스템을 구현하는 핵심 기술
중간에서 데이터를 가로채고 조작한다는 점에서 유사

'KB 국민은행 IT's your life 교육' 카테고리의 다른 글

[Vue.js] Vue 프로젝트 폴더 생성(Vite), 단일 파일 컴포넌트 적용 (0)	2025.03.25
[Vue.js] 스타일 적용, Vue에서 스타일 및 클래스 바인딩 방법 (1)	2025.03.24
[Git/GitHub 특강] 프로젝트 시 GitHub 사용 명령어 정리 !!! (0)	2025.03.18
[Vue.js] MVVM 패턴 및 ES6 / var, let, const 차이점 정리 / 화살표 함수 (0)	2025.03.14
[Node JS] 파일 관리(Path, file system), 노드와 비동기 처리 (0)	2025.03.13

토누 개발 일지