인스턴스와 디렉티브

Yechan·2020년 6월 7일

vue

Vue.js 기본만 하자

목록 보기

4/4

Vue의 인스턴스와 기본적으로 제공되는 지시문인 디렉티브는 어떤 것들이 있는지 살펴보겠습니다.

대부분의 설명과 예제코드들은 Vue 공식 도큐먼트를 참고하였습니다.

Instance

Vue 어플리케이션은 Vue 함수로 인스턴스를 만드는 것부터 시작합니다.

<script>
  const vm = new Vue({
    // 옵션들
    el: '#app',
    data: {
      msg: 'Hello'
    }
  });
</script>

스크립트 영역에서 위와 같이 뷰 인스턴스 생성 하며 객체 형태의 옵션을 인자로 넘겨주고 있습니다. 기본적으로 사용하게 되는 옵션들을 먼저 보겠습니다.

el 옵션

el 옵션은 Vue 인스턴스를 마운트할 Dom Element를 설정할 때 사용되며 값으로 "CSS 선택자"가 들어갑니다.
CSS 선택자를 통해 Element를 지정할 수 있으므로 Element의 id값이나 class 값을 이용할 수 있습니다.

다만 Vue 인스턴스는 반드시 하나의 Element에만 마운트될 수 있으므로 보통 id값을 선택자로 사용하며class 값과 같이 여러개의 Element들이 선택되는 경우에는 가장 먼저 등장하는 Element가 마운트 됩니다.

data 옵션

data 옵션은 인스턴스 내부에서 사용되는 데이터로 객체나 함수가 지정될 수 있습니다. el 옵션과 다르게 여러개의 데이터를 저장할 수 있습니다.

data옵션으로 저장된 데이터들은 Mustache라고 불리는 이중 중괄호 안에 데이터의 속성명을 넣어서 간편하게 텍스트 보간(Interpolation)을 할 수 있습니다.

<div id="app">
  <span>Messsage: {{ msg }}</span>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
  		msg: 'message',
  	}
  });
</script>

데이터 바인딩이 되어 있으므로 msg 값이 변경되는 경우 자동으로 업데이트된 상태를 유지합니다. 따라서 여러곳에서 데이터가 보간된 경우 값이 변경되더라도 일일이 전부 바꿔주어야할 필요가 없습니다.

Mustache를 사용하여 보간할 때는 {{ }} 중괄호안에 데이터의 속성명 뿐만 아니라 간단한 연산을 위한 자바스크립트 표현식을 넣을 수도 있습니다.

<div id="app">
  <h3>{{ msg.toUpperCase() }}</h3>
  <h3>{{ flag ? 'Yes' : 'No' }}</h3> <!-- 3항 연산자까지는 사용 가능 -->
  <h3>{{ num + 3 }}</h3>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
  		msg: 'message',
  		flag: true,
  		num: 2,
  	}
  });
</script>

단 하나의 단일 표현식만 포함될 수 있으며 선언, 조건문, 반복문과 같은 형태는 사용할 수 없습니다.

<!-- 모두 불가능 -->
{{ if(flag) { return msg } }} 
{{ var a = 3 }}

이와 같이 Mustache 안에 간단한 연산 정도는 넣을 수 있지만 복잡한 연산 같은 경우는 가급적 따로 빼내어 인스턴스의 computed 옵션 속성으로 관리하는 것이 권장됩니다.

Directive

디렉티브는 v- 접두사를 가지는 특수한 속성으로서 값은 Mustache와 마찬가지로 단일 자바스크립트 표현식을 가질 수 있습니다.

다음과 같은 주요 디렉티브의 사용 예제를 들어 알아보겠습니다.

v-text
v-html
v-once
v-model
v-bind
v-show
v-for

v-text와 v-html

v-text : html을 이스케이프 처리합니다. (innerText와 동일)
v-html : html을 파싱하여 처리합니다. (innerHtml과 동일)

두가지 모두 원래 Dom Element가 가지고 있던 값을 대체합니다.

<div id="app">
  <!-- "<h2>test</h2>" 문자열이 그대로 출력 -->
  <div v-text="rawHtml">대체됨</div>
  <!-- <h2> 태그가 적용된 결과가 출력 -->
  <div v-html="rawHtml">대체됨</div>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
  		rawHtml: '<h2>test</h2>',
  	}
  });
</script>

디렉티브의 값으로 들어가 있는 rawHtml는 단순한 문자열이 아니라 자바스크립트 표현식으로서 취급됨을 주의해야 합니다.

v-once

일회성 보간이 수행되며 이후 데이터 변경 시 업데이트 되지 않습니다.

<span v-once>Message: {{ msg }}</span>

v-model

양방향 바인딩 처리를 위해서 사용되며 주로 input 이나 select와 같은 Form 요소에 적용되어 사용됩니다.

