Skip to content
This repository was archived by the owner on May 25, 2024. It is now read-only.

Commit cc77047

Browse files
shiyuu33shiyuu33
authored
SFCスタイルの統一 (#180)
* fix: docs内のSFCのスタイルを統一 * fix: examples配下のSFCスタイル統一 * fix: component.md SFCスタイルへ修正
1 parent ebb0394 commit cc77047

File tree

10 files changed

+225
-225
lines changed

10 files changed

+225
-225
lines changed

‎docs/component.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
Vue.js ではテンプレート、ロジック、そしてスタイルを 1 つのファイルにまとめることで、単一ファイルコンポーネント（`Single File Components`、略称 `SFC`）として利用することができます。`SFC` は `<script setup>` 内で `import` することで、テンプレートで直接使用することが可能となります。
66

77
```vue{2,6}
8-
<template>
9-
<MyComponent />
10-
</template>
11-
128
<script setup>
139
import MyComponent from './MyComponent.vue'
1410
</script>
11+
12+
<template>
13+
<MyComponent />
14+
</template>
1515
```
1616

1717
現在は商品を表示しているだけですが、ヘッダーの情報が増えたり、フッターなどのコンテンツを足していくと `template` のコードはどんどん肥大化していきます。それだけでなく、例えば商品に複数写真を表示、個数によって表示金額の変更、といった機能を追加していくと `script` のコードも肥大化していきます。肥大化するとコードの見通しも悪くなり、メンテナンスも大変になってきます。そのような状況に陥らないために、商品をコンポーネントに変更してみましょう。
@@ -62,6 +62,16 @@ src
6262
#### Card.vue
6363

6464
```vue
65+
<script setup>
66+
/**
67+
* 価格を3桁ごとのカンマ付きで返す
68+
* @param {number} price 価格
69+
*/
70+
function pricePrefix(price) {
71+
return price.toLocaleString()
72+
}
73+
</script>
74+
6575
<template>
6676
<div class="thumbnail">
6777
<img
@@ -75,16 +85,6 @@ src
7585
</div>
7686
</template>
7787
78-
<script setup>
79-
/**
80-
* 価格を3桁ごとのカンマ付きで返す
81-
* @param {number} price 価格
82-
*/
83-
function pricePrefix(price) {
84-
return price.toLocaleString()
85-
}
86-
</script>
87-
8888
<style>
8989
.item > div.thumbnail > img {
9090
width: 100%;

‎docs/rendering.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ Vue.js では、`{{ }}` のような `Mustache` 構文を使ってテキスト
5151
:::
5252

5353
```vue
54-
<template>
55-
<div>{{ message }}</div>
56-
</template>
57-
5854
<script setup>
5955
import { ref } from 'vue'
6056
const message = ref('Welcome to Vue Handson!')
6157
</script>
58+
59+
<template>
60+
<div>{{ message }}</div>
61+
</template>
6262
```
6363

6464
```js

‎examples/component/src/App.vue

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,3 @@
1-
// region template
2-
<template>
3-
<header class="header">
4-
<img
5-
src="/images/logo.svg"
6-
alt="">
7-
<h1>Vue.js ハンズオン</h1>
8-
</header>
9-
<main class="main">
10-
<template
11-
v-for="item in items"
12-
:key="item.id">
13-
<div
14-
v-if="!item.soldOut"
15-
class="item"
16-
:class="{ 'selected-item': item.selected }"
17-
@click="item.selected = !item.selected">
18-
<Card
19-
:id="item.id"
20-
:image="item.image"
21-
:name="item.name"
22-
:description="item.description"
23-
:price="item.price"/>
24-
</div>
25-
</template>
26-
</main>
27-
</template>
28-
// endregion template
29-
301
// region script
312
<script setup>
323
import { ref } from 'vue'
@@ -78,6 +49,35 @@ const items = ref([
7849
</script>
7950
// endregion script
8051

52+
// region template
53+
<template>
54+
<header class="header">
55+
<img
56+
src="/images/logo.svg"
57+
alt="">
58+
<h1>Vue.js ハンズオン</h1>
59+
</header>
60+
<main class="main">
61+
<template
62+
v-for="item in items"
63+
:key="item.id">
64+
<div
65+
v-if="!item.soldOut"
66+
class="item"
67+
:class="{ 'selected-item': item.selected }"
68+
@click="item.selected = !item.selected">
69+
<Card
70+
:id="item.id"
71+
:image="item.image"
72+
:name="item.name"
73+
:description="item.description"
74+
:price="item.price"/>
75+
</div>
76+
</template>
77+
</main>
78+
</template>
79+
// endregion template
80+
8181
// region style
8282
<style>
8383
body {

‎examples/component/src/components/Card.vue

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
<template>
2-
<div class="thumbnail">
3-
<img
4-
:src="image"
5-
alt="">
6-
</div>
7-
<div class="description">
8-
<h2>{{ name }}</h2>
9-
<p>{{ description }}</p>
10-
<span>¥<span class="price">{{ pricePrefix(price) }}</span></span>
11-
</div>
12-
</template>
13-
141
<script setup>
152
defineProps({
163
name: {
@@ -44,6 +31,19 @@ function pricePrefix(price) {
4431
}
4532
</script>
4633

34+
<template>
35+
<div class="thumbnail">
36+
<img
37+
:src="image"
38+
alt="">
39+
</div>
40+
<div class="description">
41+
<h2>{{ name }}</h2>
42+
<p>{{ description }}</p>
43+
<span>¥<span class="price">{{ pricePrefix(price) }}</span></span>
44+
</div>
45+
</template>
46+
4747
<style>
4848
.item > div.thumbnail > img {
4949
width: 100%;

‎examples/event/src/App.vue

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,3 @@
1-
// region template
2-
<template>
3-
<header class="header">
4-
<img
5-
src="/images/logo.svg"
6-
alt="">
7-
<h1>Vue.js ハンズオン</h1>
8-
</header>
9-
<main class="main">
10-
<template
11-
v-for="item in items"
12-
:key="item.id">
13-
<div
14-
v-if="!item.soldOut"
15-
class="item"
16-
:class="{ 'selected-item': item.selected }"
17-
@click="item.selected = !item.selected">
18-
<div class="thumbnail">
19-
<img
20-
:src="item.image"
21-
alt="">
22-
</div>
23-
<div class="description">
24-
<h2>{{ item.name }}</h2>
25-
<p>{{ item.description }}</p>
26-
<span>¥<span class="price">{{ pricePrefix(item.price) }}</span></span>
27-
</div>
28-
</div>
29-
</template>
30-
</main>
31-
</template>
32-
// endregion template
33-
341
// region script
352
<script setup>
363
import { ref } from 'vue'
@@ -88,6 +55,39 @@ function pricePrefix(price) {
8855
</script>
8956
// endregion script
9057

58+
// region template
59+
<template>
60+
<header class="header">
61+
<img
62+
src="/images/logo.svg"
63+
alt="">
64+
<h1>Vue.js ハンズオン</h1>
65+
</header>
66+
<main class="main">
67+
<template
68+
v-for="item in items"
69+
:key="item.id">
70+
<div
71+
v-if="!item.soldOut"
72+
class="item"
73+
:class="{ 'selected-item': item.selected }"
74+
@click="item.selected = !item.selected">
75+
<div class="thumbnail">
76+
<img
77+
:src="item.image"
78+
alt="">
79+
</div>
80+
<div class="description">
81+
<h2>{{ item.name }}</h2>
82+
<p>{{ item.description }}</p>
83+
<span>¥<span class="price">{{ pricePrefix(item.price) }}</span></span>
84+
</div>
85+
</div>
86+
</template>
87+
</main>
88+
</template>
89+
// endregion template
90+
9191
// region style
9292
<style>
9393
body {

‎examples/methods/src/App.vue

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,3 @@
1-
// region template
2-
<template>
3-
<header class="header">
4-
<img
5-
src="/images/logo.svg"
6-
alt="">
7-
<h1>Vue.js ハンズオン</h1>
8-
</header>
9-
<main class="main">
10-
<template
11-
v-for="item in items"
12-
:key="item.id">
13-
<div
14-
v-if="!item.soldOut"
15-
class="item">
16-
<div class="thumbnail">
17-
<img
18-
:src="item.image"
19-
alt="">
20-
</div>
21-
<div class="description">
22-
<h2>{{ item.name }}</h2>
23-
<p>{{ item.description }}</p>
24-
<span>¥<span class="price">{{ pricePrefix(item.price) }}</span></span>
25-
</div>
26-
</div>
27-
</template>
28-
</main>
29-
</template>
30-
// endregion template
31-
321
// region script
332
<script setup>
343
import { ref } from 'vue'
@@ -82,6 +51,37 @@ function pricePrefix(price) {
8251
</script>
8352
// endregion script
8453

54+
// region template
55+
<template>
56+
<header class="header">
57+
<img
58+
src="/images/logo.svg"
59+
alt="">
60+
<h1>Vue.js ハンズオン</h1>
61+
</header>
62+
<main class="main">
63+
<template
64+
v-for="item in items"
65+
:key="item.id">
66+
<div
67+
v-if="!item.soldOut"
68+
class="item">
69+
<div class="thumbnail">
70+
<img
71+
:src="item.image"
72+
alt="">
73+
</div>
74+
<div class="description">
75+
<h2>{{ item.name }}</h2>
76+
<p>{{ item.description }}</p>
77+
<span>¥<span class="price">{{ pricePrefix(item.price) }}</span></span>
78+
</div>
79+
</div>
80+
</template>
81+
</main>
82+
</template>
83+
// endregion template
84+
8585
<style>
8686
body {
8787
font-family: sans-serif;

‎examples/rendering/src/App.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
// #region script
2+
<script setup>
3+
import { ref } from 'vue'
4+
const item = ref({
5+
id: 1,
6+
name: 'アボカドディップバケット',
7+
description:
8+
'刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。',
9+
price: 480,
10+
image: '/images/item1.jpg'
11+
})
12+
</script>
13+
// #endregion script
14+
115
// region template
216
<template>
317
<header class="header">
@@ -23,20 +37,6 @@
2337
</template>
2438
// endregion template
2539

26-
// #region script
27-
<script setup>
28-
import { ref } from 'vue'
29-
const item = ref({
30-
id: 1,
31-
name: 'アボカドディップバケット',
32-
description:
33-
'刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。',
34-
price: 480,
35-
image: '/images/item1.jpg'
36-
})
37-
</script>
38-
// #endregion script
39-
4040
// region style
4141
<style>
4242
body {

0 commit comments

Comments
 (0)