컴포넌트를 재사용하는게 좋을 것 같아 props가 필요해졌다. vue에서는 props를 어떻게 넘기는지 알아봤다. 먼저 부모 컴포넌트에서 데이터를 넘겨준다. 넘겨주는 값의 이름을 정하고 :를 붙이면 된다. 나는 lanType과 select라는 props를 넘겨줬다. 그리고 신기하게 vue에서는 넘기는 값의 ""의 내부가 자바스크립트 코드를 쓸 수 있는 범위인 것 같다. "" 안에 그냥 쓰면 변수이고, 문자열을 넣고 싶으면 따옴표로 감싸줘야 한다. 그래서 '한국어'와 'English'라는 문자열을 넘길 때 안에서 작은따옴표로 감싸서 문자열을 넘겨줬다. // 부모 컴포넌트의 태그 내부 부모 컴포넌트에서 값을 넘겨줬으면 이제 자식 컴포넌트에서 값을 받아야한다. props 객체 안에 넘겨준 값의 이름을 키, 대..
토이 프로젝트를 하나 하려는데 react+ts로 할까 하다가 vue 공부를 하다만 게 생각나서 vue로 프로젝트를 생성했다! 오랜만에 생성하니까 정말 하나도 기억이 안난다! 🤯 블로그에 적어둔 것도 없어서 이번에는 적어가면서 진행하려고 한다 😀 vite로 프로젝트를 생성한다. npm create vite@latest 내 프로젝트 -- --template vue d.ts 파일 생성 import from에 vue 모듈이 없다고 난리를 치면 때문에 황급히 d.ts 파일을 생성한다. 참고 컴포넌트 선언 문법 Options API vs Composition API options API는 기존 vue 2.X 버전 때 사용하던 방법이다. data()가 return 하는 객체 안에 변수를 정의하고, methods에 함..
Vue.js props 속성 부모 컴포넌트로부터 받아오는 props를 props 속성에 정의한다. 자식 컴포넌트에서는 부모 컴포넌트의 props를 변경해서는 안된다. export default { props: { greetingMessage: String } } {{ greetingMessage }} filters 속성 사진에 씌우는 필터와 비슷하다고 생각하면 된다. 텍스트를 원하는 형식으로 바꾼다. 아래와 같은 형식으로 사용한다. {{ message | capitalize }} filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() +..
저는 방금 막 vite로 vue + ts 프로젝트를 시작했을 뿐인데요... 타입스크립트님 또 왜 그러시는지요....🥲 Cannot find module './App.vue' or its corresponding type declarations. 이유 타입이 없으시답니다... 그래서 d.ts파일을 생성해줘야한다고 한다. // src/shims-vue.d.ts declare module '*.vue' { import type { DefineComponent } from 'vue'; const component: DefineComponent; export default component; } 참고 링크 1 참고 링크 2 참고 링크 3
- Total
- Today
- Yesterday
- CSS
- 구름에듀
- js
- TS
- Typescript
- Til
- 드림코딩
- 스파르타코딩클럽
- 파이썬
- 제이쿼리
- 제로초
- 김버그
- 회고
- map
- 자바스크립트
- 타입스크립트
- javascript
- React
- git
- 깃
- 코드잇
- vue
- Python
- 저스트코드
- html
- vscode
- scss
- 코딩앙마
- 리액트
- 비주얼스튜디오코드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |