Skip to content

Commit d5a7c7e

Browse files
GitHubPlayerZeroGitHubPlayerZero
committed
1. git 增加忽略的檔案。
2. 調整樣式。 3. 增加 v-on 練習範例。 4. 調整每日任務 1, 2。 5. 增加每日任務 3。
1 parent 875d3c0 commit d5a7c7e

File tree

10 files changed

+283
-19
lines changed

10 files changed

+283
-19
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,5 @@ coverage
2929

3030
*.tsbuildinfo
3131

32-
.vscode/
32+
.vscode/
33+
css/

‎src/assets/myStyle.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@
88
}
99
}
1010

11+
.fieldset {
12+
border: 3px dashed #3355ff;
13+
padding: 15px;
14+
15+
legend {
16+
padding: 0 5px;
17+
}
18+
}
19+
1120
.flex {
1221
display: flex;
1322
flex-wrap: wrap;

‎src/router/index.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ const router = createRouter({
4242
path: 'vbind',
4343
component: () => import('../views/samples/VBind.vue'),
4444
},
45+
{
46+
path: 'von',
47+
component: () => import('../views/samples/VOn.vue'),
48+
},
4549
]
4650
},
4751
{
@@ -57,10 +61,10 @@ const router = createRouter({
5761
path: 'day2',
5862
component: () => import('../views/day_jobs/DayJob2.vue'),
5963
},
60-
// {
61-
// path: 'day3',
62-
// component: () => import('../views/day_jobs/DayJob3.vue'),
63-
// },
64+
{
65+
path: 'day3',
66+
component: () => import('../views/day_jobs/DayJob3.vue'),
67+
},
6468
// {
6569
// path: 'day4',
6670
// component: () => import('../views/day_jobs/DayJob4.vue'),

‎src/views/day_jobs/DayJob1.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ function changeLunchPrice() {
6666
}
6767
</script>
6868

69-
<style>
69+
<style lang="scss" scoped>
7070
body {
7171
padding: 0 15px 10px;
7272
}

‎src/views/day_jobs/DayJob2.vue‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
<h2>🏅 Day2 - Vue.js 的基礎魔法：v-model</h2>
33
<p>
44
<a href="https://hackmd.io/6GU7jdDzQpuVY-vieeZxZQ" target="_blank">題目</a>｜
5-
<a href="" target="_blank">Code</a>｜
5+
<a
6+
href="https://github.com/GitHubPlayerZero/hex-vue3-practise/blob/main/src/views/day_jobs/DayJob2.vue"
7+
target="_blank"
8+
>Code</a
9+
>｜
610
<a href="https://codepen.io/codepenplayer/pen/BagpZRP" target="_blank">CodePen</a>
711
</p>
812

@@ -11,16 +15,28 @@
1115
<div id="app">
1216
<fieldset>
1317
<legend>&nbsp;Q1：v-model&nbsp;</legend>
14-
<input type="text" v-model="message" />&nbsp;&nbsp;&nbsp;{{ message }}
15-
</fieldset>
18+
19+
<div class="box">
20+
<input type="text" v-model="message" />&nbsp;&nbsp;&nbsp;{{ message }}
21+
</div>
1622

17-
<fieldset>
18-
<legend>&nbsp;Q1 延伸練習：.lazy&nbsp;</legend>
19-
<input type="text" v-model.lazy="message" />&nbsp;&nbsp;&nbsp;{{ message }}
23+
<div class="box">
24+
<p class="box-title">延伸練習：.lazy</p>
25+
<input type="text" v-model.lazy="message" />&nbsp;&nbsp;&nbsp;{{ message }}
2026

21-
<p class="footer-desc mb-0">
22-
說明：當輸入框失去焦點（游標移開），或是按 Enter 時才會觸發。
23-
</p>
27+
<p class="footer-desc mb-0">
28+
說明：當輸入框失去焦點（游標移開），或是按 Enter 時才會觸發。
29+
</p>
30+
</div>
31+
32+
<div class="box">
33+
<p class="box-title">延伸練習：.trim</p>
34+
<input type="text" v-model.trim="message" />&nbsp;&nbsp;&nbsp;{{ message }}
35+
36+
<p class="footer-desc mb-0">
37+
說明：自動刪除前後兩端的空格，不管是半形或全型空格都可以刪除。
38+
</p>
39+
</div>
2440
</fieldset>
2541

2642
<fieldset>
@@ -75,7 +91,7 @@ const checkType = () => {
7591
};
7692
</script>
7793

78-
<style lang="scss">
94+
<style lang="scss" scoped>
7995
body {
8096
padding: 0 15px 10px;
8197
}
@@ -86,7 +102,7 @@ fieldset {
86102
}
87103
88104
hr {
89-
margin: 24px 0;
105+
margin: 24px 0;
90106
}
91107
92108
.box {

‎src/views/day_jobs/DayJob3.vue‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<template>
2+
<h2>🏅Day3 - Vue.js 的基礎魔法：v-model 表單運用</h2>
3+
<p>
4+
<a href="https://hackmd.io/FKzZqZ3IT4SR_KAds4ivpw" target="_blank">題目</a>｜
5+
<a
6+
href="https://github.com/GitHubPlayerZero/hex-vue3-practise/blob/main/src/views/day_jobs/DayJob3.vue"
7+
target="_blank"
8+
>Code</a
9+
>｜
10+
<a href="https://codepen.io/codepenplayer/pen/GRbrbYd" target="_blank">CodePen</a>
11+
</p>
12+
13+
<hr />
14+
15+
<div id="app">
16+
<div class="container">
17+
<!-- Q1 -->
18+
<div class="Q1">
19+
<h2 class="mb-24">Q1</h2>
20+
21+
<form class="box mb-20">
22+
<div v-for="fruit in fruitData" :key="fruit.title" class="form-check">
23+
<input
24+
type="checkbox"
25+
:id="fruit.title"
26+
:value="fruit.title"
27+
class="form-check-input"
28+
v-model="checkedFruits"
29+
/>
30+
<label :for="fruit.title" class="form-check-label">{{ fruit.title }}</label>
31+
</div>
32+
</form>
33+
34+
<div>
35+
透過 checkbox 選擇的水果：
36+
<span class="fw-bold">
37+
{{ checkedFruits.join(', ') }}
38+
</span>
39+
</div>
40+
</div>
41+
42+
<hr class="hr mt-32 mb-32" />
43+
44+
<!-- Q2 -->
45+
<div class="Q2">
46+
<h2 class="mb-24">Q2</h2>
47+
48+
<select class="form-select mb-20" v-model="selected">
49+
<option value="" disabled>--- 請選擇 ---</option>
50+
<option v-for="fruit in fruitData" :key="fruit.title" :value="fruit.title">
51+
{{ fruit.title }}
52+
</option>
53+
</select>
54+
55+
<div>
56+
透過 select 選擇的水果：<span class="fw-bold">{{ selected }}</span>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</template>
62+
63+
<script setup>
64+
import { ref } from 'vue';
65+
66+
const checkedFruits = ref([]);
67+
const selected = ref('');
68+
69+
const fruitData = ref([
70+
{
71+
title: 'apple',
72+
price: 25,
73+
count: 50,
74+
imgUrl: 'https://i.imgur.com/w4sYWlS.jpeg',
75+
},
76+
{
77+
title: 'orange',
78+
price: 15,
79+
count: 20,
80+
imgUrl: 'https://i.imgur.com/PSmzmXi.jpeg',
81+
},
82+
{
83+
title: 'strawberry',
84+
price: 45,
85+
count: 10,
86+
imgUrl: 'https://i.imgur.com/FIMmh6h.png',
87+
},
88+
{
89+
title: 'kiwi',
90+
price: 55,
91+
count: 20,
92+
imgUrl: 'https://i.imgur.com/TIA6v4m.jpeg',
93+
},
94+
]);
95+
</script>
96+
97+
<style lang="scss" scoped>
98+
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css');
99+
100+
body {
101+
padding: 20px 15px 40px;
102+
}
103+
.container {
104+
max-width: 600px;
105+
margin-top: 50px;
106+
}
107+
.form-check {
108+
display: flex;
109+
align-items: center;
110+
}
111+
.form-check-label {
112+
margin-left: 0.5rem;
113+
}
114+
</style>

‎src/views/day_jobs/DayJobs.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<nav class="mb-24">
77
<RouterLink to="/dayjobs/day1">Day1</RouterLink> |
88
<RouterLink to="/dayjobs/day2">Day2</RouterLink> |
9-
<!-- <RouterLink to="/dayjobs/day3">Day3</RouterLink> |
10-
<RouterLink to="/dayjobs/day4">Day4</RouterLink> |
9+
<RouterLink to="/dayjobs/day3">Day3</RouterLink> |
10+
<!-- <RouterLink to="/dayjobs/day4">Day4</RouterLink> |
1111
<RouterLink to="/dayjobs/day5">Day5</RouterLink> |
1212
<RouterLink to="/dayjobs/day6">Day6</RouterLink> |
1313
<RouterLink to="/dayjobs/day7">Day7</RouterLink> |

‎src/views/samples/PracticeSamples.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<RouterLink to="/samples/addnum">開場示範 - 累加</RouterLink> |
1010
<RouterLink to="/samples/vmodel">v-model</RouterLink> |
1111
<RouterLink to="/samples/vbind">v-bind</RouterLink> |
12+
<RouterLink to="/samples/von">v-on</RouterLink> |
1213
</nav>
1314

1415
<hr style="border: 3px solid pink; box-shadow: 2px 2px 3px orchid" />

‎src/views/samples/VModel.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ const radio2 = ref('台中市');
2626
<h2>v-model 雙向綁定</h2>
2727
<p class="mb-28"><a href="https://github.com/GitHubPlayerZero/hex-vue3-practise/blob/main/src/views/samples/VModel.vue" target="_blank">Code</a></p>
2828

29+
<hr class="hr" />
30+
2931
<p>常用在表單元素上。</p>
3032

3133
<!-- 輸入框 -->

‎src/views/samples/VOn.vue‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template>
2+
<h2>v-on</h2>
3+
<p class="mb-28"><a href="https://github.com/GitHubPlayerZero/hex-vue3-practise/blob/main/src/views/samples/VOn.vue" target="_blank">Code</a></p>
4+
5+
<hr class="hr" />
6+
7+
<h3>修飾符 .prevent</h3>
8+
<h4>阻止 submit</h4>
9+
10+
<fieldset class="fieldset mb-32">
11+
<legend>正常可以 submit 的 form</legend>
12+
<form method="get" action="">
13+
<label class="d-block mb-8">
14+
姓名：&nbsp;<input type="text" name="name">
15+
</label>
16+
<input type="submit" @click="click" value="送出">
17+
</form>
18+
</fieldset>
19+
20+
<!-- JS 寫法 -->
21+
<fieldset class="fieldset mb-32">
22+
<legend>早期使用 JS 阻止 submit 的做法</legend>
23+
<form method="get" action="javascript:void(0)">
24+
<label class="d-block mb-8">
25+
姓名：&nbsp;<input type="text" name="name">
26+
</label>
27+
<input type="submit" @click="click" value="送出">
28+
</form>
29+
</fieldset>
30+
31+
<!-- v-on 修飾符 .prevent -->
32+
<fieldset class="fieldset mb-32">
33+
<legend>使用 v-on 修飾符：.prevent</legend>
34+
35+
<form class="box mb-20" method="get" action="">
36+
<p class="desc">加在 button click 事件</p>
37+
<label class="d-block mb-8">
38+
姓名：&nbsp;<input type="text" name="name">
39+
</label>
40+
<input type="submit" @click.prevent value="送出">
41+
</form>
42+
43+
<form class="box mb-20" method="get" action="">
44+
<p class="desc">阻止 click 預設事件之外，還可以指定執行新的動作。</p>
45+
<label class="d-block mb-8">
46+
姓名：&nbsp;<input type="text" name="name">
47+
</label>
48+
<input type="submit" @click.prevent="click" value="送出">
49+
</form>
50+
51+
<form class="box mb-20" method="get" action="" @submit.prevent>
52+
<p class="desc">加在 form submit 事件</p>
53+
<label class="d-block mb-8">
54+
姓名：&nbsp;<input type="text" name="name">
55+
</label>
56+
<input type="submit" @click="click" value="送出">
57+
</form>
58+
59+
<form class="box mb-20" method="get" action="" @submit.prevent="doNewSubmit">
60+
<p class="desc">阻止 submit 預設事件之外，還可以指定執行新的動作。</p>
61+
<label class="d-block mb-8">
62+
姓名：&nbsp;<input type="text" name="name">
63+
</label>
64+
<input type="submit" @click="click" value="送出">
65+
</form>
66+
67+
</fieldset>
68+
69+
70+
<!-- 阻止連結 -->
71+
<h4 class="mt-40">阻止連結</h4>
72+
73+
<fieldset class="fieldset mb-32">
74+
<legend>正常可以執行的連結</legend>
75+
<a href="">我是連結</a>
76+
</fieldset>
77+
78+
<fieldset class="fieldset mb-32">
79+
<legend>早期使用 JS 阻止連結的做法</legend>
80+
<a href="javascript:void(0)">我是連結</a>
81+
</fieldset>
82+
83+
<fieldset class="fieldset mb-32">
84+
<legend>使用 v-on 修飾符：.prevent</legend>
85+
86+
<div class="box mb-20">
87+
<p class="desc">加在 button click 事件</p>
88+
<a href="" @click.prevent>我是連結</a>
89+
</div>
90+
91+
<div class="box mb-20">
92+
<p class="desc">阻止 click 預設事件之外，還可以指定執行新的動作。</p>
93+
<a href="" @click.prevent="clickLink">我是連結</a>
94+
</div>
95+
</fieldset>
96+
97+
</template>
98+
99+
<script setup>
100+
// import { ref } from 'vue';
101+
102+
function click() {
103+
console.log(`觸發了 click`);
104+
}
105+
106+
function doNewSubmit() {
107+
console.log(`新的 submit 動作`);
108+
}
109+
110+
function clickLink() {
111+
console.log(`觸發了連結`);
112+
}
113+
114+
</script>
115+
116+
<style lang="scss" scoped>
117+
</style>

0 commit comments

Comments
 (0)