개인코딩개발공장

# children만들기 { path: "/detail/:index", component: Detail, children: [ { path: "author", component : Author }, { path: "comment", component : Comment }, ] }, 이렇게 칠드런 컴포넌트를 써주면 됨. author은 detail/:index/author으로 연결이 되는거임. 물론 import해줘야함. # detail.vue에서 으로 갖다쓰면됨. 연결은 {{posts[$route.params.index].title}} 이렇게 해줬음. ## router함수 # push함수 여기서 제목을 클릭하면 detail/~/author이라는 라우터를 기본 주소에 붙여준다는거임. 페이지 이동되는거. # g..

# 설치 npm install vue-router@4 # ./src/main.js에서 라우터 선언 import { createApp } from 'vue' import App from './App.vue' import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' import router from './router.js' createApp(App).use(router).mount('#app') # ./router.js파일만들고 내용 넣기 import { createWebHistory, createRouter } from "vue-router"; import List from './components/List.vue' import Main from ..

package.json에 "rules": { "vue/multi-word-component-names": "off" } 추가 그리고 재시작해야함.

# 인풋창에 입력한 값 Month : {{monthChosen}} 개월 선택할거야? {{monthChosen * products[now].price }}원 인풋값에 입력한값은 monthChosen이란 데이터값에 저장된다. 그리고 데이터에 data(){ return{ monthChosen : 1, dataa : '', } }, 이렇게 monthChosen은 기본값 1로 해놨다. 그리고 p태그들 안에서 데이터를 사용하면 된다. # 축약버전 {{dataa}} dataa라는 키값에 인풋값을 자동으로 저장해줌. v-model.number하면 받은 인풋값을 숫자로 저장해줌. ## watcher사용 (인풋값 감시) monthChosen의 인풋값에 숫자만 와야함. data(){ return{ monthChosen : ..

먼저 Modal.vue에서 props로 App.vue의 데이터를 가져왔다. 근데 props로 가져온 데이터는 수정을 할 수가 없음. 그럼 Modal.vue에서 App.vue의 데이터를 수정하고 싶을때는? custom event를 사용하자. Modal.vue 에서 App.vue에 메세지를 보내는것임. Lists.vue에서 {{ products.title }} 이건 제목으로 한거고.. App.vue에서 lists.vue에서 opanModal이라는 이벤트가 오면 modalStatus를 여기서 데이터도 전해질수 있는데 {{ products.title }} 이런식으로 원하는 데이터를 옆에 적고 보내면 $event로 데이터를 가져올수있음. 모달창 닫기버튼 Modal.vue close App,vue # 이미지 클릭으..

컴포넌트 쓰는 순서 #1 ~~~.vue파일을 만들어서 정리. 이렇게 파일 아무대나 갖다 만들어놓음. #2 ~~~.vue내용 및 export vue 템플릿( 꺽쇠 이렇게 원하는 데이터들을 갖다 붙여줌. 왼쪽은아무렇게 작명해도되고 오른쪽은 데이터 객체 키값 보통 둘다 똑같게씀. 난 Modal로 만들어봄. 그리고 Modal.vue에 가서 익스포트를 수정해줘야함. 이렇게 전해받을 데이터를 props키값 객체에 넣어줌. 이거 막만들다가 겁나복잡해질듯. 프롭스로 가져온 데이터는 수정을 못함!! 그래서 mdalStatus가 작동안됨. ## 컴포넌트 연습코드 # app.js import List from './Lists.vue' components: { Discount: Discount, //Discount, 걍 이렇..

예전에 배우다만 뷰js를 다시 시작하면서 그동안 배운것들을 다시 정리해본다. # 프로젝트 생성 시작하면서 cmd에서 프로젝트부터 만들자. 이전에 뷰 설치는 npm install -g @vue/cli로 하고 익스텐션 vetur, html css support, vue 3 snippets설치하고 시작한다. 프로젝트 만드는건 cmd에 vue create 프로젝트명, 그리고 vue3을 선택한다. 그리고 프로젝트 이름을 vs코드로 열고 시작하자. # 데이터바인딩 export default { name: 'App', components: { }, data() { return { modalStatus : 0, now : 0, menus: ['Home', 'Shop', 'About'], family: [ {name: ..