기록/FRONTEND

[Vue] Directives

5월._. 2022. 5. 16.

728x90

1. 디렉티브

- v-접두사가 있는 특수 속성이다.

- 디렉티브 속성 값은 단일 Javascript 표현식이 된다.(v-for는 예외)

- 디렉티브의 역할은 표현식의 값이 변경될 때 사이트 이펙트를 반응적으로 DOM에 적용하는 것이다.

2. 종류

v-text	v-model	v-show
v-once	v-bind	v-if
v-html	v-for	v-else-if
v-cloak	v-on	v-else

1) v-text

데이터 바인딩의 가장 기본 형태인 {{속성명}} 이중 중괄호를 사용한 것과 동일하다.

이렇게 코드를 작성하면 <p>속성값</p>으로 렌더링된다.

<p v-text="속성명"></p>

2) v-once

데이터 변경 시 업데이트되지 않는 일회성 보간을 수행할 수 있다.

<p v-once>{{속성명}}</p>

3) v-html

속성값을 텍스트가 아닌 HTML로 데이터를 출력한다.

XSS 공격때문에 권장하는 방식은 아니다.

<p v-html="속성명"><!-- 이 안에 속성값html이 들어간다. --></p>

4) v-cloak

뷰 인스턴스가 준비될 때까지 바인딩을 숨기는데 사용한다. 뷰 인스턴스가 준비되면 v-cloak는 제거된다.

[v-cloak]{display:none}과 같은 css 규칙과 함께 사용한다.

아래 코드는 2초 뒤 뷰 인스턴스가 생성되면 "로딩중"에서 "hello"로 div 안의 데이터가 변경된다.

<style>
[v-cloak]::before{
	content:"로딩중"
}
[v-cloak] > * {
	display:none;
}
</style>

<div id="app">
	<div v-cloak>{{msg}}</div>
</div>

<script>
	//2초 뒤 뷰 인스턴스 생성
    setTimeout(function(){
        new Vue({
            el:"#app",
            data(){
            	return{
                    msg:"hello"
                }
            }
        })		
    },2000);
</script>

5) v-model

양방향 바인딩처리를 위해 사용한다. (form의 input, textarea)

뷰의 데이터가 변경되면 html도 변경되고, html에서 변경되었다면 뷰 데이터도 변경된다.

이 코드는 처음에는 "초기값"으로 input value가 설정되어있다가 input value를 변경하면 vue의 데이터(item)도 같이 변경되어 input 밑 div도 변한다.

<div id="app">
    <input type="text" v-model="속성명">
    <div>{{item}}</div>
</div>

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                속성명:"초기값"
            }
        }
    });
</script>

form 사용 예

checkbox 한 개		속성값이 true, false인지에 따라 체크박스가 체크된다.
checkbox 여러 개		같은 배열을 바인딩한다. 체크박스를 선택한 순서에 따라 value가 저장된다. 배열의 값과 checkbox의 value가 같을 때 체크처리된다. 옆의 코드에서 둘 다 체크한다면 배열에 이런 식으로 저장된다.
radio		선택된 항목의 value 속성값을 관리한다. 동일한 value의 radio를 체크한다.
select		선택된 항목의 value 속성을 관리한다. v-model 표현식의 초기값이 어떤 옵션에도 없다면 <select>element는 선택없음 상태로 렌더링된다. + multiple을 사용하면 여러 개를 select해서 배열에 저장할 수 있다.(checkbox여러개와 동일한 방식)

수식어

.lazy	<input v-model.lazy="변수명">	change 이벤트 이후에 동기화한다. 데이터 입력이 모두 끝나고 포커싱아웃되면 데이터가 바인딩된다.
.number	<input v-model.number="변수명">	사용자 입력이 자동으로 형변환된다.
.trim	<input v-model.trim="변수명">	앞 뒤 공백을 제거한다.

6) v-bind

엘리먼트의 속성과 바인딩처리를 위해 사용한다. 약어로 ":"를 사용할 수 있다.

:어트리뷰트="속성명"을 사용한다면 해당 어트리뷰트에 속성값이 바인딩된다.

