๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

JavaScript168

[Vue.js] watch watch๋Š” ๋ฐ์ดํ„ฐ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜์—ฌ ์ž๋™์œผ๋กœ ํŠน์ • ๋กœ์ง์„ ์ˆ˜ํ–‰ํ•œ๋‹ค. ๋ฐ์ดํ„ฐ ํ˜ธ์ถœ๊ณผ ๊ฐ™์ด ์‹œ๊ฐ„์ด ์ƒ๋Œ€์ ์œผ๋กœ ๋” ๋งŽ์ด ์†Œ๋ชจ๋˜๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์— ์ ํ•ฉํ•˜๋‹ค. 2022. 6. 6.
[Vue.js] computed ์†์„ฑ๊ณผ methods ์†์„ฑ์˜ ์ฐจ์ด์  methods = ํ˜ธ์ถœํ•  ๋•Œ๋งŒ ํ•ด๋‹น ๋กœ์ง์ด ์ˆ˜ํ–‰(์ˆ˜๋™์ ์ธ ๋ฐ์ดํ„ฐ ๊ฐฑ์‹ ) computed = ๋Œ€์ƒ ๋ฐ์ดํ„ฐ์˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋ฉด ์ž๋™์ ์œผ๋กœ ์ˆ˜ํ–‰(๋Šฅ๋™์ ์ธ ๋ฐ์ดํ„ฐ ๊ฐฑ์‹ ) 2022. 6. 6.
[Vue.js] Vue Directive Vue Directive(๋ทฐ ๋””๋ ‰ํ‹ฐ๋ธŒ)๋ž€ HTML ํƒœ๊ทธ ์•ˆ์— v- ์ ‘๋‘์‚ฌ๋ฅผ ๊ฐ€์ง€๋Š” ๋ชจ๋“  ์†์„ฑ๋“ค์„ ์˜๋ฏธํ•œ๋‹ค. ๋””๋ ‰ํ‹ฐ๋ธŒ๋Š” ํ™”๋ฉด์˜ ์š”์†Œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. ๋ทฐ์˜ ๋ฐ์ดํ„ฐ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ ํ™”๋ฉด์˜ ์š”์†Œ๋“ค์ด ๋ฆฌ์•กํ‹ฐ๋ธŒํ•˜๊ฒŒ ๋ฐ˜์‘ํ•˜์—ฌ ๋ณ€๊ฒฝ๋œ ๋ฐ์ดํ„ฐ ๊ฐ’์— ๋”ฐ๋ผ ๊ฐฑ์‹ ๋œ๋‹ค. ์ฆ‰, ํ™”๋ฉด์˜ ์š”์†Œ๋ฅผ ์ง์ ‘ ์ œ์–ดํ•  ํ•„์š” ์—†์ด ๋ทฐ์˜ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํ™”๋ฉด ์š”์†Œ๋“ค์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค. v-if ์ง€์ •ํ•œ ๋ทฐ ๋ฐ์ดํ„ฐ ๊ฐ’์˜ ์ฐธ, ๊ฑฐ์ง“ ์—ฌ๋ถ€์— ๋”ฐ๋ผ ํ•ด๋‹น HTML ํƒœ๊ทธ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ํ‘œ์‹œํ•˜์ง€ ์•Š๋Š”๋‹ค. v-for ์ง€์ •ํ•œ ๋ทฐ ๋ฐ์ดํ„ฐ์˜ ๊ฐœ์ˆ˜๋งŒํผ ํ•ด๋‹น HTML ํƒœ๊ทธ๋ฅผ ๋ฐ˜๋ณต ์ถœ๋ ฅํ•œ๋‹ค. v-show v-if์™€ ์œ ์‚ฌํ•˜๋‹ค. ๋‹ค๋งŒ, v-if๋Š” ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ์™„์ „ํžˆ ์‚ญ์ œํ•˜์ง€๋งŒ v-show๋Š” css ํšจ๊ณผ๋งŒ display:none;์œผ๋กœ ์ฃผ.. 2022. 6. 6.
[Vue.js] Vue์—์„œ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ธ {{ }} ์•ˆ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹์„ ๋„ฃ์œผ๋ฉด ๋œ๋‹ค. {{ message }} {{ message + "!!!" }} {{ message.split('').reverse().join('') }} ํ•˜์ง€๋งŒ ๋ถ„๊ธฐ ๊ตฌ๋ฌธ(if๋ฌธ ๋“ฑ๋“ฑ), ์„ ์–ธ๋ฌธ(var a = 10; ์ด๋Ÿฐ๊ฒƒ), ๊ทธ๋ฆฌ๊ณ  ์œ„์™€ ๊ฐ™์ด ๋ณต์žกํ•œ ์—ฐ์‚ฐ(message.split('').reverse().join(''))์€ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. 2022. 6. 6.
[Vue.js] v-bind v-bind๋Š” ์•„์ด๋””, ํด๋ž˜์Šค, ์Šคํƒ€์ผ ๋“ฑ์˜ HTML ์†์„ฑ ๊ฐ’์— ๋ทฐ ๋ฐ์ดํ„ฐ ๊ฐ’์„ ์—ฐ๊ฒฐํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ์ดํ„ฐ ์—ฐ๊ฒฐ ๋ฐฉ์‹์ด๋‹ค. v-bind ์†์„ฑ์œผ๋กœ ์ง€์ •ํ•  HTML ์†์„ฑ์ด๋‚˜ props ์†์„ฑ ์•ž์— ์ ‘๋‘์‚ฌ๋กœ ๋ถ™์—ฌ์ค€๋‹ค. ์•„์ด๋”” ๋ฐ”์ธ๋”ฉ ํด๋ž˜์Šค ๋ฐ”์ธ๋”ฉ ์Šคํƒ€์ผ ๋ฐ”์ธ๋”ฉ 2022. 6. 6.
Named View Named View(๋„ค์ž„๋“œ ๋ทฐ)๋Š” ํŠน์ • ํŽ˜์ด์ง€๋กœ ์ด๋™ํ–ˆ์„ ๋•Œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋™์‹œ์— ํ‘œ์‹œํ•˜๋Š” ๋ผ์šฐํŒ… ๋ฐฉ์‹์ด๋‹ค. ๋„ค์ž„๋“œ ๋ทฐ๋Š” ๊ฐ™์€ ๋ ˆ๋ฒจ์—์„œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•œ ๋ฒˆ์— ํ‘œ์‹œํ•œ๋‹ค. 2022. 6. 6.
๋ฐ˜์‘ํ˜•