2019-12-21

VueStudy01 (Directive)

디렉티브는 라이브러리에서 DOM 엘리먼트가 무언가를 수행하도록 지시하는 토큰이다.

디렉티브를 경험해보기 위해 순서대로 아래 세가지 디렉티브를 다뤄보았다.

v-show
v-if
v-else

v-show

조건에 따라 엘리먼트를 표시하는 디렉티브이다.
v-show가 지정되면 항상 렌더링되어 DOM에 유지되며, 단순히 display css 속성을 전환하는 역할을 한다.

extarea에 메시지를 입력하지 않았을 때 제출 버튼이 표시되지 않도록 하는 간단한 예시

<html>
  <head>
    <title>v-show example</title>
  </head>
  <body>
    <h1>You must send a message for help!</h1>
    <div id="app">
      <textarea v-model="message"></textarea>
      <button v-show="message">Send to company for help!</button>
      <pre>{{ $data }}</pre>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        message: "I dont wanna be Gozol Mipeel baeksoo!"
      }
    });
  </script>
</html>

v-if

v-show와 v-if를 바꿔도 잘 작동한다.

v-show와의 차이점은 DOM에 유지되느냐 유지되지 않느냐의 차이이다. (v-if가 지정된 엘리먼트가 유지되지 않음)

간혹 여러 엘리먼트를 한 번에 토글해야 하는 경우엔 template 엘리먼트에서 v-if를 사용하면 된다. 이를 래퍼로 사용하는 것이 가능하다. (v-show를 template에 사용하는것은 불가)

<html>
  <head>
    <title>v-if example</title>
  </head>
  <body>
    <div id="app">
      <template v-if="!message">
        <h1>You must send a message for help!</h1>
        <p>Dispatch a messenger immediately!</p>
      </template>
      <textarea v-model="message"></textarea>
      <button v-if="message">Send to company for help!</button>
      <pre>{{ $data }}</pre>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        message: ""
      }
    });
  </script>
</html>

v-else

옆동네에서 흔히 사용하는 if-else문과 같다.
v-if 뒤에 붙어 쓰여야 하며, 그렇지 않으면 동작하지 않는다.

v-show 뒤에 붙어도 동작하지 않는다.

<html>
  <head>
    <title>v-else example</title>
  </head>
  <body>
    <div id="app">
      <h1 v-if="!message">You must send a message for help!</h1>
      <h2 v-else>You have sent a message!</h2>
      <textarea v-model="message"></textarea>
      <button v-show="message">Send company for help!</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        message: "I dont wanna be Gozol Mipeel baeksoo!"
      }
    });
  </script>
</html>

v-show vs v-if

v-show와 v-if의 차이점을 DOM에 유지되느냐 유지되지 않느냐로 들어놨지만, 퍼포먼스면에서도 차이점이 존재한다.

Cost	v-show	v-if
초기 렌더링	높음	낮음
토글	낮음	높음

따라서, 자주 토글해야 하는 경우에는 v-show를, 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용해야 할것이다.

Total views

# Directive, Javascript, Vue.js, 디렉티브