Template
HTML,CSS 등 마크업 속성과 뷰 인스턴스에서 사용자가 볼 수 있는 html 형식으로 변환해주는 속성
- Directive를 사용한다.
Directive
Vue 의 기능들을 사용하기 위해서 사용하는, HTML 태그 안에 들어가는 하나의 속성
v- prefix를 지니고 있음
Directive 종류
v-text
- 자바스크립트의 innerText와 같은 기능이고 html 적용이 안되며 문자열 그대로 보여줌
{{ }}로 대체하여 사용 가능
<h1>Hello
<span v-text="name"></span>
</h1>
OR
<h1>Hello
{{ name }}
</h1>
var app = new Vue({
el:
'#app',
data: {
name: '이탈릭'
}
});
결과 : Hello 이탈릭
v-html
- 자바스크립트의 innerText와 같은 기능이지만 html 태그가 적용된 화면이 보여짐
- v-text와 사용 방법 동일
<h1>Hello
<span v-html ="name"></span>
</h1>
var app = new Vue({
el:
'#app',
data: {
name: '이탈릭'
}
});
결과 : Hello 이탈릭v-show
- 해당 엘리먼트가 보여질지 안보여질지 유무를 선택할 수 있다.
<h1>Hello
<span v-show="visible" v-html ="name"></span>
</h1>
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
data: {
name: '<i>이탈릭</i>',
visible: false // true면 보여줌
}
});
결과 : 이탈릭 문구가 안보임v-if
- 자바스크립트의 if문과 동일
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
var app = new Vue({
el: '#app',
data: {
value: 10
}
});
결과 : "value 가 5보다 크군요" 값이 노출 됨v-else
- v-if와 같이 사용 되며 if가 아닐 시 노출 됨
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else>value 가 5 보다 작아요</h1>
var app = new Vue({
el: '#app',
data: {
value: 3
}
});
결과 : "value 가 5 보다 작아요"가 노출됨v-else-if
- if가 아니며 또다른 if 조건을 넣을 때 사용합니다.
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5 보다 작아요</h1>
var app = new Vue({
el: '#app',
data: {
value: 5
}
});
결과 : "값이 5네요"가 노출됨v-pre
- 특정 엘리먼트를 무시할 때 사용함
- Vue 시스템에서 해당 엘리먼트는 지시문이 없다는걸 인식함
- 컴파일 속도가 빨라짐
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5 보다 작아요</h1>
<h1 v-pre>{{ 조건 안탑니다 }}</h1>
var app = new Vue({
el: '#app',
data: {
value: 5
}
});
결과 : "값이 5네요 {{ 조건 안탑니다 }}"가 노출 됨 v-cloak
- 자바스크립트가 실행 되기 전에, html 코드를 숨기고 싶을 때 사용함
- 스타일을 지정해줘야하는 특징이 있음
<div id="app" v-cloak>
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5보다 작아요</h1>
<h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
<style>
[v-cloak]{
display: none;
}
</style>v-once
- 컴포넌트 초기에 딱 한번만 렌더링이 진행됨
- 주로 변동이 없는 정적인 부분을 보여줄 때 사용함
<h1 v-if="value > 5">value 가 5보다 크군요</h1>
<h1 v-else-if="value === 5">값이 5네요</h1>
<h1 v-else>value 가 5 보다 작아요</h1>
<h1 v-once>초기 밸류 : {{value}}</h1>
<h1 v-pre>{{ 조건 안탑니다 }}</h1>
var app = new Vue({
el: '#app',
data: {
value: 5
}
});
결과 : "값이 5네요 초기 밸류 : 5 {{ 조건 안탑니다 }}"가 노출 됨 v-bind
- 태그의 속성을 동적으로 변환하고 싶을 때 사용
- 머쉬태그를 사용하기도 함 -> {{ }}
v-bind : 속성값이런식으로 쓰이기도 하지만 더 줄여서:속성값으로 많이 쓰임
<div id="app">
<h1>Hello, {{ name }}</h1>
<img v-bind:src="feelsgood"/>
</div>
=======
OR
=======
<div id="app">
<h1>Hello, {{ name }}</h1>
<img :src="feelsgood"/>
</div>
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
name: 'Vue',
feelsgood: 'feelsgood.jpg'
}
});
결과 : feelsgood 이미지가 노출됨v-for
- 반복문을 사용하여 주로 리스트를 만들 때 사용함
v-for="item in array"로 array가 반복되면서 item에 요소 하나하나를 넣어줌
<div id="app">
<h1>Hello, {{ name }}</h1>
<ul>
<li v-for="item in city">도시 : {{city}}<li>
</ul>
</div>
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
city:['서울','대구']
}
});
결과 : 도시 : 서울
도시 : 대구
라는 문구가 노출 됨 v-model
- 입력 값이 자동으로 뷰 데이터 속성에 반영할 때 사용
- v-bind와 v-on를 합친 기능
<input v-model="inputText">
HTMLCopy
new Vue({
data: {
inputText: ''
}
})
이번엔