핵심문법 1 - UserInterface
선언적 렌더링 : 가장 기본적인 형태는 이중 중괄호 {{ }} 문법을 사용한 텍스트 보간법, 데이터바인딩을 템플릿 부분에서 사용할 때 가장 많이 사용된다.
클래스 바인딩 : 임의의 데이터 값이 true 혹은 false일 때 클래스가 추가 및 제거 되어 새로운 속성을 부여했다 제거했다 할 수 있게 끔 활용할 수 있도록 도와주는 기능이다.
스타일 바인딩 : v-bind 디렉티브를 활용하여 클래스 바인딩과 동일하게 그리고 객체로 바인딩한다 대신 스타일 바인딩에선 해당 프로퍼티 속성은 카멜케이스로 작성한다는 점을 유의
조건부 렌더링 : 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미, v-if는 전환비용이 더 높고, v-show는 초기 렌더링 비용이 높다. 그래서 자주 전환하는 것은 v-show를 사용하고, 실행 중에 조건이 변경되지 않을 경우에는 v-if를 사용한다.
- v-if / v-else-if / v-else : 조건부로 블록을 렌더링하는 데 사용됨. 블록은 디렉티브 표현식이 truthy 값을 번환하는 ㄱㅇ우에만 렌더링 됨
- v-show : v-if와 사용법이 크게 다르지 않음 차이점은 v-show가 있는 엘리먼트는 항상 렌더링 되어 DOM에 남아있다는 것
리스트 렌더링 : 배열 데이터를 기반으로 동일한 구조의 UI를 반복호출하는 기능, v-for 디렉티브를 사용한다. item in items형식의 특별한 문법이 필요하다.
선언적 렌더링
<template>
<div>{{ rawHtml }}</div>
<div>{{ rawHtml2 }}</div>
</template>
<script>
export default {
data(){
return {
rawHtml: '이것은 텍스트입니다',
rawHtml2: "<span style='color: red'>이것은 빨간색이어야 합니다</span>"
}
},
}
</script>
<style lang="scss" scoped>
</style>
이중 중괄호는 html로 해석하지 않고 일반 텍스트로 해석을 한다.
<template>
<div>{{ rawHtml }}</div>
<div>{{ rawHtml2 }}</div>
<h1 v-html="rawHtml2"></h1>
</template>
<script>
export default {
data(){
return {
rawHtml: '이것은 텍스트입니다',
rawHtml2: "<span style='color: red'>이것은 빨간색이어야 합니다</span>",
}
},
}
</script>
<style lang="scss" scoped>
</style>
v-html을 사용해야 원하는 모습으로 나오게 된다.
클래스 바인딩
<template>
<div>{{ rawHtml }}</div>
<div>{{ rawHtml2 }}</div>
<h1 v-html="rawHtml2"></h1>
<h2 v-bind:class="{active: isActive}">클래스 바인딩 테스트</h2> <!-- 위 아래 같은 기능을 한다. 아래 방식을 많이 사용한다 -->
<h2 :class="{active: isActive}">클래스 바인딩 테스트</h2>
<button @click="change">버튼</button>
</template>
<script>
export default {
data(){
return {
rawHtml: '이것은 텍스트입니다',
rawHtml2: "<span style='color: red'>이것은 빨간색이어야 합니다</span>",
isActive: false,
}
},
methods: {
change(){
this.isActive = !this.isActive
},
},
}
</script>
<style lang="scss" scoped>
h2.active {
color: green;
}
</style>
버튼을 누르면 isActive가 true가 되면서 h2의 색상이 바뀐다.
스타일 바인딩
<template>
<div>{{ rawHtml }}</div>
<div>{{ rawHtml2 }}</div>
<h1 v-html="rawHtml2"></h1>
<h2 v-bind:class="{active: isActive}">클래스 바인딩 테스트</h2> <!-- 위 아래 같은 기능을 한다. 아래 방식을 많이 사용한다 -->
<h2 :class="{active: isActive}">클래스 바인딩 테스트</h2>
<button @click="change">버튼</button>
<h3 style="color: red; font-size: 24px;">스타일 바인딩 테스트</h3>
<h3 :style="{color: fontColor, fontSize: fontSize + 'px'}">스타일 바인딩 테스트</h3>
</template>
<script>
export default {
data(){
return {
rawHtml: '이것은 텍스트입니다',
rawHtml2: "<span style='color: red'>이것은 빨간색이어야 합니다</span>",
isActive: false,
fontColor: '#888888',
fontSize: 48,
}
},
methods: {
change(){
this.isActive = !this.isActive
},
},
}
</script>
<style lang="scss" scoped>
h2.active {
color: green;
}
</style>
하드코딩으로 스타일을 바꿀 수 있지만 보통의 경우에 변수 처리를 해서 스타일 처리를 한다
조건부 렌더링
v-if
<template>
<!-- <div v-if="isVisible" class="red"></div>
<div v-if="isVisible === true" class="blue"></div>
<div v-else class="black"></div> -->
<div v-if="count > 1" class="red"></div>
<div v-else class="blue"></div>
<button @click="count++">증가</button>
<button @click="count--">감소</button>
</template>
<script>
export default {
data(){
return {
isVisible: true,
count: 0,
}
},
}
</script>
<style scoped>
.red{
width: 100px;
height: 100px;
background-color: red;
}
.blue{
width: 100px;
height: 100px;
background-color: blue;
}
.black{
width: 100px;
height: 100px;
background-color: black;
}
</style>
count변수를 만들고 v-if조건에 따라 색상이 바뀐다.
v-show
<template>
<!-- <div v-if="isVisible" class="red"></div>
<div v-if="isVisible === true" class="blue"></div>
<div v-else class="black"></div> -->
<!-- <div v-if="count > 1" class="red"></div>
<div v-else class="blue"></div>
<button @click="count++">증가</button>
<button @click="count--">감소</button> -->
<div v-show="isVisible" class="red"></div>
<div v-show="!isVisible" class="blue"></div>
<div v-if="isVisible" class="black"></div>
</template>
<script>
export default {
data(){
return {
isVisible: false,
count: 0,
}
},
}
</script>
<style scoped>
.red{
width: 100px;
height: 100px;
background-color: red;
}
.blue{
width: 100px;
height: 100px;
background-color: blue;
}
.black{
width: 100px;
height: 100px;
background-color: black;
}
</style>
v-if와는 다르게 항상 렌더링이 되는 모습을 볼 수 있다. 눈에 보이지만 않을 뿐
리스트 렌더링
<template>
<!-- v-for 디렉티브 활용 -->
<li v-for="item in sampleArray" :key="item">{{ item }}</li>
<!-- :key를 기준으로 렌더링 대상을 식별하면 부하가 적다. key가 없으면 그냥 순서를 기반으로 짐작해서 렌더링 대상을 정한다. 더 많은 DOM을 업데이트해야 하는 것이다 -->
<li v-for="user in otherArray" :key="user.id">{{ user.id }} / {{ user.name }}</li> <!-- /는 없어도 됨 그냥 구별용 -->
<!-- 기존 html 코드 작성 방식 -->
<li>{{ sampleArray[0] }}</li>
<li>{{ sampleArray[1] }}</li>
<li>{{ sampleArray[2] }}</li>
<li>{{ sampleArray[3] }}</li>
</template>
<script>
export default {
data(){
return {
sampleArray: ['a', 'b', 'c', 'd'],
otherArray: [{id: 0, name: '김'}, {id: 1, name: '이'}, {id: 2, name: '박'}, {id: 3, name: '최'}],
}
},
}
</script>
<style scoped>
</style>
키값은 고유한 값이여야 한다 ex) user.id
index가 키값이면 안된다. 권장하지 않는다. 데이터를 추가할 때 원래의 데이터가 추가되고 추가하고자하는 데이터가 추가되지 않는 오류가 발생하기 때문이다.