์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- ๋ฆฌ๋์ค ํดํท
- ์นด์นด์ค์ฑ์ฉ
- ์นด์นด์ค
- svgํ์ผ ๋ค๋ฃจ๊ธฐ
- ํ๋ก๊ทธ๋๋จธ์ค
- ๋์ ๊ณํ๋ฒ
- router v6
- js
- ๋ธ๋ฃจํธํฌ์ค
- ์ฝํ
- JavaScript
- TypeScript
- ๋ถ์คํธ์บ ํ์น๋ชจ๋ฐ์ผ
- ์๋ฐฉํฅ ์ฐ๊ฒฐ ๋ฆฌ์คํธ
- custom hook
- ์ด๋ฏธ์ง ์์
- ๋๋๊ทธ ์ด๋ฒคํธ
- ์ฝ๋ฉํ ์คํธ
- ์ด๋ถํ์
- Redux toolkit
- ์๊ณ ๋ฆฌ์ฆ
- DP
- ๋ฐฑ์ค
- ์๋ฐ์คํฌ๋ฆฝํธ
- React
- ๋ถ์คํธ์ปจํผ๋ฐ์ค
- icecandidate
- ์ฝ๋ ํฌ๋ฉง
- Node.js
- ๊ณผ์ ํ ์คํธ
- Today
- Total
๋ชฉ๋กVue (15)
๐ฅ dev-ruby
1. ์ด๋ฒคํธ ํธ๋ค๋ฌ 1-1. ๋ฒํผ click => ์ถ์ฝ๋ฐฉ์ jsํจ์๋ช ๋์ ๋์ ์์ฒด๋ฅผ ๋ฃ์ด๋๋จ -> "์ ๊ณ ์ += 1" 1-2. ๋ฒํผ mouseover ํจ์ ์์์ ๋ฐ์ดํฐ์ธ ๋ this.๋ฐ์ดํฐ๋ช 1-3. ์ด๋ฏธ์ง ๋ฃ๊ธฐ ์ ๋๊ฒฝ๋ก - http:/ ๊ทธ๋ฅ ๋ฃ๋๋ค ์๋๊ฒฝ๋ก - ./assets/room0.jpg ๋ฌด์กฐ๊ฑด ./๋ก ์์ํ๋ค
1. v-for ๋ฐ๋ณต๋ฌธ ๋ชจ๋ HTMLํ๊ทธ์ ์ ์ฉ๊ฐ๋ฅํ๋ค ex ) :key์ ์ฉ๋ -๋ฐ๋ณต๋ฌธ์ธ ๋ ๊ผญ ์จ์ผํ๋ค -๋ฐ๋ณต๋ฌธ ๋๋ฆฐ ์์๋ฅผ ๊ตฌ๋ถํ๊ธฐ ์ํด ์ 1-1. v-for๋ฅผ ํ์ฉํด ํ ํ๋ฆฟ์ ๋ณ์์ถ๋ ฅ menus : [' ', ' ', ' '] 1๋ฒ {{ menu }} 2๋ฒ {{ menus[i] }} 1-2. 2๊ฐ์ ๋ณ์ ๊ฐ๋ฅ {{ menu }}โ menu๋ ๋ฐฐ์ด์ ๋ฐ์ดํฐ๊ฐ ๋๊ณ , i๋ ์ธ๋ฑ์ค๊ฐ ๋๋ค -> 2๊ฐ์ฐ๋ ค๋ฉด ๋ค์ ๊บผ๋ฅผ key์ ๋ฃ์ด์ค์ผํจ ์์ {{ product }} {{ price1 }}๋ง์ ํ์๋งค๋ฌผ์ ๊ณ ์ ๊ณ ์ : {{์ ๊ณ ์}} {{ products[i] }} {{ price1 }}๋ง์ ํ์๋งค๋ฌผ์ ๊ณ ์ ๊ณ ์ : {{์ ๊ณ ์}} ํ์๋งค๋ฌผ์ ๊ณ ์ ๊ณ ์ : {{์ ๊ณ ์}}
1. vue ํ๋ก์ ํธ ์์ฑ ๋ช ๋ น vue create ํ๋ก์ ํธ๋ช App.vue๊ฐ ๋ฉ์ธํ์ด์ง๋ค. 2. ์น ๋ธ๋ผ์ฐ์ ๋ก ์คํํ๋ ๋ช ๋ น npm run serve 3. ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ - ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ์ดํฐ๋ฅผ HTML์ ๊ฝ์๋ฃ๋ ๋ฌธ๋ฒ vue์ ๋ฐ์ดํฐ ๋ณด๊ดํ๋ ๊ณณ export default{ name: 'App', data(){ return{ /* [์ฌ๊ธฐ์ ๋ฐ์ดํฐ ๋ณด๊ด] */ } }, methods : { ํจ์๋ช (){ }, }, component: { } } ๋ฐ์ดํฐ๋ object์๋ฃ๋ก ์ ์ฅํ๋ค. ==> { ์๋ฃ์ด๋ฆ: ์๋ฃ๋ด์ฉ } 4. ํ ํ๋ฆฟ์ ๋ฐ์ดํฐ ๋ฃ๋๋ฒ {{ ๋ฐ์ดํฐ์ด๋ฆ }} -> {{ }} ์๋ ๋ ๋๋ง์ ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค. 5. HTML์์ฑ๋ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ด ๊ฐ๋ฅํ๋ค. 1. ๋ฐ์ดํฐ ๋ณด๊ด styleColor: 'col..