<div id="app">
  <input type="text" v-model="msg">   <!-- 양방향 -->
  <div>{{ msg }}</div>                <!-- 단방향 -->
  <input type="text" :value="msg" v-show="isExist"> <!-- 단방향 (v-bind 디렉티브 사용) -->
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
  		msg: 'hello',
  		isExist: true,
  	}
  });
</script>

v-model 디렉티브를 이용해 양방향 바인딩 처리된 경우 Dom(화면)에서 데이터를 수정할 수 있습니다. 데이터 수정 시 양방향으로 항상 업데이트된 상태를 유지하기 때문에 더이상 jQuery의 selector를 이용해 값을 직접 읽어올 필요가 없습니다.

추가적으로 v-model 디렉티브에는 몇가지 Modifier를 붙여 사용할 수 있습니다.

v-model.lazy : 입력 시 마다 이벤트가 발생되지 않고 입력이 완료되고 focus가 다른 곳으로 옮겨갈 때 이벤트가 발생합니다.
v-model.number : 입력 받은 문자열을 숫자형으로 자동 캐스팅하는 효과를 가집니다.
v-model.trim : 문자열의 양 끝 공백을 제거합니다.

v-bind

Element의 속성 값을 바인딩하고 싶은 경우 사용합니다.
이미지 태그나 앵커 태그의 src 및 href 속성 값을 동적으로 바꿔야 하는 경우 유용하게 쓰일 수 있습니다. (클래스 속성에 바인딩 하여 CSS 토글처럼 사용)

<div id="app">
  <!-- 속성을 바인딩 합니다. -->
  <div v-bind:id="idValue">v-bind 지정 연습</div>
  <!-- 속성의 Key값을 바인딩 합니다 -->
  <button v-bind:[key]="btnId">버튼</button>

  <!-- 약어 (v-bind를 콜론(:)으로 줄여씀)-->
  <div :id="idValue">v-bind 지정 연습</div>
  <button :[key]="btnId">버튼</button>
</div>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      idValue: 'test-id',
      key: 'id',
      btnId: "btn1"
  	}
  });
</script>

v-show

조건에 따라 Element를 화면에 표시합니다. 속성 값으로 true 또는 false를 가질 수 있으며 false인 경우 화면에서 숨기기 위해 해당 element의 style 속성의 display=none; 을 추가하는 방식으로 동작됩니다.

<div id="app">
  <!-- v-model 디텍티브를 통해 양방향 바인딩 되어 있습니다. -->
  <input type="text" v-model="msg" placeholder="텍스트를 입력하세요">
  <!-- msg의 문자열 길이가 1 이상인 경우에만 보이게 됩니다. -->
  <h3 v-show="msg.trim().length > 0">텍스트를 입력했습니다.</h3>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
  		msg: 'hello',
  	}
  });
</script>

v-for

배열이나 객체의 반복에 사용하며
v-for="요소변수이름 in 배열" 또는 v-for="(요소변수이름, 인덱스) in 배열" 형태로 쓰일 수 있습니다.

<div id="app">
  <ul>
    <li v-for="(name, index) in regions" :key="'item_' + index">
      번호 : {{ index }}, 국가 : {{ name }}
    </li>
  </ul>
</div>
<script>
  new Vue({
  	el: "#app",
  	data: {
  		countries: ["한국", "중국", "일본", "미국"]
  	}
  });
</script>

v-cloak

Vue 인스턴스가 완전히 준비되어 마운트가 완료될 때까지 Mustache 바인딩을 숨기고 싶은 경우 사용합니다.
인스턴스의 준비가 끝나면 바인딩이 다시 보이게 되고 v-cloak 디렉티브는 자동으로 제거됩니다.

[v-cloak] { display: none; } 과 같은 CSS 규칙을 추가해주어야 작동합니다.

<div id="app">
  <h1>바로 보입니다. - {{ msg }}</h1>
  <h1 v-cloak>2초 후에 보입니다. - {{ msg }}</h1>
</div>
<script>
  setTimeout(function () {
    new Vue({
      el: "#app",
      data: {
        msg: "hello!"
      }
    });
  }, 2000);
</script>

template

조건문이나 반복문 디렉티브를 사용하는 경우 여러개의 태그를 묶어서 처리할 때 사용합니다.
여러 태그들을 묶기 위해 별도의 div 태그를 감싸 주지 않아도 되기 때문에 화면 상에 따로 영향을 주지 않고 처리할 수 있어 편리합니다.

<div id="app">
  <ul>
    <template v-for="(name, index) in regions" :key="'item_' + index">
      <h3>번호 : {{ index }}</h3>
      <h3>국가 : {{ name }}</h3>
    </template>
  </ul>
</div>
<script>
  new Vue({
  	el: "#app",
  	data: {
  		countries: ["한국", "중국", "일본", "미국"]
  	}
  });
</script>