Vuetify3 vuetify component의 input, button 사용할 때 길이 조정하기 vuetify input이나 button 컴포넌트를 사용할 때는 길이가 길게 나온다.이를 위해서는 vuetify 의 그리드 시스템과 레이아웃 유틸리티 클래스를 활용하여 레이아웃을 조정할 수 있다. 1. vuetify 의 그리드 시스템 사용하기 ( v-row, v-col )vuetify는 Flexbox 기반 그리드 시스템을 제공하므로, v-row, v-col을 사용해 레이아웃을 조정한다. 기본 사용 코드화면vuetify 그리드 시스템 사용하기 화면설명v-col 의 cols, sm, md 속성 사용 사용cols="12"모바일 크기에서 전체 너비를 사용sm="6"작은 화면에서는 50%md="4"더 큰 화면에서는 1/3.. 2024. 10. 16. vuetify v-data-table 적용하기, vue modal 모달 화면 구성하기 #17 국회도서관 자료검색 마지막 페이지인 상세페이지는 모달화면으로 작성한다.이 페이지에서는 parent 화면에서 넘어온 파라미터로 v-data-table을 적용해 본다. ☞ 소스 개발순서는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-v-router-통해-타-페이지-호출-방법-및-데이터-전달-방법-15 vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15v-router로 타 페이지 호출하고, 데이터를 전달하는 방법은국회도서관 자료검색 화면을 개발하면서 적용한다.vue cli 로 화면을 개발하기 위해 먼저 개발 순서를 정하고, 이후 하나씩 개발하면서 v-ryuneenelife.tistory.comvuetify v-data-tablev-data-.. 2024. 8. 22. vue router, vuetify 설치하기 #13 vue router ?페이지간 이동을 위해 필요한 vue router 설치.Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.☞ 공식 사이트https://router.vuejs.org/installation.htmlvuetify ?자바스크립트 프레임워크로 개발자들에게 필요한 기능들을 제공하는 개발 프레임워크이다.☞ 공식 사이트https://v15.vuetifyjs.com/ko/getting-started/quick-startvue router 설치vue 설치 디렉터리로 이동한다.npm install vue-router@3 로 설치vue2 버전을 설치했기 때문에 vue router 도 3으로 설치한다.vue3 인 경우에.. 2024. 8. 14. 이전 1 다음
