<Vue.js> 2. 템플릿 문법(1)

Vue.js 템플릿 문법(1)

1. 템플릿 문법이란?

• 템플릿은 실제 화면에 보일 HTML 틀 이라고 할 수 있다.
• 일정한 규칙 에 의해 해석되는 HTML 문서를 템플릿이라고 한다.
• 템플릿 문법을 사용하면 만들어진 데이터를 이용해 템플릿 블럭내에 DOM 조작이 가능하다.
• 템플릿 문법은 주로 디렉티브로 이루어져 DOM 엘리먼트에 속성을 추가하는 것을 의미한다.

2. 데이터 바인딩

• Vue인스턴스의 데이터를 연결하는 것을 의미한다.
• Mustache, v-text, v-html, v-bind가 주로 사용된다.

2.1 Mustache

• 두개의 중괄호{{}} 로 자바스크립트 표현식을 감싸면 Vue.js가 템플릿을 컴파일하면서 데이터 값을 바인딩한다.
• 값이 변경되면 변경된 값으로 다시 렌더링을 진행한다.

2.2 v-text

• Mustache와 비슷하게 작동을 하고 중괄호 대신 디렉티브를 이용해 데이터를 바인딩한다

<spen v-text="message"></span>

2.3 v-html

• HTML 문자열을 그대로 바인딩한다. (XSS 공격에 유의)

<spen v-html="message"></span>
<script>
new Vue({
    el : '#app',
    data : {
        message : 'Hi<br>Hi'
    }
  })
</script>

2.4 v-bind

• 태그의 속성 에 데이터를 바인딩하는 문법이다.
• 생략해서 :herf 형태로도 쓸수 있다.

<a id='app' v-bind:href = 'link'></a>
<script>
new Vue({
  el : '#app',
  data : {
      link : 'willbfine.tistroy.com'
  }
})
</script>

3. 조건문

3.1 v-if, v-else

<div id='app'>
  <div v-if="test == 'A' "> A </div>
  <div v-else-if="test == 'B'"> B </div>
  <div v-else> C </div>
</div>
<script>
new Vue({
  el : '#app',
  data : {
      test : 'A'
  }
})
</script>

3.2 template if

• v-if는 디렉티브라서 한가지 요소 밖에 적용할 수 없다.
• template을 통해 요소 여러개 를 처리할 있다.(가상 태그로 렌더링될때 사라진다.)

<template v-if="check">
  <div>A</div>
  <span>A</span>
  <input type='text'>
</template>
<template v-else>
  <div>B</div>
</template>

3.3 v-show

• v-if와 비슷한 동작을 하지만 false 일때 렌더링 되지않는다.(조기조건이 false일때는 렌더링된다.)
• v-show는 false일때 단순히 display 속성을 토글한다.(v-if는 DOM에서 삭제)
• 조건이 자주바뀌는 경우 v-show를 쓰는게 성능면에서 우세하다.

4. 반복문

4.1 v-for

<li v-for ='index in 10'>{{index}}</li> // in대신 of도 가능
<li v-for ='itm in items'>{{itm}} </li> // 리스트 데이터
<li v-for ='(itm,index)in items'>{{itm}} </li> // 리스트 데이터와 index

4.2 v-if와 v-for

• v-for가 v-if보다 우선순위가 높다.

<li v-for='index in 10' v-if='index == 5'><li> v-for가 동작할때마다 v-if가 실행된다.

4.3 key

• 잦은 DOM 조작은 브라우저의 성능을 급격하게 저하시킨다.
• 리스트에 렌더링 되는 아이템들의 변경이 자주발생하면 병목이 생길 수 있다.
• 이를 최적화하기 위해 key라는 디렉티브를 사용한다.

출처

• vue.js 이정도는 알아야지