transform์ ์์์ ์ด๋(translate), ํ์ (rotate), ํ๋์ถ์(scale), ๋นํ๊ธฐ(skew) ํจ๊ณผ๋ฅผ ๋ถ์ฌํ๊ธฐ ์ํ ํจ์๋ฅผ ์ ๊ณตํ๋ค.transform์ ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ํด ์ฌ์ฉํ์ฌ์ผ ํ๋ ๊ฒ์ ์๋์ง๋ง ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ๋ถ์ฌํ ํ์๊ฐ ์๋ค๋ฉด t
transition์ด ์๋๋ฐ๋(self-invoking transition) ํ๋๋ก ํ๊ณ ์ถ๋ค๋ฉด CSS animation์ ์ฌ์ฉํ๋ค.animationํจ๊ณผ๋ HTML ์์์ ์ ์ฉ๋๋ ์คํ์ผ์ ๋ค๋ฅธ ์คํ์ผ๋ก ๋ถ๋๋ฝ๊ฒ ๋ณํ์ํจ๋ค.์ ๋๋ฉ์ด์ ์ ๋ํ๋ด๋ ์คํ์ผ๊ณผ ์ ๋๋ฉ์ด์ ์ s
transition : ( property , duration , timing-function , delay )CSS ์์ฑ๊ฐ์ด ๋ณํํ ๋, ์์ฑ๊ฐ์ ๋ณํ๊ฐ ์ผ์ ์๊ฐ(duration)์ ๊ฑธ์ณ ์ผ์ด๋๋๋ก ํ๋ ๊ฒ์ด๋คtransition์ ์ํ ๋ณํ์ ๋๋ฐํ์ฌ ๋ณ๊ฒฝ๋๋ CSS
๊ธฐ๋ณธ HTML ์๋ฆฌ๋จผํธ๋ฅผ ํ์ฅํ์ฌ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ฝ๋๋ฅผ ์บก์ํํ๋คView, Data, Code์ ์ธํธ (์ปดํฌ๋ํธ ์์๋ HTML์ฝ๋, ์ฝ๋๋ฅผ ์คํํ๊ธฐ ์ํ Javascript์ฝ๋, ๋ฐ์ดํฐ๊ฐ ์กด์ฌํ๋ค)๊ฒฝ์ฐ์ ๋ฐ๋ผ ํน๋ณํ is ์์ฑ์ผ๋ก ํ์ฅ 'UI ๋ฉ์ด๋ฆฌ'๋ผ๊ณ ์๊ฐํ๊ธฐ (
v-model ๋๋ ํฐ๋ธ๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋ ฅ ํผ input๊ณผ textarea ์๋ฆฌ๋จผํธ๋ฅผ ์๋ฐฉํฅ ๋ฐ์ดํฐ๋ก ๋ฐ์ธ๋ฉํ ์ ์๋ค.v-model์ ๋ด๋ถ์ ์ผ๋ก ์๋ก ๋ค๋ฅธ ์์ฑ๊ณผ ์๋ก ๋ค๋ฅธ ์ด๋ฒคํธ๋ฅผ ์ ์กํ๋ค. text์ textarea ํ๊ทธ๋ value ์์ฑ๊ณผ input ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉ
๋ฉ์๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ด๋ฒคํธ ์์์ด
๋๋ก๋ Object.assign()์ด๋ \_.extend()๋ฅผ ์ฌ์ฉํด ๊ธฐ์กด์ ๊ฐ์ฒด์ ์ ์์ฑ์ ํ ๋นํ ์ ์๋ค. ์ด ๊ฒฝ์ฐ ๋ ๊ฐ์ฒด์ ์์ฑ์ ์ฌ์ฉํด ์ ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ผ ํ๋ค.Vue.set(object, propertyName, value) ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ค์ฒฉ๋ ๊ฐ์ฒด์
Vue๋ ๊ฐ์์ค์ธ ๋ฐฐ์ด์ ๋ณ์ด ๋ฉ์๋๋ฅผ ๋ํํ์ฌ ๋ทฐ ๊ฐฑ์ ์ ํธ๋ฆฌ๊ฑฐํ๋ค๋ฒํผ์ ๋๋ฅด๋ฉด 4๋ฒ์งธ ์ธ๋ฑ์ค๊ฐ ์ถ๊ฐ๋๋๋ก push๋ฉ์๋ ์์ฑ๋ฐฐ์ด ๋ฐ์ดํฐ๋ฅผ ๊ฐฑ์ ํ๊ฑฐ๋ ์ญ์ ํ ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ณ์ด ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ผ ํ๋คpush() ๋ฐฐ์ด์ ๊ฐ์ฅ ๋ค์ ์๋ก์ด ์์๋ฅผ ์ถ๊ฐํด์ฃผ๋ ๋ฉ์๋po
v-if , v-else , v-if-elsev-if๋ ํ ๊ธ๋น์ฉ์ด ๋๋ค์ค์ง์ ์ผ๋ก ์์๋ฅผ ์์ ๋ฒ๋ฆฐ๋ค์ด๊ธฐ ๋ ๋๋ง ๋น์ฉ์ด ๋๋คCSS๋ก display: none; ์ ์ ์ฉ์์ผ ์์๋ฅผ ์์ ์ง ์๊ณ ์์๊ฐ ๋ณด์ด์ง ์๊ฒ ํ๋ค
consolevm.todos.push({id: 4, done: false, title:'์ผ์๋จน๊ธฐ'})์ผ์๋จน๊ธฐ ์ถ๊ฐ
created , mounted ์ค์destroy ํ ๋vm.$destroy()
๊ฐ๋ก๋ฐฐ์นํ item๋ค .item { display: inline-block; }transition ์์ํ ๋ ์์ฑ ๊ฐ์ด ์์ผ๋ฉด ์๋จนํ
์ ์ฝ๋๋ฅผ ์ด๋ฐ ์์ผ๋ก ์์ฑํ ๊ฒฝ์ฐ, ์ด๋ค ๋ชจ์๊ณผ ์ญํ ์ ํ๊ทธ์ธ์ง ์๋ฏธ ํ์ ์ ๋์ง๋ง.square(container) ์์ ์ฌ๋ฌ div ํ๊ทธ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ CSS ์์ฑ ์ ๋ค์ ๋ณต์กํ๊ณ ํผ๋์ ์ค ์ ์๋ค.์ ์ผ๋ก ๋ง๋ค์ด์ง(border์คํ์ผ์ ์ ์ฉํด์ค) ํ๊ทธ๋ค์ sp
์์ฑ ๊ฐ ๋ค์ !import๋ฅผ ๋ถ์ธ ์์ฑ ์ ์ โพpt์ธ๋ผ์ธ ์ ์ธ๋ฐฉ์ = HTML์์ style์ ์ง์ ์ง์ ํ ์์ฑ ์ ์ 1000ptid ์ ํ์, ์ ์ 100ptํด๋์ค ์ ํ์, .class, :์ถ์ํด๋์ค ๋ก ์ง์ ํ ์์ฑ ์ ์ 10ptํ๊ทธ ์ด๋ฆ์ผ๋ก ์ง์ ํ ์์ฑ ์ ์ 1pt
๋จ๋ค ๋ผ๋ ์๋ฏธ์ด๋ฉฐ, block์์๋ฅผ ์ง์ ํ ์์น์ ๋ ์๋๋ก ๋ฐฐ์นํ๋ ์์ฑ์ด๋คfloat์ผ๋ก ์ปจํ ์ธ ๋ฅผ ๋์ธ ์ ๋ค์ ๋ด์ฉ์ ๋น์๋ฆฌ๋ฅผ ์ฑ์ฐ๋ ค ์ฌ๋ผ์ค๊ฒ ๋๋ค.์ด๋ฌํ ํ์์ ๋ธ๋ผ์ฐ์ ์ ์ค๋ฅ๋ก ์๊ฒจ๋ ๊ฒ์ด๊ณ ,float์ ๋ถ์์ฉ์ ํด์ ํ๋ค๋ ์๋ฏธ์ด๋ค.๋ถ๋ชจ ์์์ ๋์ด๊ฐ(heigh
class ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ํ๋คํด๋์ค๋ฅผ ํํ์์ผ๋ก ์ ์ํ ์ ์๋ค = ํด๋์ค๊ฐ ๊ฐ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค = ์ผ๊ธ๊ฐ์ฒด๋ฌด๋ช ์ ๋ฆฌํฐ๋ด๋ก ์์ฑํ ์ ์๋ค. ์ฆ, ๋ฐํ์์ ์์ฑ์ด ๊ฐ๋ฅํ๋ค๋ณ์๋ ์๋ฃ๊ตฌ์กฐ(๊ฐ์ฒด, ๋ฐฐ์ด ๋ฑ)์ ์ ์ฅํ ์ ์๋คํจ์์ ๋งค๊ฐ๋ณ์์๊ฒ ์ ๋ฌํ ์ ์๋คํจ์