๋ฐ์ํ Vue15 [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. ์ด์ 1 2 3 ๋ค์ ๋ฐ์ํ