๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

directives1

[vue] directives ๋ทฐ ์ฃผ์š” ๋””๋ ‰ํ‹ฐ๋ธŒ ์ •๋ฆฌ ๋ทฐ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ž€? html ํƒœ๊ทธ์•ˆ์˜ v-์ ‘๋‘์‚ฌ๋ฅผ ๊ฐ€์ง€๋Š” ๋ชจ๋“  ์†์„ฑ์„ ์˜๋ฏธํ•จ. ํ™”๋ฉด์˜ ์š”์†Œ๋ฅผ ์ง์ ‘ ์ œ์–ดํ•  ํ•„์š” ์—†์ด ๋ทฐ์˜ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํ™”๋ฉด ์š”์†Œ๋“ค์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์Œ. directive name role ๋น„๊ณ  v-if ์ง€์ •ํ•œ ๋ทฐ ๋ฐ์ดํ„ฐ ๊ฐ’์˜ ์ฐธ, ๊ฑฐ์ง“ ์—ฌ๋ถ€์— ๋”ฐ๋ผ ํ•ด๋‹น html ํƒœ๊ทธ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ํ‘œ์‹œํ•˜์ง€ ์•Š๋Š”๋‹ค. v-for ์ง€์ •ํ•œ ๋ทฐ ๋ฐ์ดํ„ฐ์˜ ๊ฐœ์ˆ˜๋งŒํผ ํ•ด๋‹น html ํƒœ๊ทธ๋ฅผ ๋ฐ˜๋ณต ์ถœ๋ ฅํ•จ v-show v-if์™€ ์œ ์‚ฌํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ์˜ ์ง„์œ„ ์—ฌ๋ถ€์— ๋”ฐ๋ผ ํ•ด๋‹นhtmlํƒœ๊ทธ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ํ‘œ์‹œํ•˜์ง€ ์•Š๋Š”๋‹ค. v-if๋Š” ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ์™„์ „ํžˆ ์‚ญ์ œํ•˜์ง€๋งŒ v-show๋Š” cssํšจ๊ณผ๋งŒ display:none;์œผ๋กœ ์ฃผ์–ด ์‹ค์ œ ํƒœ๊ทธ๋Š” ๋‚จ์•„ ์žˆ๊ณ  ํ™”๋ฉด ์ƒ์œผ๋กœ๋งŒ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค. v-bind html ํƒœ๊ทธ์˜ ๊ธฐ๋ณธ ์†์„ฑ๊ณผ ๋ทฐ ๋ฐ์ด.. 2021. 9. 19.