Vue: [์ œ์•ˆ] Vue 2.0 - vm.$appendTo - ์‹ฑ๊ธ€ํ†ค ์ปดํฌ๋„ŒํŠธ

์— ๋งŒ๋“  2016๋…„ 04์›” 29์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

ํ˜„์žฌ ์‹ฑ๊ธ€ํ†ค ํŒจํ„ด์€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ Vue.extend ํ•˜๊ณ  ์ฒซ ๋ฒˆ์งธ require ์—์„œ compile ์—์„œ $appendTo(body) ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋‹ค๋ฅธ ๋ชจ๋“  ๊ฒƒ์—์„œ vm ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. .

vm.$appendTo ๊ฐ€ ์ œ๊ฑฐ๋˜๋ฉด ์‹ฑ๊ธ€ํ†ค ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“œ๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
์•„๋งˆ๋„ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

replace: false
el: => document.body

vue-comps ์—๋Š” ํ˜„์žฌ 3๊ฐœ์˜ ์‹ฑ๊ธ€ํ†ค ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  • vue-comps-waves - svg ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ํ•จ๊ป˜ ๋ชจ๋“  waves ์ธ์Šคํ„ด์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ˆจ๊ฒจ์ง„ ์‹ฑ๊ธ€ํ†ค svg ์ €์žฅ์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
  • vue-toster - ๋™์ผํ•œ ์ธ์Šคํ„ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๋™์ผํ•œ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ณต์œ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • vue-overlay - ๋ฐฐ๊ฒฝ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ์˜ z-์ƒ‰์ธ์„ ์ถ”์ ํ•˜๋Š” ๋ฐฐ๊ฒฝ์„ ๊ฒ€๊ฒŒ ๋งŒ๋“œ๋Š” ๋‹จ์ผ ์˜ค๋ฒ„๋ ˆ์ด
discussion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ถ”๊ฐ€ํ•˜๊ธฐ ์ „์— ์ธ์ˆ˜ ์—†์ด $mount() ๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค( vm.$el ). ํ•˜์ง€๋งŒ ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ž‘๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๋‚˜๋Š” ๋งค์šฐ์— ๋Œ€ํ•œ ํ•„์š”์„ฑ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๋Š” $appendTo() ๋‹น์‹ ์€ ๊ทธ๋ƒฅ ๋„ค์ดํ‹ฐ๋ธŒ DOM ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค - ์—ฌ๊ธฐ์— this.$el , ์ฐจ์ด๊ฐ€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์•„๋งˆ๋„ ๋‚ด๊ฐ€ ํ˜ผ๋ž€์Šค๋Ÿฌ์›Œ์„œ

๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์—ฐ๊ฒฐ, ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋” ์ด์ƒ ๋„๋ฉ”์ธ์„ ๋ฒ—์–ด๋‚  ๊ฐ€๋Šฅ์„ฑ์ด ์—†์Šต๋‹ˆ๋‹ค.

์ž‘๋™ํ• ๊นŒ์š”?

Comp = Vue.extend(someComp)
vm = new Comp() # vm is off-dom here ?
document.body.appendChild(vm.$el)

๊ทธ๋ ‡๋‹ค๋ฉด ๋‹ซ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค..

์ถ”๊ฐ€ํ•˜๊ธฐ ์ „์— ์ธ์ˆ˜ ์—†์ด $mount() ๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค( vm.$el ). ํ•˜์ง€๋งŒ ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ž‘๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