Vue-template (3)

선언적 렌더링

일단 선언적 렌더링이란 무엇일까?
Vue의 template는 HTML과 거의 동일한 구조를 갖고 있으면서, 데이터 상태에 따라 UI를 선언적으로 기술할 수 있다.
'무엇을 보여줄까'를 목표중심으로 작성하면, 프레임워크가 그에 맞게 DOM을 알아서 업데이트한다.
명령적 프로그래밍은 document.getElementByID().innerText와 같은 형식으로 DOM을 직접 조작해야했다. 하지만 선언형 방식에서는 단순히 이렇게 보여줘 라고 선언만 하면 내부적으로 알아서 조작해준다.

이제 선언적 렌더링을 구현하는 도구인 template문법에 대해 알아보자
template 안에서 다음과 같은 문법을 사용한다는 것은
'이 상태일때 화면에서는 이렇게 보여줘' 라는 목표 상태를 선언해주고, Vue가 그에 맞게 DOM을 알아서 구성해준다.

{{ }} - Mustache 문법 (Interpolation)

보간법(Interpolation)이라고도 한다.
데이터의 값을 HTML에 출력해주는 문법이다.
script안 data()안에 작성한 key를 template에 데이터 바인딩을 할 수 있는 가장 기본 형태

<template>
	<h1>Hello {{ message }} </h1>
</template>
<script>
export default {
	data() {
    	return {
        	message: "Hello"
        }
    }
}

---

디렉티브란
v-접두사가 있는 특수 속성이다.

v-text

보간법과 동일하게 template에 데이터바인딩을 하는 방법이다

<template>
	<h1 v-text="animal" />
</template>

{{ }} 와 v-text의 차이점
1. 닫는 태그가 없어도 된다 ( 코드 간결성 )

<h1>Hello {{ message }}</h1>
<h1 v-text="message" />

2. {{ }} 는 엘리먼트 안에 다른 text가 있어도 되지만, v-text는 다른 text가 있을시 오류

<h1 v-text="message"></h1> O
<h1 v-text="message">123</h1> X

v-bind 속성 바인딩

HTML 속성에 데이터를 바인딩 한다.
: 으로 줄여서 사용이 가능하다.

<template>
	<img v-bind:src="imgUrl" />
	<!-- 축약형 -->
	<img :src="imgUrl" />
</template>

imgUrl의 값이 img 태그 안의 src 속성에 동적으로 바인딩된다.
값이 변경되면 이미지도 자동으로 갱신된다.

v-model 양방향 바인딩

사용자 입력과 데이터 상태를 동기화한다.

<template>
  <input v-model="username" />
  <p>입력한 이름: {{ username }}</p>
</template>

input에 입력한 값이 username 변수에 자동으로 반영된다
그리고 이에 따라 값이 바뀌면 p태그에 출력되는 내용도 실시간으로 바뀐다.
양방향 바인딩이기 때문에, 데이터와 뷰가 항상 동기화된다.

v-if / v-else-if / v-else 조건부 렌더링

지정한 뷰 데이터의 참,거짓에 따라 표시 여부를 선택한다.

<template>
  <p v-if="isLoggedIn">환영합니다!</p>
  <p v-else>로그인 해주세요.</p>
</template>

isLoggedIn이 true면 환영합니다 출력
false면 로그인 해주세요가 출력
해당 조건이 바뀔 때 마다 동적으로 표기

v-show 조건부 표시

DOM을 항상 렌더링하되, CSS display 속성으로 보이기/숨기기를 제어한다

<template>
  <p v-show="isVisible">이 문장은 조건에 따라 표시됩니다.</p>
</template>

isVissible이 true면 p태그가 보이고, false면 숨겨진다.

v-if와 v-show의 차이점
false인 경우 v-if는 아예 엘리멘트조차 생성되지않고, v-show의 경우 엘리멘트는 생성되어있지만 display:none;인 상태가 된다.

v-for 반복 렌더링

배열이나 객체를 기반으로 반복적으로 DOM을 생성

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index }} - {{ item }}
    </li>
  </ul>
</template>

items 배열을 순회하면서 각 요소마다 li태그를 생성한다
key를 안적어줄 경우 오류가 난다.

v-on 이벤트 핸들러 등록

사용자 이벤트(클릭,입력)에 대한 함수를 연결한다
@ 로 생략 가능

<template>
  <button @click="increment">클릭 수: {{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count += 1
    }
  }
}
</script>

버튼을 클릭하면 increment함수가 실행되고 count값이 1씩 증가한다.
count가 변경됨에 따라 text도 자동으로 갱신된다.

v-slot 컴포넌트 슬록

부모 컴포넌트가 자식 컴포넌트의 특정 위치에 콘텐츠를 삽입할 수 있도록 한다

<!-- 부모 컴포넌트 -->
<MyCard>
  <template v-slot:header>
    <h3>나의 헤더</h3>
  </template>
  <p>본문입니다.</p>
</MyCard>

<!-- MyCard.vue -->
<template>
  <div>
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
  </div>
</template>

v-slot:header는 slot name "header"에 삽입된다.

v-html HTML 문자열 렌더링

데이터 안의 HTML 문자열을 실제 HTML로 출력한다

<template>
  <div v-html="rawHtml"></div>
</template>

반드시 신뢰할 수 있는 데이터에서만 사용해야 한다는 위험이 있다. (XSS)
따라서 잘 사용하지 않는다.