예를 들어 클래스를 바인딩 할 때, 변수값이 true면 클래스를 추가하고 false면 클래스를 적용하지 않는다.

:[속성명]="값"을 사용한다면 해당 속성값 어트리뷰트에 값이 바인딩된다. 어트리뷰트를 속성명으로 바인딩 할 경우에 꼭 []를 붙여야하는걸 기억해야 한다.

아래 코드에서 v-bind:id="idValue"는 id="test-id"로 변경되고, :[key]="btnId"는 class="btn1"로 변경된다.

isActive가 true이므로 active클래스가 div에 생길 것이다.

<head>
...
    <style>
        #btn1 {
            width:200px;
            background-color:blueviolet;
        }
        .btn1 {
            width:250px;
            background-color:blue;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:id="idValue">메세지</div>
    <button :[key]="btnId" :key="key">버튼</button>
    <a :href="url1">이동하기</a>
    <div v-bind:class="active:isActive">
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                idValue:"test-id",
                key:"class",
                btnId:"btn1",
                url1:"http://www.naver.com",
                isActive:true
            };
        }
    });
</script>

7) v-show

조건에 따라 엘리먼트를 화면에 렌더링한다. style의 display를 변경한다.

v-show 조건이 false라면 오른쪽처럼 style="display:none;"이 추가된다.

<div id="app">
    <div v-show="isShow">{{msg}}</div>
</div>
<script>
new Vue({
    el:"#app",
    data(){
        return{
            msg:"Hello",
            isShow:true
        };
    }
});
</script>

8) v-if, v-else-if, v-else

조건에 맞는 엘리먼트만 화면에 렌더링한다.

오른쪽처럼 해당되지 않는 조건은 아예 보이지 않는다.

<div id="app">
    <div>
        <span>나이 : </span>
        <input type="number" v-model="age" />
    </div>
    <div>
        요금 :
        <span v-if="age < 10">무료</span>
        <span v-else-if="age < 20">7000원</span>
        <span v-else-if="age < 65">10000원</span>
        <span v-else>3000원</span>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            age: '0',
        },
    });
</script>

v-show와 v-if의 차이점

	v-show	v-if
렌더링	항상 O	false인 경우 X
false인 경우	display:none; 적용	엘리먼트 삭제
template 지원	X	O
v-else 지원	X	O

9) v-for

배열이나 객체의 반복에 사용한다.

v-for="요소변수이름 in 배열", v-for="요소변수이름, 인덱스 in 배열"처럼 사용한다.

객체반복은 객체에 있는 요소를 하나씩 출력한다.

★ v-for과 v-if를 동시사용하면 안된다. 2.x버전에서는 v-for가 우선순위를 가지고, 3.x버전에서는 v-if가 더 높은 우선순위를 가지기 때문이다. 또, v-for과 v-if를 동시에 사용하면 필요없는 부분까지 전부 렌더링 한 후 거르기 때문에 속도가 저하된다.

<!--단순 for문-->
<div v-for="i in 5" :key="i">{{i}}번</div>
<!--객체 반복-->
<div v-for="value in 객체이름">{{value}}</div>
<!--배열 반복-->
<div v-for="(배열요소이름,index) in 배열명" :key="index">{{index+1}}. {{배열요소이름}}</div>

v-for과 v-model을 사용한 동적 option 렌더링

options은 text와 value가 있는 객체 배열이다. options를 가지고 select를 채운 뒤 선택된 값을 selectArea에 저장한다.

<select v-model="selectedArea">
  <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>

10) v-on

v-on: 을 "@"로 대체할 수 있다. DOM 이벤트를 듣고 트리거될 때 javascript를 실행한다.

자세한 내용은 [Vue] Event 글에 정리했다.

<!-- javascript -->
<button v-on:click='counter+=1'>클릭</button>

<!-- @ 대체 -->
<button @click='메소드이름'>클릭</button>

'기록 > FRONTEND' 카테고리의 다른 글

[JS] Module (0)	2022.05.20
[Vue] Component (0)	2022.05.19
[Vue] Event (0)	2022.05.18
[Vue] Vue Instance (0)	2022.05.17
[Vue] Vue.js (0)	2022.05.15