728x90
1. Computed
: 계산된 데이터
- Vue 내부에서 캐싱 기능을 제공하기 때문에 반복된 계산은 한번만 일어난다.
- 계산된 데이터는 의존성을 가지고 있다.
1) 사용 방법
<body>
<div id="app">
<h1>{{count}}</h1>
<h2>{{double}}</h2>
<h2>{{double}}</h2> // 한번만 계산된다.
</div>
<script>
const App = {
data() {
return {
count: 3,
};
},
computed: {
double() {
return this.count * 2;
},
},
};
const vm = Vue.createApp(App).mount("#app");
</script>
</body>
2) getter, setter 사용하기
data() {
return {
firstName: "Leon",
lastName: "Miller",
};
},
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(newValue) {
const names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[1];
},
},
},- get()은 vm.fullName으로, set()은 vm.fullName = '이름' 으로 접근 가능하다.
2. Watch
- 반응성을 가지는 데이터를 감시하는 역할
1) 기본 형태
watch: {
firstName(newValue, oldValue) {
console.log("watch: ", newValue, oldValue);
},
fullName() {
console.log("watch: ", this.fullName);
},
},- firstName을 변경했을 때, watch 내 firstName(), fullName()은 데이터 변경을 감지하여 실행된다.
2) 속성
watch: {
`데이터 이름`: {
handler(newV, oldV) { // 순서 상관 있음
console.log(newV, oldV);
},
deep: true, // 다른 속성이 바뀌어도 실행
immediate: true, // 페이지가 처음 불러올 때도 실행
},
},- deep : 객체나 배열같은 참조 데이터 내부의 데이터를 감시할 때 사용
- immediate: 페이지를 처음 불러울 때도 실행하고 싶을 때 사용
3. 클래스와 스타일 바인딩
- v-bind와 computed을 사용하여 html 요소에 클래스를 추가하여 스타일을 바인딩 할 수 있다.
1) 객체 형태로 클래스 바인딩
<h1 :class="{active: isActive, small: isSmall}" class="title"></h1>
<h1 :class="{active, small}" class="title"></h1> // data형태: active, smalldata의 isActive가 true면 class에 active가 추가 된다.
여러 개를 바인딩하고 싶으면 쉼표로 구분한다.
2) computed를 이용하여 styleObject 바인딩
<h1 :class="styleObject"></h1>
computed: {
styleObject() {
return {
active: this.active,
"title--small color--orange": this.small,
};
},
},- 여러 클래스를 한꺼번에 바인딩 하고 싶을 때 computed로 빼서 한꺼번에 바인딩 할 수 있다.
- 띄어쓰기로 구분하여 한 데이터에 여러개 클래스를 의존하도록 가능
3) 배열로 클래스 바인딩
<h1 :class="[active, title]">Hello Vue</h1>
data() {
return {
title: "title",
active: "active",
};
},data에 string으로 데이터를 선언하여 배열 형태로 클래스를 바인딩 할 수 있다.
4) 템플릿 리터럴로 클래스 바인딩
<h1 :style="`color:${color}`">Hello Vue</h1>
data() {
return {
color: "red",
};
},
* 인라인 스타일은 카멜케이스를 지원한다. 따라서 속성의 이름을 따로 표시안해도 된다.
<h1 :style="{color, backgroundColor}"></h1>
return {
color: "royalblue",
backgroundColor: "orange", //자동 변환 카멜케이스
styleObject: {
// 오브젝트 형태로 여러개 넣을 수 있다 []
},
};
},
728x90
'Frontend > 프로그래머스 FE 데브코스' 카테고리의 다른 글
| [DAY 36] Vue (4) (0) | 2022.12.12 |
|---|---|
| [DAY 35] Vue (3) (0) | 2022.12.12 |
| [DAY 33] Vue (1) (0) | 2022.11.30 |
| [DAY 32] CSS 심화(4) (2) | 2022.11.29 |
| [DAY 31] CSS 심화 (3) (0) | 2022.11.29 |
