배워서 따라하는 포플/영화 검색 사이트 (13) 썸네일형 리스트형 Search - 필터, 버튼 Search - 필터 src폴더 안에 components폴더를 만들고 Search.vue파일을 만듭니다. container안에 input창을 우선 만들었습니다. v-model="title"를 통해 양방향 바인딩합니다. class는 부트스트랩 .form-control를 적용합니다. script부분에 title를 반환합니다. selects부분에 필터를 만들었습니다. 3개의 select박스였고 반복적으로 나타나서 v-for를 사용했습니다. 양방향 바인딩때문에 v-model를 사용했고, 위에 반복문때문에 값이 바뀔 수 있어서 v-model="$data[filter.name]"으로 자동 완성했습니다. option에는 연도에만 All Years를 표시하면 됨으로 v-if 조건문 사용했습니다. 기타 부분은 반복문 v.. Header - Nav, Logo&구글폰트, Headline Header - Nav src폴더 안에 components폴더를 만들고 Header.vue파일을 만듭니다. 부트스트랩을 확인한 결과 nav pills모양을 따라 하고 싶었습니다. nav, nav-item, nav-link 클래스를 부여하면 기본 구조가 나오니 그대로 해봤습니다. v-for를 이용해 반복작업을 피했습니다. Header - Logo 및 Google Font 본 프로젝트 전체에서 Roboto 400, 700 사용할 예정이며 로고부분은 Oswald 500를 사용할 겁니다. Google Font에서 선택한 후 link를 복사합니다. 루트경로의 index.html의 head부분에 붙여줍니다. 전체 파일에 roboto를 사용할 것이니 style에 명시해줍니다. src폴더 안에 components폴더 .. 시작하기 - Vue Router, Bootstrap 구성 Vue Router 구성 특정한 사이트를 만들 때 페이지를 구분하기 위해 사용한 것이 바로 Router입니다. 예를 들면, naver/news, naver/store등 각각 뉴스, 스토어 페이지를 구분합니다. Vue Router 문서 npm i vue-router를 통해 설치합니다. src폴더 안의 main.js에 router를 import하고 사용합니다. routes폴더 안의 index.js를 작성해보겠습니다. vue-router에서 createRouter와 createWebHashHistory를 import합니다. history는 두 개의 방법이 있으며 각각 Hash와 History입니다. hash는 주석에 나오듯이 #가 존재합니다. history방식은 별도 설정이 필요해서 나중에 시도하겠습니다. r.. 이전 1 2 다음
