템플릿 문법이란?
- 템플릿: 실제 화면에 보일 HTML의 문서
- 템플릿 문법: 템플릿 블럭에서 사용되는 문법
- 템플릿 문법은 주로 디렉티브(Directive)로 이루어져 있음
- 디렉티브(Directive): 번역하면 '지시문'이라는 의미로, v- 접두사가 있는 특수 속성, 속성 값은 단일 javascript 표현식
<div v-if="isShow">Hello, Vue!</div>데이터 바인딩
- 데이터 바인딩: 템플릿과 Vue 인스턴스의 데이터를 연결하는 것
1. Mustache
- 가장 쉬운 데이터 바인딩 문법
- HTML속성에서 사용할 수 없음
- 데이터 값이 변경된다면 바인딩된 View도 변경된 값으로 다시 템플릿을 렌더링 함
{{ expression }}2. v-text
- mustache와 거의 동일하게 작동
- javascript의 innerText와 같은 역할
- 중괄호로 감싸는 대신 디렉티브를 이용해 데이터 바인딩
<span v-text="message"></span>3. v-html
- javascript의 innerHtml과 같은 역할
- HTML태그가 적용된 화면이 그대로 보여짐
<span v-html="message"></span>
<script>
new Vue({
el: '#app',
data : {
message: 'Hello,<br>Vue!'
}
})
<script>4. v-bind
- 태그의 속성에 데이터를 바인딩하는 문법
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="app">
<a v-bind:href="naverLink">네이버 링크</a><br>
<a v-bind:href="githubLink">깃허브 링크</a>
</div>
<script src="https://unpkg.com/vue@2.3"></script>
<script>
new Vue({
el: '#app',
data: {
naverLink: 'http://www.naver.com/',
githubLink: 'https://github.com/'
}
});
</script>
</body>
</html>Javascript 표현식 사용
- 실제로 Vue.js는 모든 데이터 바인딩 내에서 javascript 표현식의 모든 기능을 지원
- 한가지 제한사항은 각 바인딩에 하나의 단일 표현식만 포함
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>조건문
v-if
- v-if는 조건이 true일 경우 보여지고 false일 경우 보여지지 않음
<h1 v-if="ok">Yes</h1>v-else, v-else-if
- 조건에 맞지 않는 경우에 보여질 템플릿 정의
<div id="app">
<div v-if="isIf">v-if true</div> <!-- v-if -->
<div v-else-if="!isIf">v-if false</div> <!-- v-else-if -->
<div v-else="isIf">v-if else</div> <!-- v-else -->
<div v-show="isShow">v-show true</div> <!-- v-show -->
</div>
<script>
new Vue({
el: '#app',
data: {
isIf: true,
isShow: true
}
});
</script>template if
- 여러 개의 엘리먼트를 묶어 한 번에 처리해야 할 때 사용
- template 엘리먼트는 가상 엘리먼트이기 때문에, 실제로 렌더링 될 때는 template엘리먼트 자식들만 렌더링이 됨
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>v-show
- 조건이 true일 경우 렌더링하고 false일 경우에는 렌더링 되지 않음
- v-if는 조건이 false일 경우 DOM 트리에서 아예 삭제가 되지만 v-show는 display CSS 속성을 토글함 - v-show는 구문을 지원하지 않으며 v-else와도 작동하지 않음
반복문
v-for
- 반복적인 엘리먼트를 렌더링
<li v-for="index in 100"> {{ index }} </li> //1부터 100까지 루프돌며 li 엘리먼트 렌더링v-for와 리스트
<div id="app"> <ul> <li v-for="number in numbers"> //item in list 형태로 자바스크립트 표현식 사용 {{ number }} </li> </ul> </div> <script src="https://unpkg.com/vue@2.3"></script> <script> new Vue({ el: '#app', data: { numbers: [1, 1, 2, 3, 5, 8, 13, 21] } }); </script>- index는 두 번째 인자로 전달되며 0부터 시작
v-for와 오브젝트
<div id="app"> <ul> <li v-for="(number, index) in numbers"> {{ index }}: {{ number }} </li> </ul> </div> <script src="https://unpkg.com/vue@2.3"></script> <script> new Vue({ el: '#app', data: { numbers: [1, 1, 2, 3, 5, 8, 13, 21] } }); </script>template v-for
- 여러 개의 엘리먼트를 포함시키고 싶을 때 사용
<template v-for="(item, key) in object"> <h1>{{ key }}</h1> <p>{{ item }}</p> </template>v-if와 v-for
- v-for가 v-if보다 높은 우선순위를 갖는다. 즉 v-if는 루프가 반복될 때마다 실행
- 반복 자체를 건너뛰는 것이 목적이라면 v-if를 상위 엘리먼트로 감싸 처리
:key
- Vue가 각 노드의 ID를 추적하고 기존 엘리먼트를 재사용하고 재정렬할 수 있도록 힌트를 제공하려면 각 항목에 고유한 key속성을 제공해야 함
- key에 대한 이상적인 값은 각 항목의 고유한 ID
- v-bind를 사용하여 동적 값에 바인딩 해야 함
- 반복되는 DOM 내용이 단순하지 않거나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 한 가능하면 언제나 v-for에 key를 추가하는 것이 좋음
<div v-for="item in items" :key="item.id"> <!-- content --> </div>
💻 Hello world