Lesson-03-Vue
This section shows the vuejs with vuetify
v-for
- Use v-for to easily create multiple tags
We need to have a list in data()
In tags the format should like this v-for=”link in links” :key=”link.text”, the key must be unique value in the list.
1<template>
2 <v-navigation-drawer v-model="drawer" app class="primary" temporary>
3 <v-list>
4 <v-list-item
5 v-for="link in links"
6 :key="link.text"
7 router
8 :to="link.route"
9 >
10 <v-list-item-action>
11 <v-icon class="white--text"> {{ link.icon }} </v-icon>
12 </v-list-item-action>
13 <v-list-item-content>
14 <v-list-item-title class="white--text font-weight-bold">
15 {{ link.text }}
16 </v-list-item-title>
17 </v-list-item-content>
18 </v-list-item>
19 </v-list>
20 </v-navigation-drawer>
21</template>
22
23<script>
24 export default {
25 data() {
26 return {
27 drawer: false,
28 links: [
29 { icon: "mdi-view-dashboard", text: "Dashboard",
30 route: "/" },
31 { icon: "mdi-folder", text: "My Projects", route: "/
32 projects" },
33 { icon: "mdi-account-group", text: "Team", route: "/
34 team" },
35 ],
36 };
37 },
38 };
39</script>
router
There are two ways to import components in router.
Use import in the beginning, to import the component at first.
1import Dashboard from "../views/Dashboard.vue";
2
3const routes = [
4 {
5 path: "/",
6 name: "Dashboard",
7 component: Dashboard,
8 },
9 ];
import the components inside route array directly.
1const routes = [
2 {
3 path: "/projects",
4 name: "Projects",
5 // route level code-splitting
6 // this generates a separate chunk (projects.[hash].js) for this route
7 // which is lazy-loaded when the route is visited.
8 component: () =>
9 import(/* webpackChunkName: "projects" */ "../views/Projects.vue"),
10 },
11 ];
See the origin file, (click this link to download a copy of this file)
1import Vue from "vue";
2import VueRouter from "vue-router";
3import Dashboard from "../views/Dashboard.vue";
4import Team from "../views/Team.vue";
5
6Vue.use(VueRouter);
7
8const routes = [
9 {
10 path: "/",
11 name: "Dashboard",
12 component: Dashboard,
13 },
14 {
15 path: "/projects",
16 name: "Projects",
17 // route level code-splitting
18 // this generates a separate chunk (about.[hash].js) for this route
19 // which is lazy-loaded when the route is visited.
20 component: () =>
21 import(/* webpackChunkName: "about" */ "../views/Projects.vue"),
22 },
23 {
24 path: "/team",
25 name: "Team",
26 component: Team,
27 },
28];
29
30const router = new VueRouter({
31 mode: "history",
32 base: process.env.BASE_URL,
33 routes,
34});
35
36export default router;
Add dummay data
To dynamicaly add class name into tag, we can use bind in tag attributes, like :class,
the format is <v-row :class=”`pa-3 peoject ${project.status}`”>
1<template>
2 <div class="dashboard">
3 <h1 class="subheading grey--text">Dashboard</h1>
4
5 <v-container class="my-5">
6 <v-card
7 flat
8 class="pa-3"
9 color="info"
10 v-for="project in projects"
11 :key="project.title"
12 >
13 <v-row :class="`pa-3 peoject ${project.status}`">
14 </v-row>
15 </v-card>
16 </v-container>
17 </div>
18</template>
19
20<script>
21 // @ is an alias to /src
22 export default {
23 data() {
24 return {
25 projects: [
26 {
27 title: "Design a new website",
28 status: "ongoing",
29 },
30 {
31 title: "Code up the homepage",
32 status: "completed",
33 },
34 {
35 title: "Design video thumbnails",
36 status: "completed",
37 },
38 {
39 title: "Create a community forum",
40 status: "overdue",
41 },
42 ],
43 };
44 },
45};
46</script>
See the origin file, (click this link to download a copy of this file)
1<template>
2 <div class="dashboard">
3 <h1 class="subheading grey--text">Dashboard</h1>
4
5 <v-container class="my-5">
6 <v-row class="mb-3 ml-10">
7 <v-tooltip top>
8 <template v-slot:activator="{ on, attrs }">
9 <v-btn
10 small
11 dark
12 color="grey"
13 class="mr-2"
14 @click="sortBy('title')"
15 v-bind="attrs"
16 v-on="on"
17 >
18 <v-icon left small>mdi-folder</v-icon>
19 <span class="caption text-lowercase">By project name</span>
20 </v-btn>
21 </template>
22 <span class="caption text-lowercase"
23 >sort project by project name</span
24 >
25 </v-tooltip>
26 <v-tooltip top>
27 <template v-slot:activator="{ on, attrs }">
28 <v-btn
29 small
30 dark
31 color="grey"
32 class="mr-2"
33 @click="sortBy('person')"
34 v-on="on"
35 v-bind="attrs"
36 >
37 <v-icon left small>mdi-account</v-icon>
38 <span class="caption text-lowercase">By person</span>
39 </v-btn>
40 </template>
41 <span class="caption text-lowercase">sort project by person</span>
42 </v-tooltip>
43 </v-row>
44
45 <v-card flat v-for="project in projects" :key="project.title">
46 <v-row :class="`ma-1 pa-2 project ${project.status}`">
47 <v-col cols="12" sm="12" md="6">
48 <div class="caption grey--text">Project title</div>
49 <div>{{ project.title }}</div>
50 </v-col>
51 <v-col cols="6" sm="4" md="2">
52 <div class="caption grey--text">Person</div>
53 <div>{{ project.person }}</div>
54 </v-col>
55 <v-col cols="6" sm="4" md="2">
56 <div class="caption grey--text">Due by</div>
57 <div>{{ project.due }}</div>
58 </v-col>
59 <v-col cols="12" sm="4" md="2">
60 <div class="text-right">
61 <v-chip small :class="`${project.status} my-2`">
62 {{ project.status }}
63 </v-chip>
64 </div>
65 </v-col>
66 </v-row>
67 <v-divider inset></v-divider>
68 </v-card>
69 </v-container>
70 </div>
71</template>
72
73<script>
74// @ is an alias to /src
75export default {
76 data() {
77 return {
78 projects: [
79 {
80 title: "Design a new website",
81 person: "The Net Ninja",
82 due: "1st Jan 2022",
83 status: "ongoing",
84 content:
85 "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam natus neque ut delectus facere. Repudiandae aliquid ratione asperiores aut ad facilis dolorum, sapiente, doloremque nisi qui eveniet numquam, illum excepturi.",
86 },
87 {
88 title: "Code up the homepage",
89 person: "Skycoco",
90 due: "10th Jan 2022",
91 status: "completed",
92 content:
93 "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fuga ex odio minus libero praesentium vero quas. Accusamus recusandae voluptates doloremque! Eum non, nam commodi possimus facilis exercitationem distinctio sapiente?",
94 },
95 {
96 title: "Design video thumbnails",
97 person: "Jant",
98 due: "2nd Feb 2022",
99 status: "completed",
100 content:
101 "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic totam qui labore doloribus, error necessitatibus veritatis aut exercitationem fugit deserunt. Quidem, voluptatem nemo. Nulla excepturi doloremque omnis minus in optio.",
102 },
103 {
104 title: "Create a community forum",
105 person: "Bob",
106 due: "20th Jan 2022",
107 status: "overdue",
108 content:
109 "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta officiis nulla ratione tempora, eius blanditiis repellat voluptates est aspernatur impedit quo minima enim ullam adipisci vel ducimus. Eaque, officiis obcaecati.",
110 },
111 ],
112 };
113 },
114 methods: {
115 sortBy(prop) {
116 this.projects.sort((a, b) => (a[prop] < b[prop] ? -1 : 1));
117 },
118 },
119};
120</script>
121
122<style scoped lang="scss">
123.project.completed {
124 border-left: 4px solid #3cd1c2;
125}
126.project.ongoing {
127 border-left: 4px solid orange;
128}
129.project.overdue {
130 border-left: 4px solid tomato;
131}
132
133.v-chip.completed {
134 background-color: #3cd1c2 !important;
135}
136.v-chip.ongoing {
137 background: orange !important;
138}
139.v-chip.overdue {
140 background: tomato !important;
141}
142// .v-btn {
143// text-transform: lowercase;
144// }
145</style>
v-slot, v-on
see: https://blog.csdn.net/weixin_44710964/article/details/107428727 vue: https://staging-cn.vuejs.org/guide/components/slots.html#slot-content-and-outlet