본문 바로가기
🧠TIL/Vue

Vue.js - Directive (지시문)

by jinyyya 2022. 11. 13.

Vue에서 사용되는 Directive 종류

v-text

<div id="app2">
  <p v-text="message"></p>
  <p>{{ message }}</p>
</div>

<!-- Vue CDN -->
<script>
const app2 = new Vue({
  el: '#app2',
  data: {
    message: 'Hello!',
  }
})
</script>
  • Template Interpolation과 함께 가장 기본적인 바인딩 방법
  • {{ }} 와 동일한 역할
  • innerText 속성에 연결된다.
  • 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타난다.

v-html

<div id="app2">
  <p v-html="html"></p>
</div>

<!-- Vue CDN -->
<script>
const app2 = new Vue({
  el: '#app2',
  data: {
    message: 'Hello!',
    html: '<a href="https://www.google.com">GOOGLE</a>'
  }
})
</script>
  • RAW HTML을 표현할 수 있는 방법
  • innerHtml 속성에 연결된다.
  • 태그 문자열을 파싱하여 화면에 나타낸다.
  • 단, 사용자가 입력하거나 제공하는 컨텐츠에는 절대 사용 금지
  • XSS 공격 등에 취약하기 때문에 꼭 필요한 경우가 아니면 v-text를 사용하는 것을 추천한다.

v-show

<div id="app3">
  <p v-show="isActive">Hello</p>
</div>

<!-- Vue CDN -->
<script>
const app3 = new Vue({
  el: '#app3',
  data: {
    isActive: false
  }
})
</script>
  • 표현식에 작성된 값에 따라 element를 보여줄 것인지 결정
    • boolean 값이 변경될 때마다 반응
  • 대상 element의 display 속성을 기본 속성과 none으로 toggle
  • 요소 자체는 항상 DOM에 렌더링된다.
  • 바인딩 된 isActive의 값이 false이므로 첫 방문 시 p tag는 보이지 않는다.
    • vue dev tools에서 isActive 변경 시에 화면에 출력된다. (값을 false로 변경하면 다시 사라진다.)
  • 화면에서만 사라졌을 뿐, DOM에는 존재한다. (display 속성이 변경되었을 뿐이다.)
  • Expensive initial load, cheap toggle

v-if

<div id="app3">
  <p v-if="isActive">Hello</p>
</div>

<!-- Vue CDN -->
<script>
const app3 = new Vue({
  el: '#app3',
  data: {
    isActive: false
  }
})
</script>
  • v-show와 사용 방법은 동일하다.
  • isActive의 값이 변경될 때 반응한다.
  • 단, 값이 false인 경우 DOM에서 사라진다.
  • v-if v-else-if v-else 형태로 사용
  • Cheap initial load, expensive toggle

v-for

<div id="app">
  <h2>String</h2>
  <!-- <div v-for="char in myStr"> -->
  <div v-for="(char, index) in myStr">
    <p>{{ index }}번째 문자열 {{ char }}</p>
  </div>
</div>

<!-- Vue CDN -->
<script>
const app = new Vue({
  el: "#app",
  data: {
    myStr: 'Hello, World!'
  }
})
</script>
  • 반복한 데이터 타입에 모두 사용 가능하다.
  • index를 함께 출력하고자 한다면 (char, index) 형태로 사용한다.
<h2>Array</h2>
<div v-for="(item, index) in myArr2">
  <p>{{ index }}번째 아이템</p>
  <p>{{ item.name }}</p>
</div>

<script>
const app = new Vue({
  data: {
    myArr2: [
      { id: 1, name: 'python' },
      ...
    ],
  },
})
</script>
  • 배열도 문자열과 동일하게 사용 가능하다.
  • 각 요소가 객체라면 dot notation으로 접근할 수 있다.
<h2>Object</h2>
<div v-for="(value, key) in myObj">
  <p>{{ key }} : {{ value }}</p>
</div>

<script>
const app = new Vue({
  data: {
    myObj: {
      name: 'aiden',
      age: 100
    },
  },
})
</script>
  • 객체 순회 시 value가 할당되어 출력된다.
  • 2번째 변수 할당 시 key 출력 가능하다.

특수 속성 key

  • v-for 사용 시 반드시 key 속성을 각 요소에 작성해야 한다.
  • vue 화면 구성 시 이전과 달라진 점을 확인하는 용도로 활용된다. (따라서 key가 중복되어서는 안된다.)
  • 각 요소가 고유한 값을 가지고 있지 않다면 생략이 가능하다.

v-on

<div id="app">
  <button v-on:click="number++">increase Number</button>
  <p>{{ number }}</p>
</div>

<!-- Vue CDN -->
<script>
const app = new Vue({
  el: '#app',
  data: {
    number: 0,
  },
})
</script>
  • : 을 통해 전달 받은 인자를 확인한다.
  • addEventListener의 첫 번째 인자와 동일한 값들로 구성
  • 대기하고 있던 이벤트가 발생하면 할당된 표현식이 실행된다.
  • method를 통해 data 조작도 가능하다.
  • : 을 통해 전달된 인자에 따라 특별한 수식어가 있을 수 있다.
  • shortcut : @

v-bind

<div id="app2">
  <a v-bind:href="url">Go To GOOGLE</a>
</div>

<!-- Vue CDN -->
<script>
const app2 = new Vue({
  el: '#app2',
  data: {
    url: 'https://www.google.com/',
  },
})
</script>
  • HTML 기본 속성에 Vue data를 연결
  • class의 경우 다양한 형태로 연결 가능
    • 조건부 바인딩
      • {’class Name’ : ‘조건 표현식’}
      • 삼항 연산자도 가능
    • 다중 바인딩
      • [’JS 표현식’, ‘JS 표현식’, …]
  • Vue data의 변화에 반응하여 DOM에 반영하므로 상황에 따라 유동적인 할당이 가능하다.
  • shortcut : :

v-model

<div id="app">
  <h3>{{ myMessage }}</h3>
  <input v-model="myMessage" type="text">
  <hr>
</div>

<!-- Vue CDN -->
<script>
const app = new Vue({
  el: '#app',
  data: {
    myMessage2: '',
  },
})
</script>
  • Vue instance와 DOM의 양방향 바인딩
  • Vue data 변경 시 v-model로 연결된 사용자 입력 element에도 적용된다.

댓글

티스토리툴바