🌱 뷰 디렉티브(Directive)
- html 태그 안에 v-접두사를 가지는 모든 속성을 의미함.
주요 디렉티브 모음
v-if : (조건문) 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 화면에 표시.
(거짓일 시 안보이는거 = 태그 자체를 안보여줌.)
v-for : (반복문) 지정 뷰 데이터 갯수만큼 해당 html태그 반복 출력. - v-if, else-if, else등과같이 쓸 수없음. 쓰려면 부모에 조거너 달아줄 것.
v-show : v-if와 유사하게 데이터의 진위 여부에 따라 해당 html태그를 표시하거나 표시하지 않음.
(css효과 상으로만 display:none;으로 가려 화면상으로는 보이지 않지만 태그는 남아있는 상태)
v-bind : 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용 (단방향)
v-on : 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용
(함수 연결할 때 밖에 안씀 ex) @click)
v-model : v-bind와 v-on의 조합. form에서 주로 사용되는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장해 서버에 보내거나, watch와 같은 고급속성을 이용해 추가 로직을 수행할 수 있음. (양방향)
= input, select, textarea 태그에서만 사용 가능
v-bind:aaa = :aaa
v-on:click = @click
👉 v-bind, v-on 위 두 개만 :, @으로 줄여 쓸 수 있음. 나머지는 노노.!!
ex)
...
<div id='test'>
<template v-if='number===1'>
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<div v-else-if='number===2'>hellow</div>
<div v-else>no!!!</div>
<button @click='increaseNumber'>버튼</button>
<br/>
<a v-if='flag'> 할 수 있다 !! </a>
<ul>
<li v-for='person in people'> {{ person }} </li>
</ul>
<h5 v-bind:id='uid'>뷰 입문서</h5>
<button @click='onClickBtn'>경고창 버튼</button>
</div>
...
<script>
new Vue({
el: '#test',
data : {
flag: true,
people: ['호두', '자두', '찐빵', '웬즈', '뚱이'],
uid: 10,
methods: {
onClickBtn : function(){
return alert('경고!!경고입니다!!')
}
}
}
});
</script>
Front-end