IT/Font-end

[Vue.js] 디렉티브, 조건문과 반복문

omaeng 2020. 3. 31. 08:41

엘리먼트를 사용자에게 보여줄지 결정하여 웹에 표현하는것은 어렵지 않아요.

 

이제부터 우리가 Vue.js를 통해 개발하면서 주도적으로 사용하게 되는 디렉티브를 사용하면 됩니다.

 

여기서 잠깐, 디렉티브란?

v- 로 시작하는 모든 속성을 의미 합니다.

 

JSTL의 foreach나 if문 처럼 화면 요소를 더 쉽게 조작하기 위해 사용합니다.

 

  • v-if: if문과 같다. True, False 값에 따라 화면에 표시될지를 결정한다.
  • v-for: 지정한 뷰 데이터의 개수만큼 반복하여 출력한다.
  • v-show: css의 display:none으로 속성을 준다. If문의 경우 태그를 완전 삭제한다,
  • v-bind: Vue 데이터 속성과 html태그 기본속성을 연결해준다.
  • v-on: 화면요소의 이벤트를 감지하요 처리할 때 사용함
  • v-model: form에서 주로 사용되는 속성이다. 입력된 값을 인스턴의 데이터화 같게 해준다. form 데이터를 sumit할때 사용한다. (단, inputm select, textarea 태그에만 사용 가능하다.)

 

조건문

이제 v-if 디렉티브를 사용해 data를 제어해 보겠습니다.

 

이번에도 JS Bin https://jsbin.com/gafuyic/edit?html,js,output

 

JS Bin

Sample of the bin:

jsbin.com

을 통해 진행하겠습니다. 

 

먼저 HTML 화면, v-if가 어디에 위치해 있는지 유의해서 보세요!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</body>
</html>

JavaScript

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

 

output

이제 console을 통해 seen의 값을 false로 바꿔 output을 보겠습니다.

 

 

 

 

반복문

이어서, v-for 디렉티브를 살펴보도록 하겠습니다. 

 

Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 전환 효과 시스템을 제공 하는데요.

 

이는 곧 데이터의 변화에 민감하게 반응한다는 뜻이 됩니다.

 

리스트를 웹에서 보여줘야한다면, 정적으로 출력할 수 도 있겠지만, for문을 이용해서 리스트업 해줄 수도 있습니다.

 

데이터를 바인딩하여 간단한 todo list를 만들어 보겠습니다.

 

먼저 html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    <ol>
      <li v-for="todo in todos">{{todo.text}}</li>
    </ol>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</body>
</html>

 

다음으로 JavaScript

var app = new Vue({
  el:"#app",
  data:{
    todos:[
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
  
})

 

이제 output을 보겠습니다.

 

 

data에 있는 todos 배열에 올바르게 출력된게 보이시나요?

 

이렇게 Vue의 조건문과 반복문에 대해서 알아봤습니다.

 

완성된 코드를 복붙하는 것도 빠른 이해를 돕는데 도움이 되지만, 역시 튜토는 직접 작성 하면서 오류를 만나고 왜 안나와, 왜 안변해 를 반복하는 것이 습득하는데 최고라 생각됩니다. 이렇게 간단한 튜토리얼을 진행하는데 오류를 만나 구조에 대해서 공부했습니다.