반응형
07. 리스트와 아이콘 사용법
앱UI제작
- 리스트와 아이콘의 사용법 학습
- 실전과 비슷한 예제를 통해서 사용법 학습
data :{}는 단일 데이터
data(){}는 return은 필수이며 return으로 값을 호출 할 수 있다. 재사용 다시 렌더링하려면 함수형식으로 사용
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- |Material+icon 아이콘 같이 사용하려면 기입 -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap|Material+icon"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.0.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<title>vuetify practice</title>
<style></style>
</head>
<body>
<div id="app">
<v-app>
<v-app-bar color="orange" dark app>
<!-- 좌측에 메뉴 아이콘 추가 -->
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Virtual Company</v-toolbar-title>
</v-app-bar>
<v-main>
<v-container>
<v-card>
<v-list two-line v-for="item in aList" :key="item.title">
<!-- 항목을 하나씩 가져와서 item 단위로 표시 -->
<v-list-item @click="">
<!-- 좌측에 대표 아이콘 먼저 표시 -->
<v-list-item-avatar>
<v-icon :class="item.icon_style">
{{item.icon_name}}
</v-icon>
</v-list-item-avatar>
<!-- 제목 렌더링 -->
<v-list-item-content>
<v-list-item-tilte>{{item.title}}</v-list-item-tilte>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon class="material-symbols-outlined"
>keyboard_arrow_right</v-icon
>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-card>
<v-btn fab dark color="red">
<v-icon>add</v-icon>
</v-btn>
</v-container>
</v-main>
<v-footer></v-footer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
// 반복되는 항목들은 JSON 배열 데이터로 만들어 반환
return {
aList: [
{
icon_style: "red white--text ",
icon_name: "account_balance",
title: "Create List",
},
{
icon_style: "green white--text ",
icon_name: "photo",
title: "Use Material Icon",
},
{
divider: false,
icon_style: "yellow white--text",
icon_name: "movie",
title: "List & Icons",
},
],
};
},
});
</script>
</body>
08.하단 네비게이션
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- |Material+icon 아이콘 같이 사용하려면 기입 -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.0.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
rel="stylesheet"
/>
<title>vuetify practice</title>
<style></style>
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-card
height="100%"
class="d-flex display-2 align-center justify-center"
>
선택:{{sSelect}}
</v-card>
</v-main>
<v-footer>
<!-- 선택된 메뉴는 sSelect 데이터를 연동시켜 바인딩 -->
<v-bottom-navigation absolute v-model="sSelect" dark>
<!-- 아이콘 버튼 3개 표시 -->
<v-btn color="red" text value="자전거"
>자전거
<v-icon>directions_bike</v-icon>
</v-btn>
<v-btn color="red" text value="지하철"
>지하철
<v-icon>subway</v-icon>
</v-btn>
<v-btn color="red" text value="버스"
>버스
<v-icon>directions_bus</v-icon>
</v-btn>
</v-bottom-navigation>
</v-footer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
sSelect: "자전거",
};
},
});
</script>
</body>09. 탐색 서럽
탐색 서랍(Navigation drawer)UI
- 앱바의 메뉴 아이콘을 누르면 탐색 서랍표시
- 링크를 클릭하면 해당 사이트로 이동
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- |Material+icon 아이콘 같이 사용하려면 기입 -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.0.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/86e4e86e0d.js"
crossorigin="anonymous"
></script>
<title>vuetify practice</title>
<style></style>
</head>
<body>
<div id="app">
<v-app>
<v-app-bar app color="primary" dark>
<!-- 메뉴 아이콘을 누르면 클릭기능 비활성화 -->
<v-app-bar-nav-icon
@click.stop="bDrawer = !bDrawer"
></v-app-bar-nav-icon>
<v-toolbar-title>Header입니다</v-toolbar-title>
<!-- bDrawerrk True 이면 탐색 서랍 사용하도록 바인딩 -->
</v-app-bar>
<v-navigation-drawer
absolute
temporary
v-model="bDrawer"
></v-navigation-drawer>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
//버튼을 누르면 비활성화되도록 하는 토글 변수
bDrawer: false,
//배열로 메뉴의 제목, 아이콘, 링크 준비
menu_items: [],
};
},
});
</script>
</body>라우터로 멀티페이지 관리하는 SPA 만들기
본격적인 실전 프로젝트 시작
- 뷰티파이에서 제공하는 Vue-CLI 템플릿
- 메인페이지와 서브페이지로 이동하는 라우터 기능 구현
public 정적파일만 담겨질수있음
src 개발한 파일들이 담겨져있는 폴더
dist build를 통한 결과 폴더
vue add vuetify
** 공부
seo
mpa - 페이지마다 한번씩 로딩
spa - 처음로딩이 느림 그후에는 계속
04. Vuex로 상태값 관리하는 SPA 만들기
Vuex로 상태값 관리
- 뷰티파이로 디자인한 메인페이지에서 입력한 내용을 Vuex에 저장
- 그 값을 서브페이지에서 전달받아 관리
728x90
'VueJS > VueJS' 카테고리의 다른 글
| 2023/06/22__VueJS(cache 관련 및 firebase) (0) | 2023.06.23 |
|---|---|
| 2023/06/19__VueJS(Vue && PWA && Firebase) (0) | 2023.06.20 |
| 2023/06/14__VueJS(Vuetify) (0) | 2023.06.14 |
| 2023/06/13__VueJS(router) (0) | 2023.06.13 |
| 2023/06/12__Vue.JS(2) (computed, method, component, templet, Vuex) (0) | 2023.06.12 |