Vue - 조건부, 리스트 렌더링과 이벤트 핸들링

조건부, 리스트 렌더링과 이벤트 핸들링

• 조건부 렌더링
• 리스트 렌더링
• 이벤트 핸들링

 

 

1. 조건부 렌더링

1-1. v-if , v-else

• 조건부로 블록을 렌더링할 때 사용
• true 일 경우 렌더링
• v-else 디렉티브는 v-if or v-else-if 엘리먼트 바로 다음에 와야 한다. 

<h1 v-if="isValue">isValue 값이 true일 경우</h1>
<h1 v-else>isValue 값이 false일 경우</h1>

 

 

1-2. v-show

• 초기 조건과 관계없이 항상 렌더링되는 조건부 렌더링
• display CSS 속성이 전환

<h1 v-show="isValue">isValue가 true이면 표시, false이면 미표시</h1>

 

 

1.3. v-if vs v-show

v-if	v-show
조건이 true가 될 때까지 렌더링 되지 않는다. 전환 비용이 높다.(조건이 달라질 때마다 렌더링되기 때문)	조건과 상관없이 항상 렌더링 된다. 초기 렌더링 비용이 높다.(조건과 상관없이 렌더링되기 때문) 자주 전환해야 하는 경우 v-if보다 효율이 좋다.

 

 

 

2. 리스트 렌더링

2-1. v-for

• v-for 디렉티브는 배열을 리스트로 렌더링할 수 있다.
• 배열요소 in 배열

<!-- 사용 방법 -->
<li v-for="item in items">
  {{ item.message }}
</li>

<!-- index과 같이 사용 방법 -->
<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

<!-- 숫자 범위 사용 방법(0이 아닌 1부터 시작, 1~n) -->
<span v-for="n in 10">{{ n }}</span>

 

• 객체 또한 사용할 수 있다.

data() {
  return {
    myObject: {
      title: 'Vue에서 목록을 작성하는 방법',
      author: '홍길동',
      publishedAt: '2016-04-10'
    }
  }
}

<!-- 객체의 속성을 차례로 렌더링 -->
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- 출력 결과 -->
0. title: Vue에서 목록을 작성하는 방법
1. author: 홍길동
2. publishedAt: 2016-04-10

 

2-2. v-if 와 v-for

• 엘리먼트에서 함께 사용하는 것을 권자하지 않는다.
• v-if가 v-for보다 우선순위가 높기 때문에 v-if 조건문에서 v-for 변수에 접근할 수 없다.
• <template> 태그를 이용하여 사용

<!-- "todo" 속성이 인스턴스에 정의되어 있지 않기 때문에 에러가 발생합니다. -->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

 

 

2-3. key를 통한 상태유지

• key를 지정해주면 데이터의 변경을 감지하여 재렌더링을 진행
• 2.2.0 이상에서는 v-for에 key 값을 의무적으로 사용

<div v-for="item in items" :key="item.id">
  <!-- 내용 -->
</div>

 

 

3. 이벤트 핸들링

• v-on 디렉티브는 단축 문법인 @ 기호를 사용한다.
• v-on:click="handler"  ==  @click="handler"

 

3-1. 핸들러

<!-- 사용법 1 -->
data() {
  return {
    count: 0
  }
}

<button @click="count++">1 추가</button>
<p>숫자 값은: {{ count }}</p>


<!-- 사용법 2, 이벤트 객체 접근하기 1 -->
data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    alert(`안녕 ${this.name}!`) <!-- `this`는 메서드가 활성화된 현재 인스턴스를 가리킵니다. -->
    if (event) { <!--  'event'는 네이티브 DOM 이벤트 객체입니다. -->
      alert(event.target.tagName)
    }
  }
}

<button @click="greet">환영하기</button> <!-- 'greet'는 위에서 정의한 메서드의 이름입니다. -->

<!-- 이벤트 객체 접근하기 2 -->
methods: {
  warn(message, event) {
    // 이제 네이티브 이벤트 객체에 접근할 수 있습니다.
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)"> <!-- 특수 키워드인 $event 사용 -->
  제출하기
</button>

<button @click="(event) => warn('아직 양식을 제출할 수 없습니다.', event)"> <!-- 인라인 화살표 함수 사용 -->
  제출하기
</button>

 

 

3-2.  이벤트 수식어

<!-- 클릭 이벤트 전파가 중지됩니다. -->
<a @click.stop="doThis"></a>

<!-- submit 이벤트가 더 이상 페이지 리로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수식어를 연결할 수 있습니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 이벤트에 핸들러 없이 수식어만 사용할 수 있습니다. -->
<form @submit.prevent></form>

<!-- event.target이 엘리먼트 자신일 경우에만 핸들러가 실행됩니다. -->
<!-- 예를 들어 자식 엘리먼트에서 클릭 액션이 있으면 핸들러가 실행되지 않습니다. -->
<div @click.self="doThat">...</div>

<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용 -->
<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, 여기에서 먼저 핸들러가 실행됩니다. -->
<div @click.capture="doThis">...</div>

<!-- 클릭 이벤트는 단 한 번만 실행됩니다. -->
<a @click.once="doThis"></a>

<!-- 핸들러 내 `event.preventDefault()`가 포함되었더라도 -->
<!-- 스크롤 이벤트의 기본 동작(스크롤)이 발생합니다.        -->
<div @scroll.passive="onScroll">...</div>

 

3-3. 입력키 수식어

.enter	.ctrl
.tab	.alt
.delete	.shift
.esc	.meta
.space	.exact
.up
.down
.left
.right

• 키보드 이벤트를 수신할 때 사용

<!-- `key`가 `Enter`일 때만 `vm.submit()`을 호출합니다 -->
<input @keyup.enter="submit" />

<!--  $event.key가 'PageDown'일 경우에만 호출됩니다 -->
<input @keyup.page-down="onPageDown" />

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">시작하기</div>

<!-- 오직 Ctrl만 누른 상태에서 클릭해야 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 시스템 입력키를 누르지 않고 클릭해야지만 실행됩니다. -->
<button @click.exact="onClick">A</button>