์ปดํฌ๋ํธ๋ ์์ step์ผ๋ก ์์ฑ๋๊ณ ์ฌ๋ผ์ง๊ณ ์
๋ฐ์ดํธ ๋๋ค๋ ๊ฒ์ด๋ค.
- ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ค ๋ create -> mount ๋จ๊ณ๋ก ์์ฑ๋๋ค.
- create : ๋ฐ์ดํฐ์์ฑ
- mount : index.html ํ์ผ์ ์ฅ์ฐฉ
- ์ปดํฌ๋ํธ๊ฐ ์ฌ๋ ๋๋ง๋ ๋ update๋จ๊ณ
- ์ปดํฌ๋ํธ๊ฐ ์ญ์ ๋ ๋ unmount ๋จ๊ณ
์ ๋จ๊ณ๋ค์ ์ค๊ฐ์ค๊ฐ์ ์ฝ๋๋ฅผ ์คํํ๊ณ ์ถ๋ค๋ฉด lifecycle hook์ ๊ณจ๋ผ์ ์ฌ์ฉํ๋ฉด ๋๋ค.
beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()
script์์๋ค ์ฌ์ฉํด์ฃผ๋ฉด ๋๋ค.
data(){
return{
}
},
mounted(){
์์ฑ์ฝ๋
}
mount๊ฐ ๋๊ณ ๋์ ์์ฑ์ฝ๋๋ฅผ ์คํํด์ค๋ค.
style=""
์ object ๋ฐ์ดํฐ ํํ์ ์ฌ๋ฌ๊ฐ์ง CSS ์์ฑ์ ์ง์ด๋ฃ์ ์ ์๋ค.
<div :style="{fontSize}"
CSS์์ฑ ๋ช
์ '-' ๋์๊ธฐํธ๋ฅผ ์ธ ์ ์๋ค.
CamelCase๊ธฐ๋ฒ์ ์ฌ์ฉํด์ผํ๋ค.
<div class="post-body" :style=`{ backgroundImage : '${url(์ด๋ฏธ์ง๊ฒฝ๋ก)}' }`</div>
์ด๋ฏธ์ง๋ฅผ ๊ธ์๋ก ๋ณํํ ์ ์๋ค.
์ด๋ฏธ์ง URL์ ์ผ์์ ์ผ๋ก ๋ง๋ค์ด์ค๋ค.(์๋ก๊ณ ์นจ์ ํ๋ฉด ์ฌ๋ผ์ง๋ค.)
์ฆ, ๊ฐ์์ผ๋ก ํธ์คํ
ํด์ค๋ค๊ณ ๋ณด๋ฉด๋๋ค.