디렉티브

  • HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다.
  • <a v-if="flag">듀잇 Vue.js</a>
  • 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브(Reactive)하게 반응하여 변경된 데이터 값에 따라 갱신된다.
자주 사용하는 디렉티브
  1. v-if : 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.
  2. v-for : 지정한 뷰 데이터의 갯수 만큼 해당 HTML 태그를 반복 출력합니다.
  3. v-show : v-if 유사하게 뎅터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효고만 display:none; 로 주어 실제 태그는 남아 있고 화면상에 보이지 않는다.
  4. v-bind :  HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
  5. v-on : 화면 요쇼의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어 v-on:click는 해당 태그의 클릭이벤트를 감지하여 특정 메서드를 실행할 수 있다.
  6. v-model : 폼(form)에서 주로 사용되는 속성이다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화 한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행. <input> , <select> , <textarea> 태그에만 사용 가능


<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>


<div id="app">

<a v-if="flag">듀잇 Vue.js</a>

<ul>

<li v-for="system in systems">{{system}}</li>

</ul>

<p v-show="flag">듀잇 Vue.js</p>


<h5 v-bind:id="uid">뷰 입문서</h5>

<button v-on:click="popupAlert">경고 창 버튼</button>

</div>


<script src="https://unpkg.com/vue"></script>

<script>

new Vue({

el : '#app',

data : {

flag : true,

systems: ['android', 'ios', 'window'],

uid : 10

},

methods:{

popupAlert : function(){

return alert('경고 창 표시')

}

}

})

</script>

</body>

</html>







'Vue' 카테고리의 다른 글

Cli설치시 에러  (0) 2019.08.02
이벤트 처리  (0) 2019.08.02
엑시오스  (0) 2019.08.02
뷰리소스  (0) 2019.08.02
네스티드 라우터(Nested Router), 네임드 뷰(Named View)  (0) 2019.08.02

+ Recent posts