템플릿 문법이란?
- 템플릿 : 실제 화면에 보일 HTML의 틀
- 템플릿 : 일정한 룰에 의해 해석되는 HTML문서
- 템플릿 문법 : 템플릿 블럭에서 사용되는 문법
- 템플릿 문법은 주로 디렉티브(Directive)로 이루어져 있음
- 디렉티브(Directive) : v- 접두사가 있는 특수 속성, 속성 값은 단일 javascript 표현식
<div v-if="isShow">Hello, Vue!</div>데이터 바인딩
- 데이터 바인딩 : 템플릿과 Vue 인스턴스의 데이터를 연결하는 것
1. Mustache
- 가장 쉬운 데이터 바인딩 문법
- html 속성에서 사용할 수 없음
{{ expression }}- 데이터 값이 변경된다면 바인딩된 View도 변경된 값으로 다시 템플릿을 렌더링
2. v-text
- mustache와 거의 동일하게 작동
- 중괄호로 감싸는 대신 디렉티브를 이용해 데이터 바인딩
<span v-text="message"></span>3. v-html
- 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는
<template>구문을 지원하지 않으며 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>- 전달인자를 추가하는 것만으로 키값을 얻을 수 있음
- key 전달인자도 두 번째 전달인자로 포함
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를 사용하여 동적 값에 바인딩 해야 함
<div v-for="item in items" :key="item.id">
<!-- content -->
</div>- 반복되는 DOM 내용이 단순하지 않거나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는한
가능하면 언제나 v-for에 key를 추가하는 것이 좋음
주의사항
- 언어 차원의 문제로 막지 못한 두가지 array 접근은 Vue의 오작동을 유발할 수 있음
- Array의 length를 직접 변경하기
- Array의 특정 index에 해당하는 값을 직접 설정할 때
wow!