[DAY-35] Vue (2)
π ν·κ°λ Έλ & λͺ°λλ λΆλΆλ€λ§ μ 리νλ λλ§μ TIL
π― λͺ¨λ κ°μ λ΄μ©μ μ μ§ μμμ!
μ€λμ μκ°μ?
SCSS κ³Όμ λ₯Ό λ―Έμνκ³ μμ΄μ.
λ°λ¦° κ°μκ° λ¬΄λ € μ΄νμΉμμ..
Vueλ μ΅μν λ― μλ λ― μ μ΅νκ³ μλ΅λλ€!
μΌλ₯Έ νλ‘μ νΈ μ§ν ν΄λ³΄κ³ μΆμ΄μ! (λ¬Όλ‘ κ·Έ μ μ λ°λ¦° κ°μλ₯Ό λ€ λ€μ΄μΌ ν©λλ€. γ
γ
)
[1] computed
computed
λ κ³μ°λ λ°μ΄ν°λ₯Ό λ§λ€ μ μμ΅λλ€.
<h1>{{ count }}</h1>
<h2>{{ double }}</h2>
<h2>{{ double }}</h2>
<h2>{{ double }}</h2>
<h2>{{ double }}</h2>
const App = {
data() {
return {
count: 3,
};
},
computed: {
double() {
return this.count * 2;
},
},
};
const vm = Vue.createApp(App).mount("#app");
Computed
λ΄λΆμ double ν¨μλ λ μ΄μ ν¨μκ° μλ λ°μ΄ν°λ‘ μ·¨κΈλ°μ΅λλ€.
[1-1] νΉμ§
[1] μΊμ±
μμ μμλ₯Ό methods
λ₯Ό μ¬μ©ν΄μ κ³μ°λ κ°μ μΆλ ₯ν λ, ν¨μ λ΄λΆμ λ‘μ§μ΄ 4λ² λ°λ³΅λ©λλ€.
νμ§λ§ computed
λ μΊμ± κΈ°λ₯μ΄ μμΌλ―λ‘, 첫λ²μ§Έ double λ°μ΄ν°λ₯Ό μΆλ ₯ν λ κ·Έ κ°μ μ μ₯ν©λλ€.
λ°λΌμ λ‘μ§μ 1λ²λ§ λλ¦¬κ³ λ λ°λ³΅μ μΈ μΆλ ₯μ΄ κ°λ₯ν©λλ€.
[2] μμ‘΄μ±
computed
λ κ³μ°λ κ°μ μ¬μ©νκΈ° μν λ΄λΆμ dataκ°μ μμ‘΄ν©λλ€.
const App = {
data() {
return {
user: {
name: "Jiyoung",
age: 25,
email: "haeyum@naver.com",
},
};
},
computed: {
doubleAge() {
console.log("Double Age!");
return this.user.age * 2; // this.user.ageμ μμ‘΄ν©λλ€.
},
},
};
const vm = Vue.createApp(App).mount("#app");
μμ‘΄νλ κ°μ λ°κΏ λ λ§λ€, computed
λ΄λΆμ ν΄λΉ λ°μ΄ν°μ μ°μ°μ΄ λ€μ μΌμ΄λ©λλ€.
[3] Getter, Setter
κ°μ μ»μ΄λΌ λ μ¬μ©νλ ν¨μκ° Getter, κ°μ μ§μ ν λ μ¬μ©νλ ν¨μκ° Setterμ λλ€.
computed
λ΄λΆ λ°μ΄ν°μ κ°μ getκ³Ό setμ μ§μ ν μ μμ΅λλ€.
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(newValue) {
const names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[names.length - 1];
},
},
},
κ°μ μ»μ΄λ΄λ getter, μ§μ ν΄μ£Όλ setterκ° μ λμν¨μ μ μ μμ΅λλ€.
[2] watch
watch
λ λ°μν λ°μ΄ν°λ₯Ό κ°μνμ¬ λ΄λΆ ν¨μλ₯Ό λμμν¬ μ μμ΅λλ€.
λ°μ΄ν°κ° λ³κ²½λ λ λ§λ€ νμν λ‘μ§μ μνν μ μμ΅λλ€.
watch: {
firstName() {
console.log("watch", this.firstName);
},
lastName() {
console.log("watch", this.lastName);
},
},
ν΄λΉ λ°μ΄ν°κ° λ³κ²½λ λλ§λ€ λ΄λΆ ν¨μμ λ‘μ§μ΄ μ λμν¨μ μ μ μμ΅λλ€.
λν ν¨μμ 맀κ°λ³μλ₯Ό λ°μ μ¬μ©ν μ μμ΅λλ€.
watch: {
firstName(newValue, oldValue) { // μλ‘ λ³κ²½λ κ°, μ΄μ μ κ°
console.log("watch", newValue, oldValue);
},
lastName(newValue, oldValue) {
console.log("watch", newValue, oldValue);
},
},
λ¨
watch
μ΅μ μ λ΄λΆ ν¨μμ μ΄λ¦μ λ°μν λ°μ΄ν°μ¬μΌ ν©λλ€.
[2-1] νΉμ§
[1] μ°Έμ‘°ν λ°μ΄ν° κ°μ(deep)
watch
λ λ°°μ΄, κ°μ²΄μ κ°μ μ°Έμ‘°ν λ°μ΄ν°μ κ°μλ₯Ό νμ§ λͺ»ν©λλ€.
μ΄λ, deep
μ΅μ
μ μ¬μ©ν μ μμ΅λλ€.
watch: {
user: {
handler(newVal, oldVal) { // handler μ΄λ¦μ λ°κΎΈλ©΄ μλ©λλ€.
console.log(newVal, oldVal);
},
deep: true, // κ°μ²΄λ λ°°μ΄μ λ΄λΆκΉμ§ λ κΉκ² κ°μνκ² λ€λ μλ―Έμ
λλ€.
},
},
[2] μ¦μμ€ν
μ§κΈκΉμ§ μμ±ν watch
μ΅μ
μ μ§μΌλ³΄λ λ°μ΄ν°μ λ³κ²½μ΄ μΌμ΄λ¬μ λ μ€νλ©λλ€.
μ΄λ₯Ό μ¦μ μ€ν ν¨μλ‘ λ§λ€μ΄ μ²μλΆν° μ€νλκ² λ§λ€ μ μμ΅λλ€.
watch: {
user: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
deep: true,
immediate: true, // μ²μμ λ°μ΄ν°κ° μ΄κΈ°νλμμ λλ μ€ν
},
fruits: {
handler() {
console.log(this.fruits);
},
deep: true,
immediate: true,
},
},
[3] Class λ°μ΄ν° λ°μΈλ©
[3-1] κ°μ²΄ 리ν°λ΄
htmlμ class μμ±μ λ°μ΄ν°λ₯Ό μ°κ²°ν λ, κ°μ²΄ 리ν°λ΄λ‘ μ μ μ μμ΅λλ€.
<h1 :class="{ active: isActive, small: isSmall}" class="title">{{ msg }}</h1>
κ°μ²΄ 리ν°λ΄λ‘ ν΄λμ€ μ΄λ¦μ μ κ² λλ©΄, νΉμ ν λ°μ΄ν°λ€μ κΈ°λ°μΌλ‘ μ¬λ¬ κ°μ ν΄λμ€λ₯Ό ν λΉνκ±°λ μ μΈν μ μμ΅λλ€.
μ΄λ, μμ±μ μ΄λ¦κ³Ό λ°μ΄ν°μ μ΄λ¦μ΄ κ°μΌλ©΄ νμͺ½μ μλ΅νκ³ μ μ μ μμ΅λλ€.
<h1 :class="{ active, small }" class="title">{{ msg }}</h1>
const App = {
data() {
return {
msg: "Hello Vue!",
active: false,
small: true,
};
},
methods: {
toggle() {
this.isActive = !this.isActive;
},
},
};
λν νλμ νΉμ ν λ°μ΄ν° κ°μ μ΄μ©ν΄μ μ¬λ¬κ°μ ν΄λμ€ κ°μ μ§μ ν μ μμ΅λλ€.
<h1 :class="{ active, 'title--small color--orange': small }" class="title">
{{ msg }}
</h1>
small λ°μ΄ν° κ°μ μν΄ title-small, color-orange λ κ°μ ν΄λμ€ κ°μ΄ μ§μ λ μ μμ΅λλ€.
[*] computed
ν΄λμ€μ μ§μ ν κ°μ²΄ λ°μ΄ν°μμ λ°μν λ°μ΄ν°λ₯Ό νμ©ν΄μΌ νλ€λ©΄ computedλ₯Ό μ΄μ©ν΄μ κ³μ°λ κ°μ λ§λ€μ΄ μ¬μ©ν©λλ€.
<div id="app">
<button @click="toggle">Toggle</button>
<h1 :class="classObject" class="title">{{ msg }}</h1>
</div>
...
data() {
return {
msg: "Hello Vue!",
active: false,
small: true,
};
},
computed: {
classObject() {
// κ³μ°λ λ°μ΄ν°λ₯Ό λ§λλλ€.
return {
active: this.active,
"title--small color--orange": this.small,
};
},
},
[3-2] λ°°μ΄ λ¦¬ν°λ΄
λ°°μ΄ λ°μ΄ν° νμμ μ¬μ©ν΄μ ν΄λμ€μ κ°μ λμ μΌλ‘ λ°κΏμ€ μ μμ΅λλ€.
<div id="app">
<h1 @click="changeTitle" :class="[ active, title ]">Hello Vue</h1>
<!-- ν΄λΉ ν΄λμ€μ active, titleμ΄ λ€μ΄κ°λλ€. -->
<!-- ν΄λ¦ν μ this.titleμ κ°μ΄ 'title--large'λ‘ λ°λλ©° ν΄λμ€ μ΄λ¦λ λ³κ²½λ©λλ€. -->
</div>
const App = {
data() {
return {
active: "active",
title: "title",
};
},
methods: {
changeTitle() {
this.title = "title--large";
},
},
};
[4] Style λ°μ΄ν° λ°μΈλ©
λ°μ΄ν°λ₯Ό λμ μΌλ‘ κ΄λ¦¬ν κ²½μ°, inline style
λ°©μμ΄ κΆμ₯λ©λλ€.
νμ§λ§ λͺ μλκ° 1000μ μ΄λ λκΈ° λλ¬Έμ, νμμ μ€νμΌμ μμ±ν λλ κΆμ₯λμ§ μλ λ°©μμ λλ€.
κΈ°λ³Έμ μΈ μμ± νν΄μ ν΄λμ€ λ°μΈλ© λΆλΆκ³Ό λμΌν©λλ€.
[4-1] κ°μ²΄ 리ν°λ΄
<div id="app">
<h1
@click="toAqua(); increaseWidth();"
:style="{ color, width: `${width}px` }"
>
<!-- style μμ± λ΄λΆμ κ°μ²΄ 리ν°λ΄μ μ¬μ©ν©λλ€. -->
<!-- click μ΄λ²€νΈ λ΄λΆμ μ¬λ¬ ν¨μλ₯Ό μ§μ νκΈ° μν΄μλ μ€νμ μλ―Έλ‘ ();λ₯Ό λΆμ
λλ€. -->
Hello Vue
</h1>
</div>
const App = {
data() {
return {
color: "tomato",
width: 200,
};
},
methods: {
toAqua() {
this.color = "aqua";
},
increaseWidth() {
this.width += 10;
},
},
};
[*] computed
ν΄λμ€ λ°μ΄ν° λ°μΈλ©κ³Ό λμΌνκ² κ°μ²΄ 리ν°λ΄λ‘ κ³μ°λ λ°μ΄ν°λ₯Ό μμ±ν μ μμ΅λλ€.
<h1 @click="toAqua(); increaseWidth();" :style="styleObject">Hello Vue</h1>
computed: {
styleObject() {
return {
color: this.color,
width: `${this.width}px`,
};
},
},
[4-2] λ°°μ΄ λ¦¬ν°λ΄
λ°°μ΄ λ°μ΄ν° νμμ μ¬μ©ν΄μ μ€νμΌμ κ°μ λμ μΌλ‘ λ°κΏμ€ μ μμ΅λλ€.
<div id="app">
<h1 :style="[ styleObject, titleStyleObject ]">Hello Vue</h1>
</div>
const App = {
data() {
return {
styleObject: {
color: "tomato",
backgroundColor: "aqua",
},
titleStyleObject: {
fontSize: "40px",
fontWeight: "bold",
},
};
},
};
λκΈλ¨κΈ°κΈ°