/detail/:id /detail/:작명 로 접속하면 작명번 게시물 보여주기 /detail/0 이런식으로 접속하면 detail 페이지가 보여진다. (router.js) import { createWebHistory, createRouter } from "vue-router"; import compDetail from './components/...

vue-router https://v3.router.vuejs.org/kr/ npm 설치 npm install vue-router router 사용 세팅 src/main.js에 import router from ‘./router.js’ createApp(App).use(라우터만든거).mount(‘#app’) 라우터 설정 코드가 길기때문에...

BootStrap BootStrap 참고 : Bootstrap 5.0 버전 이상은 IE에서 정상적으로 동작하지 않는다. (IE를 고려한다면 4.1버전 사용) 설치 방법 1. CDN Get started with Bootstrap CSS : https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist...

라이프사이클 (생명주기) 컴포넌트는 웹페이지에 표시되기까지 일련의 step을 거친다. 이것을 라이프사이클이라고 한다. create 단계 : 데이터만 존재하는 단계 mount 단계 : 컴포넌트 안의 HTML을 실제 HTML로 바꿔주는 단계 컴포넌트 생성 : HTML에 장착하는 단계 update 단계 : data가 변경되어 재렌더링 되...

sort() sort() 함수는 문자를 알파벳순으로 정렬해준다. 숫자를 정렬하고 싶으면 아래와 같이 써준다. sort() 함수는 원본 데이터를 변형한다. 원본데이터를 보존하고 싶으면 map, filter 함수를 써준다. [1,5,8,6].sort(function(a,b){ return a-b; }); 정렬 예제 <button type...

Transition vue에서는 <Transition>을 이용하면 애니메이션을 쉽게 줄 수 있다. <Transition name="fade"> <!-- 애니메이션 주고 싶은 요소 --> </Transition> /* 등장 */ .fade-enter-from{ opacity:0; } /* 시작 스타일 *...

watcher 데이터를 감시하는 함수 데이터가 제대로 들어왔는지 검사한다, 특히 사용자의 input을 받는 페이지에서는 필수적이다. 문법 <script> export default { name: 'ModalDetail', data(){ return { month: 1, } }, watch: { ...

@input 사용자가 해당 input에 입력할 때마다 스크립트가 실행된다. <input @input=""> @change= 사용자가 해당 input에 값을 입력하고 커서를 다른 곳에 옮겼을 때 실행된다. <input @change=""> 사용자가 input에 입력한 값을 ‘month’ 데이터에 반영하기 vue에서 $ev...

자식 컴포넌트에서 props를 수정하고 싶으면 custom event를 사용한다. 자식 컴포넌트에서 부모 컴포넌트로 메세지를 보내 부모 컴포넌트에 있는 데이터를 수정해야 한다. 자식 컴포넌트에서 부모 컴포넌트로 메시지를 보내고, 부모 컴포넌트에서 메시지를 수신해야 한다. $emit(‘작명’, 데이터) 자식 컴포넌트에서 부모 컴포넌트로 메세지...

props {{ 데이터바인딩 }} 은 밑에 script 에 데이터가 있어야 가능하다. App.vue 에 있는 데이터들을 ModalDetail.vue 컴포넌트에서 사용하려면 props를 사용해야 한다. 보통 App.vue에 모든 데이터를 몰아놓고 props를 이용해 필요한 곳에 가져다 쓴다. 부모 컴포넌트 : App.vue 자식 컴포넌트 ...