ํ์ฌ ์ฑ๊ธํค ํจํด์ ๊ตฌ์ฑ ์์๋ฅผ Vue.extend
ํ๊ณ ์ฒซ ๋ฒ์งธ require
์์ compile
์์ $appendTo(body)
๋ฅผ ํธ์ถํ๊ณ ๋ค๋ฅธ ๋ชจ๋ ๊ฒ์์ vm
๋ฅผ ๋ฐํํ๋ ๊ฒ์
๋๋ค. .
vm.$appendTo
๊ฐ ์ ๊ฑฐ๋๋ฉด ์ฑ๊ธํค ๊ตฌ์ฑ ์์๋ฅผ ๋ง๋๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ด ํ์ํฉ๋๋ค.
์๋ง๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
replace: false
el: => document.body
vue-comps ์๋ ํ์ฌ 3๊ฐ์ ์ฑ๊ธํค ๊ตฌ์ฑ ์์๊ฐ ์์ต๋๋ค.
waves
์ธ์คํด์ค๋ฅผ ์ ๊ณตํ๋ ์จ๊ฒจ์ง ์ฑ๊ธํค svg ์ ์ฅ์๊ฐ ์์ต๋๋ค.๋๋ ๋งค์ฐ์ ๋ํ ํ์์ฑ ์ดํดํ์ง ๋ชปํ๋ $appendTo()
๋น์ ์ ๊ทธ๋ฅ ๋ค์ดํฐ๋ธ DOM ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค - ์ฌ๊ธฐ์ this.$el
, ์ฐจ์ด๊ฐ ๋ฌด์์
๋๊น?
์๋ง๋ ๋ด๊ฐ ํผ๋์ค๋ฌ์์
๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ์ฐ๊ฒฐ, ๊ตฌ์ฑ ์์๊ฐ ๋ ์ด์ ๋๋ฉ์ธ์ ๋ฒ์ด๋ ๊ฐ๋ฅ์ฑ์ด ์์ต๋๋ค.
์๋ํ ๊น์?
Comp = Vue.extend(someComp)
vm = new Comp() # vm is off-dom here ?
document.body.appendChild(vm.$el)
๊ทธ๋ ๋ค๋ฉด ๋ซ์ ์ ์์ต๋๋ค..
์ถ๊ฐํ๊ธฐ ์ ์ ์ธ์ ์์ด $mount()
๋ฅผ ํธ์ถํด์ผ ํฉ๋๋ค( vm.$el
). ํ์ง๋ง ๊ทธ๋ ์ง ์์ผ๋ฉด ์๋ํด์ผ ํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ถ๊ฐํ๊ธฐ ์ ์ ์ธ์ ์์ด
$mount()
๋ฅผ ํธ์ถํด์ผ ํฉ๋๋ค(vm.$el
). ํ์ง๋ง ๊ทธ๋ ์ง ์์ผ๋ฉด ์๋ํด์ผ ํฉ๋๋ค.