Vue.js
-
Nested routes와 push함수Vue.js 2022. 7. 25. 13:43
저번에 /detail/숫자에 따른 각각의 상세페이지를 보여줬는데, 여기서 /detail/0/author 이렇게 적으면 0번글의 상세페이지의 저자를 보여주고 싶다. 이럴 때, 쓰는게 nested routes이다. 만드는 방법은 children : {}을 안에 만들면 된다. { path: '/detail/:id', component: Detail, children: [ { path: "author", component: Author, }, { path: "comment", component: Comment, }, ] }, 이렇게 Detail을 보여주는 컴포넌트 밑으로 children을 적어주고, 거기에 또 path와 component를 적어주면 된다. 결과적으로, /detail/:id/author ,/det..
-
router에서 페이지나누기Vue.js 2022. 7. 25. 13:12
보통 url디자인은 /어쩌구/1 이면 1번글을 /어쩌구/2 이면 2번글을 보여준다. 이런건 route에 const routes = [ { path: "/list", component: List, }, { path: "/", component: Home, }, { path: '/detail/:id', component: Detail, } ]; 이런 식으로 /detail/:작명 이렇게 사용할 수 있는데, 이러면 /detail/아무거나 적으면 보여주게 된다. 이걸 파라미터 문법이라고 한다. 근데 들어갈 때마다, 디테일페이지 글제목 글설명~ ,html이 이러면 똑같은 페이지만 보여주니까, detail뒤에 오는 숫자에 따라 디테일 페이지를 바꿔보자. 디테일페이지 {{블로그글[$route.params.id].tit..
-
Router사용하기Vue.js 2022. 7. 21. 13:36
터미널에 npm install vue-router@4 을 입력해서 router를 설치해준다. 그러곤, main.js에서 라우터 셋팅을 해주어야한다. createApp(App).use(라우터만든거).mount('#app') 위처럼 쓰는데, 라우터만든거를 넣을 때, 코드가 길어서 scr폴더에 router.js파일을 만들어서 거기서 작성해보자. //(src/router.js) import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/경로", component: import해온 컴포넌트, } ]; const router = createRouter({ history: createWebHistory(), routes..
-
blog레이아웃 bootstrap이용Vue.js 2022. 7. 21. 03:27
vue에 bootstrap를 설치하는 방법은 몇가지가 있는데, 먼저, 사이트에서 이렇게 css, js를 첨부해주면 된다. 하지만 이 방법은 거리가 멀어지거나, 사이트에 문제가 생기면 중단이 될 수 있다. 그래서 두번째로는 다운하는 방법이 있는데, 미리보기 띄우던 터미널은 종류하고, npm install bootstrap@next @popperjs/core //5버전 npm install bootstrap jquery popper.js //4버전 이렇게 설치해주고, main.js에 가서 맨 위에 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' 이렇게 두가지를 import해주면 된다. 그리곤 이런 식으로 app.vue와 list.vue컴포넌..
-
vue의 라이프사이클Vue.js 2022. 7. 20. 02:33
이렇게 생긴, 할인베너를 등장하고 2초 후에 사라지게 만들면서 라이프사이클에 대해 배워보자. 우리가 만드는 들은 웹에 표시되기까지 일련의 step을 거치는데, create스텝 - mount스텝- 컴포넌트 생성을 한다. 이 중간중간 hook을 걸어서 mount되기 전 이것 좀 실행해주세요 이런 식으로 걸 수 있다. export default { name: 'App', data() {//데이터 보관함 return { } }, methods : { }, mounted() { //mount되고 나서 뭔가 실행할 떄 }, components: { Discount : Discount, Modal : Modal, Card : Card, } } 이렇게, mounted되고 나서 실행할 코드를 쓰고, 다른 lifecycl..
-
상품정렬기능과 데이터 원본보존Vue.js 2022. 7. 19. 13:31
원래 js로 상품을 정렬하려면 데이터를 정렬해주고, html에 반영해주세요 이 순서로 짜야하는데, vue에서는 데이터바인딩이 잘 되어 있다면, 데이터만 정렬하면 실시간으로 자동 반영이 된다. 가격순정렬 이렇게 버튼을 만들고, 함수 내용이 기니까, priceSort란 함수를 methods오브젝트에 만들어서 사용해보자. methods : { priceSort() { this.원룸들.sort(function(a,b) { return a.price - b.price }); }, }, 이렇게 this.원룸들에 sort함수를 붙여주면 문자정렬인데, 내부에 콜백함수를 넣어서 a-b를해서 음수면 a를 왼쪽으로 보내주는 기능을 이용해서 가격이 낮은 순으로 정렬해주게 된다. 원래대로 버튼도 만들어보자. data() {//..
-
vue의 UI애니메이션Vue.js 2022. 7. 19. 02:19
vue에서 애니메이션을 주는 방법엔 2가지가 있다. 먼저, css로 start라는 클래스를 미리주고, 거기엔 opacity : 0;과 transition: all 1s;을 주고, end라는 클래스를 모달창이 열릴 때 마다 부착해서 opacity : 1;로 만들어주면 된다. 위처럼 클래스를 부착할 땐, :class="{ end : true }"이렇게 오브젝트형식으로 넣을 수 있다. 그냥 :class="end"도 가능하지만, 오브젝트형식으로 넣어주면, 조건부로 사용할 수 있다. 즉, { 클래스명 : 조건 }으로 사용하며 조건이 참일 때만 클래스가 붙는다. 그래서 이런 식으로 적으면, 버튼을 눌러서 모달창열렸니가 true로 바뀌어 모달창이 열리면 자동으로 end라는 클래스가 부착되어 opacity가 0에서 1..
-
watcher로 데이터 감시Vue.js 2022. 7. 19. 01:40
input태그를 쓸 때, number로 초기값을 정했는데, string으로 넣을 때, 제한을 할 수 있다. 이럴 때, watcher를 사용하는데, watcher은 데이터를 감시하는 함수이다. data(){ return { month : 1, } }, watch : { month() { } }, 이렇게, data에 month라는 데이터를 감시하고 싶으면 watch안에 감시할 데이터 이름으로 함수를 만들어주면 된다. 감시라는건, month라는 데이터가 변할 때마다 위의 month함수의 코드가 실행된다는걸 뜻한다. 그래서 month()함수 안에 코드를 작성해보면 watch : { month(a,b) {//a는 변경 후 데이터, b는 변경 전 데이터 if (isNaN(a)==true) { alert('문자 입력..