๋ชฉ๋ก๐Ÿ“ Vue (2)

๐Ÿค ์€์ง€log ๐Ÿค

[VUE] ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ & v-for ๋ฐ˜๋ณต๋ฌธ & ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ

React ์›ํˆด์ด์˜€์ง€๋งŒ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๋‚ฎ๊ณ  ์‰ฝ๋‹ค๋Š” ์–˜๊ธฐ์— vue ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•ด ๋ดค๋Š”๋ฐ ๋œจ๋“ ๐Ÿ˜น ๋„ˆ๋ฌด ์‰ฝ์ž๋‚˜,, ๊ฐ„๋‹จํ•ด ,, ์ด๊ฒŒ ๋ญ๋žŒ ,, ์™œ ์ด์ œ ์•ˆ ๊ฑฐ์ง€ ,, ๋ฌผ๋ก  ๋ฆฌ์•กํŠธ๋งŒํผ ๊นŠ๊ฒŒ ํŒŒ๊ณ ๋“ ๊ฑด ์•„๋‹ˆ์ง€๋งŒ ๊ณต๋ถ€ํ•˜๋Š” ๋‚ด๋‚ด ์žฌ๋ฏธ์žˆ์—ˆ๋‹ค ใ…Ž_ใ…Ž! ์ฝ”๋”ฉ์• ํ”Œ๋‹˜ ๊ฐ•์˜ ์ค‘ ๋ฌด๋ฃŒ๊ฐ•์˜ ๋ถ€๋ถ„๋งŒ ๋ณด๊ณ  ์กฐ๊ธˆ ๊ณต๋ถ€ํ•ด ๋ดค๋‹ค. ๐Ÿ”† ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ { { } } : 1. script ํƒœ๊ทธ ๋‚ด์— data( ){ return { } } ๋ฐ์ดํ„ฐ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค์–ด ๋‘๊ณ  object์ž๋ฃŒ ํ˜•์‹์œผ๋กœ ์ž‘์„ฑ ํ›„ { { ๋ฐ์ดํ„ฐ์ด๋ฆ„ } } 2. HTMLํƒœ๊ทธ ์†์„ฑ๋„ ๋ฐ์ดํ„ฐ๋ฐ”์ธ๋”ฉ๊ฐ€๋Šฅ -> ์†์„ฑ ์•ž์— : ๋ถ™์—ฌ์ฃผ๋ฉด ๋จ ex) :์†์„ฑ="๋ฐ์ดํ„ฐ์ด๋ฆ„" {{ products[0] }} ๐Ÿ“Œ 70๋งŒ์› {{ products[1] }} 50๋งŒ์› {{ products[2] }} 100๋งŒ์› ..

๐Ÿ“ Vue 2023. 10. 20. 15:15