Skip to content

Commit 9fb317b

Browse files
GitHubPlayerZeroGitHubPlayerZero
committed
1. 加入每日任務 13, 14, 15
2. 第二週作業：調整刪除 cookie 寫法 3. Cookie 範例：增加測試以 max-age 刪除 cookie
1 parent cffb8f0 commit 9fb317b

File tree

10 files changed

+499
-25
lines changed

10 files changed

+499
-25
lines changed

‎src/router/index.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const router = createRouter({
8787
{
8888
path: '',
8989
name: 'dayjobs-default',
90-
component: () => import('../views/day_jobs/DayJob10.vue'),
90+
component: () => import('../views/day_jobs/DayJob15/DayJob15.vue'),
9191
},
9292
{
9393
path: 'day1',
@@ -137,18 +137,18 @@ const router = createRouter({
137137
path: 'day12',
138138
component: () => import('../views/day_jobs/DayJob12/DayJob12.vue'),
139139
},
140-
// {
141-
// path: 'day13',
142-
// component: () => import('../views/day_jobs/DayJob13.vue'),
143-
// },
144-
// {
145-
// path: 'day14',
146-
// component: () => import('../views/day_jobs/DayJob14.vue'),
147-
// },
148-
// {
149-
// path: 'day15',
150-
// component: () => import('../views/day_jobs/DayJob15.vue'),
151-
// },
140+
{
141+
path: 'day13',
142+
component: () => import('../views/day_jobs/DayJob13/DayJob13.vue'),
143+
},
144+
{
145+
path: 'day14',
146+
component: () => import('../views/day_jobs/DayJob14/DayJob14.vue'),
147+
},
148+
{
149+
path: 'day15',
150+
component: () => import('../views/day_jobs/DayJob15/DayJob15.vue'),
151+
},
152152
// {
153153
// path: 'day16',
154154
// component: () => import('../views/day_jobs/DayJob16.vue'),
@@ -190,10 +190,10 @@ const router = createRouter({
190190
path: 'week2',
191191
component: () => import('../views/homework/WorkWeek2.vue'),
192192
},
193-
// {
194-
// path: 'week3',
195-
// component: () => import('../views/homework/WorkWeek3.vue'),
196-
// },
193+
{
194+
path: 'week3',
195+
component: () => import('../views/homework/week3/WorkWeek3.vue'),
196+
},
197197
// {
198198
// path: 'week4',
199199
// component: () => import('../views/homework/WorkWeek4.vue'),

‎src/views/day_jobs/DayJob13/DayJob13.vue

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<h1 class="h1">🏅 Day13 - Vue.js 的元件篇：props</h1>
3+
<p>
4+
<a href="https://hackmd.io/eof7mS55RE6XAdbnY3y-Xg" target="_blank">題目</a>｜
5+
<a
6+
href="https://github.com/GitHubPlayerZero/hex-vue3-practise/blob/main/src/views/day_jobs/DayJob13/DayJob13.vue"
7+
target="_blank"
8+
>Code</a
9+
>｜
10+
<a
11+
href="https://play.vuejs.org/#eNqlVUuLI0Uc/ypFDzKzMJ3OxskobWZgXVcYwXVwVlSMh05XdVKT7qqiqjqPDTmJiIuiFy8iIoKgN0UPivt1Znb35FfwX1X9Shuzy+4l6f/7/auVd0uIziwnXugNNMlEGmlyOmQIDTCdIYpPhl4kxNBDcRopBVTMmY4oI3LoWb1CsxRLPq8EICpdopmfcAnyg0TmVB8iyjBZ3IA/ZBlvRDqCIOGULEHJChtuWjFinm4IQXw7khiFmuqUgIJ12bGUcSokjWu2pQw75jnTFdtShk2z8XsyrfiOBEHQTCeAfOoqg43ONcXl14YKkCqWVGikiM4FcGgmuNRohSRJ0BpawjO0D1PZf62S2QqdoBMYwkzNyIcMRqJ03Ud0YtwcfGTir1xCthUh2odRpmT/0DFtI0LU6xe07UCI+t2CdpWD1URrocIgoKYZuYRWZcH8SH34fnrRuRRkvG/019aqFY/LiI3bAW+2AvaeKeD5RXY/+4A+JaDSMpqPiJTLVtCjVtCbzxT0zbO3s8nxpCPY2PnbGnRK57QVrv9cNd47u3U8O8oaNQ7ZxzdgxoPALUyxPHqZmj0Cm+IWXUZzivXElNZ9CWwQyqKFX/J63a5YFFw5pixEXRTlmluWiDCmbAxqx1YJwoJ3OGXnF1MFq7sMUZIS58N8+HMZiRCZ3w2//qsNH3CqzoexMDG7sF8uuyqo00doxBe+ovctb8QlJtIHlnMFDSiK9g49raDwhI47l4ozAC4bwMBCJmhK5DtCU7iIoReWgwIMS1M+f8vytMxJMQywmZB4uoV/qQB/Qvg4l0QROQPAqGQaCiUAFUZ85+IuWcB3Jcw4zg3q7BC+SxRPc5OjU3s9ZxjSbujZbM/s3UM37qk7C02YKosyida7OPQAB27vKL1O9+XOUbFUa+hiiSHbkb/CWtCqkR5WFYVKxgajS1xsavrA9TU370UYpQZcCxDe9lRYgxHHy+aDMelvykv761//uP7+u6uvv3z082//PPx2tXLXh9brQTDp1/aiZW4HcHr1yV9PvvjR2dkLtXYGeXeaXX/z55PPvnJm9pDbZhGaANSC1V6jESMNgz29evDD1ac/Pf794aPPf3n894NBEL3w44BJAsd+LrlQ7UeifASEFZ40VQ/sJhRYdaElbJRdnAKp7uYZ4KXlFFjV4JRoVZmt/weNEJykINiCknmobEx3xIAqYoFg5SlGexjj4tbtfcsI01wBOhcQwGdEJrD7IZpQjAmrcaSxXBtg1+s7NKkwapTyeLoBSAbUSqxreDOb51xth796/QoEA7A1+GResE6vL0nWiALetOZZCWZND7BKzsEOTViZFtRSlsIA/bqaJlyWiUIfo3g6ljA37APUcmj2Xrf7yihJrLRkJQVtcvGjlI6hKzFhmshdw7DamMTwiBtUCRHjjPwHjtf/AnhXcQY="
12+
target="_blank"
13+
>Vue SFC Playground</a
14+
>
15+
</p>
16+
17+
<hr class="hr mt-0" />
18+
19+
<div id="app" class="container">
20+
<div class="row">
21+
<template v-for="(fruit, index) in fruitData" :key="index">
22+
<div class="col">
23+
<Card
24+
:title="fruit.title"
25+
:price="fruit.price"
26+
:count="fruit.count"
27+
:imgUrl="fruit.imgUrl"
28+
/>
29+
</div>
30+
</template>
31+
</div>
32+
</div>
33+
</template>
34+
35+
<script setup>
36+
import { ref } from 'vue';
37+
import Card from './DayJob13Card.vue';
38+
console.log(`Card ==>`, Card);
39+
40+
const fruitData = ref([
41+
{
42+
title: 'apple',
43+
price: 25,
44+
count: 50,
45+
imgUrl: 'https://i.imgur.com/w4sYWlS.jpeg',
46+
},
47+
{
48+
title: 'orange',
49+
price: 15,
50+
count: 20,
51+
imgUrl: 'https://i.imgur.com/PSmzmXi.jpeg',
52+
},
53+
{
54+
title: 'strawberry',
55+
price: 45,
56+
count: 10,
57+
imgUrl: 'https://i.imgur.com/FIMmh6h.png',
58+
},
59+
{
60+
title: 'kiwi',
61+
price: 55,
62+
count: 20,
63+
imgUrl: 'https://i.imgur.com/TIA6v4m.jpeg',
64+
},
65+
]);
66+
</script>
67+
68+
<style lang="scss" scoped>
69+
.container {
70+
width: 100%;
71+
max-width: 1200px;
72+
margin: 0 auto;
73+
padding: 16px;
74+
}
75+
76+
.row {
77+
display: flex;
78+
flex-wrap: wrap;
79+
margin: -8px;
80+
}
81+
82+
.col {
83+
flex: 0 0 50%;
84+
padding: 8px;
85+
box-sizing: border-box;
86+
}
87+
</style>

‎src/views/day_jobs/DayJob13/DayJob13Card.vue

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!-- eslint-disable vue/multi-word-component-names -->
2+
<template>
3+
<div class="card">
4+
<img :src="imgUrl" class="card-img-top" :alt="title" />
5+
<div class="card-body">
6+
<h5 class="card-title">水果名稱：{{ title }}</h5>
7+
<p class="card-text">價錢：{{ price }}</p>
8+
<p class="card-text">數量：{{ count }}</p>
9+
<a href="#" class="btn" @click.prevent>加入購物車</a>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script setup>
15+
import { defineProps } from 'vue';
16+
17+
// eslint-disable-next-line no-unused-vars
18+
const props = defineProps({
19+
title: String,
20+
price: Number,
21+
count: Number,
22+
imgUrl: String,
23+
});
24+
console.log(`props ==>`, props, props.title);
25+
</script>
26+
27+
<style lang="scss" scoped>
28+
.card {
29+
border: 1px solid #ddd;
30+
border-radius: 4px;
31+
overflow: hidden;
32+
}
33+
34+
.card-img-top {
35+
width: 25%;
36+
display: block;
37+
margin: 16px auto;
38+
}
39+
40+
.card-body {
41+
padding: 16px;
42+
}
43+
44+
.card-title {
45+
font-size: 1.25rem;
46+
margin-bottom: 8px;
47+
}
48+
49+
.card-text {
50+
margin-bottom: 8px;
51+
}
52+
53+
.btn {
54+
display: inline-block;
55+
padding: 8px 16px;
56+
background-color: #007bff;
57+
color: #fff;
58+
text-align: center;
59+
border-radius: 4px;
60+
text-decoration: none;
61+
}
62+
</style>

‎src/views/day_jobs/DayJob14/DayJob14.vue

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<h1 class="h1">🏅 Day14 - Vue.js 的元件篇：emits</h1>
3+
<p>
4+
<a href="https://hackmd.io/iYXUUS2jTmKyhKmBRIDq0w" target="_blank">題目</a>｜
5+
<a
6+
href="https://github.com/GitHubPlayerZero/hex-vue3-practise/blob/main/src/views/day_jobs/DayJob14/DayJob14.vue"
7+
target="_blank"
8+
>Code</a
9+
>｜
10+
<a
11+
href="https://play.vuejs.org/#eNqlVm+LG0UY/yqPOTU5uE3SeDlle3f0rCec0Hp4JyqN0M3uJJnL7s46M5s/DQFRpFiU+qZvREQE5UTQagUr9uOYu/aVX8FnZnY3m70Qq6Vw3Xn+z/M88/tlUtqLouogJiW7tC1JEPmOJLutEGDbowOg3k6r5ERRqwSu7wiBJ5eF0qEh4a2StkssUzVnw0yBqjQkDKwO46ivdHhM5QbQ0COjdfwPtOA1RzqYxO6TMRppZS5MIYfL/AUlqq863MsLAGwadN/mPprrBFVzbJUKVpJKn2RG+nTBJuLUndvo0wUbl8WhzGz0qWhzxfE8y3W4MsPPa2MsumBUy1+5hneed7K2MJ28Ov1aMMGjcDmNJAgi4wglNIgYlzABTjowxbazAMo4+fLlTKe6mCiqNXVQm6H0rRDHLiRkZcMOmEkeq46tw84uTFQtxiwgQjhdgkY3zz46nf3+6+z+bXh+MneYwuzON7NPvnv84NH5pz88/vPOTUwC4PiEy0rivY6i6Tx1tiYYFW9QuaEcdE4APTYbyripPilvGKGekw2NZnLWM7GhWU/OZiHQqydlJOxajaodiTkOL6gNN8V77/hH1ZOIdMvKfqq9CvkYd8JuMeGlQsLGUyU8PApuBe/Sf0koJHeGbcL5uJB0s5D00lMlff3gWtDb6lWjsGviLU3ap0NaSNf8X3c8PtjbGmwGuTu2wvfVmLdrZleTvZVjX60w+iRQYyoaUk/21NXqL+htCZyRlcoa9Xo0SqS8S0Mb6uDEkmlRhGtLwy6abWkjvVVVRCoT16MCX83Yho5PTAz1YQ25E9mg/i7EtV7JxUAkMjGUh8pZx/0y1WVJjT1Am40sQW9pWZtxj3ALRSYUNiC5dGmjJAVevEO71RPBQsRlnUChXhBRfCBvRpLii2iV7HRQCCe+z4ZvaJnkMUmGgT494vaXyE8EwquNH4ecCMIHiGeZTuJFCeKSUu8fXScj/M6UAfNihZArlG8RwfxY1WjMXo1DD8vO2elqDzTkYDeOxf5IklCkl1KFznexVUIIurri6vNyX6puJks1xS6m8LWc2DIqUbyRERmuKtiCu4qCErpYsLRQakmm6NB2fIXjCWEsY0Lt0GbeOM+HveaiPvU/u//b2ddfzb74/Pz0l78ffTmZmNcH0+l2rdec+0cFdz2A3dnHfzz57Fvjp1+o9lOgv9Lt7N7DJ7fvGjf9kItuDvQQatFrLdeItsTBwhXXp24fyZAMiCY+Tj6IiZB7nupnAd23a87ui2FbRJfN3yzBc5YFs7vf//Xww/PTn4AEVMLs5x/PHtwDy1JgINW//1SGiiEq5ZRqyxumkesXi4KGKutZydQjHUSoQ84isZEc9lUJRYZNaSxSlkhhOb+K3uUUOY8kx0ehdz8B4Jwkgd/rcYAkoCUJAGeSqcLTNJluRpZM11W5Me+Nxt5W2IlDV70rpNV0hJV19cBa2IJiN3X95ndSQtBLwBsQwSLiaQxXPyn0BQ3mIQhHI0CEoB6seZ6XQKOGQ+54NBZIZglisgHhHYQKG3rU80g4h93cW1zghkbTgG8G6W2fuf0F/FYckFJDLpp6qCbUcraYv9YE8JGbFJwrwq82mpwEuSwYTUoWpNifj4AvzwRYYYmrXWAmGvo4QGt+mzy7pIViHx233+W4ETgu5jNs9lq9/nK709HaVNRJzqoWy/FpF7vi4ushfNUwtLVHXPzNo5bFhpCF5AJ7Tf8BsqMrlg=="
12+
target="_blank"
13+
>Vue SFC Playground</a
14+
>
15+
</p>
16+
17+
<hr class="hr mt-0" />
18+
19+
<div id="app" class="container">
20+
<div class="row">
21+
<template v-for="(fruit, index) in fruitData" :key="index">
22+
<div class="col">
23+
<Card
24+
:imgUrl="fruit.imgUrl"
25+
:title="fruit.title"
26+
:price="fruit.price"
27+
:count="fruit.count"
28+
@add-cart="addMyCart"
29+
/>
30+
</div>
31+
</template>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script setup>
37+
import { ref } from 'vue';
38+
import Card from './DayJob14Card.vue';
39+
40+
const addMyCart = (fruitTitle) => {
41+
const message = `您已將 ${fruitTitle} 加入購物車`;
42+
alert(message);
43+
};
44+
45+
const fruitData = ref([
46+
{
47+
title: 'apple',
48+
price: 25,
49+
count: 50,
50+
imgUrl: 'https://i.imgur.com/w4sYWlS.jpeg',
51+
},
52+
{
53+
title: 'orange',
54+
price: 15,
55+
count: 20,
56+
imgUrl: 'https://i.imgur.com/PSmzmXi.jpeg',
57+
},
58+
{
59+
title: 'strawberry',
60+
price: 45,
61+
count: 10,
62+
imgUrl: 'https://i.imgur.com/FIMmh6h.png',
63+
},
64+
{
65+
title: 'kiwi',
66+
price: 55,
67+
count: 20,
68+
imgUrl: 'https://i.imgur.com/TIA6v4m.jpeg',
69+
},
70+
]);
71+
</script>
72+
73+
<style lang="scss" scoped>
74+
.container {
75+
width: 100%;
76+
max-width: 1200px;
77+
margin: 0 auto;
78+
padding: 16px;
79+
}
80+
81+
.row {
82+
display: flex;
83+
flex-wrap: wrap;
84+
margin: -8px;
85+
}
86+
87+
.col {
88+
flex: 0 0 50%;
89+
padding: 8px;
90+
box-sizing: border-box;
91+
}
92+
</style>

‎src/views/day_jobs/DayJob14/DayJob14Card.vue

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="card">
3+
<img :src="imgUrl" class="card-img-top" :alt="title" />
4+
<div class="card-body">
5+
<h5 class="card-title">水果名稱：{{ title }}</h5>
6+
<p class="card-text">價錢：{{ price }}</p>
7+
<p class="card-text">數量：{{ count }}</p>
8+
<a href="#" class="btn" @click.prevent="requestAdd">加入購物車</a>&nbsp;&nbsp;
9+
<!-- 另一種 emit 寫法 -->
10+
<a href="#" class="btn" @click.prevent="emits('add-cart', title)">加入購物車 2</a>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script setup>
16+
import { defineProps, defineEmits } from 'vue';
17+
18+
const props = defineProps({
19+
imgUrl: String,
20+
title: String,
21+
price: Number,
22+
count: Number,
23+
});
24+
25+
const emits = defineEmits(['add-cart']);
26+
27+
function requestAdd() {
28+
emits('add-cart', props.title);
29+
}
30+
</script>
31+
32+
<style lang="scss" scoped>
33+
.card {
34+
border: 1px solid #ddd;
35+
border-radius: 4px;
36+
overflow: hidden;
37+
}
38+
39+
.card-img-top {
40+
width: 25%;
41+
display: block;
42+
margin: 16px auto;
43+
}
44+
45+
.card-body {
46+
padding: 16px;
47+
}
48+
49+
.card-title {
50+
font-size: 1.25rem;
51+
margin-bottom: 8px;
52+
}
53+
54+
.card-text {
55+
margin-bottom: 8px;
56+
}
57+
58+
.btn {
59+
display: inline-block;
60+
padding: 8px 16px;
61+
background-color: #007bff;
62+
color: #fff;
63+
text-align: center;
64+
border-radius: 4px;
65+
text-decoration: none;
66+
}
67+
</style>

0 commit comments

Comments
 (0)