# ð¶ Mini Workshop 1: ãããã®æ å ±ãååŸãã Web ã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯
ãããžã§ã¯ãã®ãŽãŒã« | Vue ã¢ããªã±ãŒã·ã§ã³ã®ã»ããã¢ãããã³ã³ããŒãã³ãã®åºæ¬ãAxios ã䜿çšããç°¡å㪠REST API ã³ãŒã«ã®å®è¡ |
---|---|
ãã®ã¯ãŒã¯ã·ã§ããã§åŠã¶ããš | Vue ã¢ããªã±ãŒã·ã§ã³ã®ã»ããã¢ãããã³ã³ããŒãã³ãã®åºæ¬ãAxios ã䜿çšããç°¡å㪠REST API ã³ãŒã«ã®å®è¡ |
å¿ èŠãªããŒã« | Chrome ã®ãããªã¢ãã³ãã©ãŠã¶ã Codesandbox (opens new window) ïŒã¢ã«ãŠã³ããäœæããŠãäœæ¥ã®ããŒãžã§ã³ããã®ãŸãŸç¶æããããã«ããŠãã ããïŒ |
ãããæé | 1 æé |
ã¢ããªã±ãŒã·ã§ã³ãè©ŠããŠã¿ããã§ããïŒ | Code Sandbox link (opens new window) |
# ã€ã³ãããã¯ã·ã§ã³
# Scaffold your app - ã¢ããªã±ãŒã·ã§ã³åºç€ã®æ§ç¯
CodeSandbox (opens new window) ã§ãŒãããå§ããŸãããã ãã (opens new window) ãã¯ãªãã¯ããŠãã³ãŒããµã³ãããã¯ã¹ã¢ã«ãŠã³ããäœæããã¹ã¿ãŒã¿ãŒ Vue.js ãã³ãã¬ãŒããäœæããŸãã
ã©ã³ãã ãªç¬ã®ç»åãããŒãããŠãæ°ã«å ¥ãã«ä¿åããã¢ããªã±ãŒã·ã§ã³ãäœæããŸãã
åºæ¬ç㪠Vue.js ã¢ããªçšã« CodeSandbox ã Scaffold ããã³ãŒããèŠãŠãã ããã
ãã¡ã€ã« main.js
ã¯ããã©ã«ãã§ãªãŒãã³ããŠããŸããããã¯ãVue.js ã¢ããªã±ãŒã·ã§ã³ã®äž»èŠãªã¹ã¿ãŒããã€ã³ãã§ãã
ãã®ãã¡ã€ã«ã§ã¯ãnpm ããã±ãŒãžãã Vue ãã€ã³ããŒãããããšã«æ³šæããŠãã ãã: import vue from "vue";
Sandbox ã¯ãã¢ããªããã«ãããããã«å¿ èŠãªãã¹ãŠã®äŸåé¢ä¿ã npm ããã€ã³ããŒãããŸãã ã«ãŒãã«ãã package.json ããã€ã§ããã§ãã¯ã¢ãŠãããŠãå¿ èŠãªäŸåé¢ä¿ãèŠã€ããããšãã§ããŸãã
main.js ã¯ãã¢ããªã±ãŒã·ã§ã³ãæ°ãã Vue.js ã¢ããªã±ãŒã·ã§ã³ãšããŠåæåããã¢ããªã³ãŒããæ¿å ¥ããã div ãèšå®ããŸãã
new Vue({
render: (h) => h(App),
}).$mount('#app');
2
3
App.vue
ãéããŸãããã®ãã¡ã€ã«ã§ã¯ããhomeãã³ã³ããŒãã³ãããã«ããããŠããŸãã Vue.js ã·ã³ã°ã«ãã¡ã€ã«ã³ã³ããŒãã³ãïŒSFCïŒã® 3 ã€ã®äž»èŠéšåããã³ãã¬ãŒããã¹ã¯ãªãããããã¯ãã¹ã¿ã€ã«ãããã¯ãå«ãŸããŠããŸãã
ãã³ãã¬ãŒããããã¯ã®æåã® div ã® ID ã¯ãappãã§ããããšã«æ³šæããŠãã ãããããã¯ãã¢ããªã³ãŒããæ¿å
¥ããã div ã§ãã ããŽç»åã®äžã«å«ãŸãã <HelloWorld>
ã³ã³ããŒãã³ãããããŸãã ããã¯ã App.vue
ã«å«ãŸãã SFC ã®äŸã§ãã
components/HelloWorld.vue
ãéããšã App.vue
ã«åã蟌ãŸããŠãããªã³ã¯ã®ãªã¹ãã®ãœãŒã¹ãèŠã€ãããŸãã ãã®ãã¡ã€ã«ã«ã¯ã msg
å€æ°ãš <style>
ãããã¯å
ã®ããã€ãã®ã¹ã¿ã€ã«ãæã€ã¹ã¯ãªãããããã¯ãå«ãŸããŸãã
ãã®ãµã³ãã«ã¢ããªãå©çšããŠåäœæããŸãïŒ ããå§ããŸãããã
# Add the Styles - ã¹ã¿ã€ã«ã®å®è£
ãmain.jsãã«å€æŽãå ããå¿
èŠããªãããããApp.vueãããå§ããŸãããããã¡ã€ã«ã®äžéšã«æ¬¡ã®ã¹ã¿ã€ã«ãããã¯ãè¿œå ããçŸåšã® <style>
ãããã¯ã眮ãæããŸãã
<style>
img {
max-width: 100%;
}
h1 {
padding-bottom: 15px;
}
.dogs-layout {
width: 100%;
background: #fff center repeat;
background-image: url("https://github.com/FrontEndFoxes/projects/blob/main/petshop/images/bg3.jpg?raw=true");
}
.dogs-overlay {
width: 100%;
padding: 20px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 768px) {
.dogs-overlay {
margin: 0;
}
}
.dog-card {
width: 100%;
max-width: 600px;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ð¡ ã¹ã¿ã€ã«ãããã¯ã®äžéšãšããŠ
<scoped>
ã䜿çšããŠããªãããšã«æ³šæããŠãã ããããscopedãããŒã¯ãŒãã¯ãã¹ã¿ã€ã«ãçŸåšã® SFC ã«å¯ŸããŠã®ã¿æå¹ã§ããããšãä¿èšŒããŸãããããã§ã¯ã¹ã¿ã€ã«ãã°ããŒãã«ã«ããã€ããã§ãã
ãã®ã¹ã¿ã€ã«ãããã¯ã¯ãçžå¯Ÿãã¹ã§ã¯ãªããGithub ã§ãã¹ããããå€éšã€ã¡ãŒãžãžã®ãã¹ã䜿çšããŸããããã¯ãCodeSandbox ãç»åãç°¡åã«ãã¹ãã§ããªãããã§ããéåžžã¯ã /images/myImage.png
ãªã©ã®çžå¯Ÿãã¹ã«ç»åãè¿œå ããã ãã§ãã
ã¹ã¿ã€ã«ã·ãŒããè¿œå ããŠããæ¢åã®ã¹ã¿ã€ã«ãå€ããããšãé€ããŠããã³ãã¬ãŒãã¯ããŸãå€ãããŸããã§ããããã³ãã¬ãŒããä¿®æ£ããŸãããïŒ
âïž Pause! âïž
This is a great time to join a 'breakout room' on Zoom!
# Install Vuetify - Vuetify ã®å°å ¥
ãã³ãã¬ãŒããç·šéããåã«ãVuetify ãã€ã³ã¹ããŒã«ããŸããVuetify ã¯ãVue ã¢ããªã±ãŒã·ã§ã³ã«ãããªã¢ã«ãã¶ã€ã³ã¹ã¿ã€ãªã³ã°ãæäŸããã¯ãŒã«ãªã©ã€ãã©ãªã§ãã
ð¡ Vuetify ã¯ãVue ã®ã»ãã³ãã£ãã¯ã³ã³ããŒãã³ããã¬ãŒã ã¯ãŒã¯ã§ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®ãã¯ãªãŒã³ã§ã»ãã³ãã£ãã¯ã§åå©çšå¯èœãªã³ã³ããŒãã³ããæäŸããããšãç®çãšããŠããŸãã ãã (opens new window) ã§å®å šãªããã¥ã¡ã³ããèŠã€ããããšãã§ããŸãã
CodeSandbox ã®å·ŠåŽã® Dependency ããããããŠã³ãšãªã¢ã«ãããAdd Dependencyããã¿ã³ãã¯ãªãã¯ããŠã€ã³ã¹ããŒã«ããŸãããVuetifyããæ€çŽ¢ããŸãã
次ã«ããªã¹ãå ã®ã©ã€ãã©ãªãã¯ãªãã¯ããŠã€ã³ã¹ããŒã«ããŸãã
package.json
ãéãããdependenciesããªããžã§ã¯ãã確èªããŠãäŸåé¢ä¿ãã€ã³ã¹ããŒã«ãããŠãããã©ããã確èªããŸãã次ã®ããã«ãªã£ãŠããã¯ãã§ãã
"dependencies": {
"vue": "^2.6.10",
"vuetify": "2.0.19"
},
2
3
4
ð¡ Note: ãã®ãšããVuetify ã®ããŒãžã§ã³ã
2.0.19
ã«ãªã£ãŠããªãå Žåã¯ããŒãžã§ã³ã2.0.19
ã«åºå®ããŠãã ããã2.1.1
ãªã©ã®ããŒãžã§ã³ã ãšãåŸã®ã¹ãããã§äºææ§ã®åé¡ã«ããããŸãåäœããªãå¯èœæ§ããããŸãã
Vuetify ã¯ãã©ã°ã€ã³ã¹ãã©ã¯ãã£ãçšããŠæ©èœããŸãããããžã§ã¯ãã® /src
ãã©ã«ããŒã§ã plugins
ãšããæ°ãããã©ã«ããŒãäœæãããã®äžã« vuetify.js
ãšããæ°ãããã¡ã€ã«ãäœæããŸãã
ð¡ CodeSandbox ã§ãæ°ãããã©ã«ããŒãå³ã¯ãªãã¯ããŠæ°ãããã¡ã€ã«ãäœæããŸãããããã®æ°ããã¢ã»ããã
/src
ãã©ã«ããŒã«äœæãããã泚æããŠãã ããïŒ
æ°ãã vuetify.js
ãã¡ã€ã«ã§ã以äžã®ã³ãŒããè¿œå ããŠãã©ã°ã€ã³ãå®è¡ã§ããããã«ããŸãã
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
export default new Vuetify();
2
3
4
5
6
次ã«ã main.js
ãéã㊠2 çªç®ã® import
ïŒ3 è¡ç®ïŒã®äžã«ã以äžã®è¡ãè¿œå ã㊠Vuetify ãåæåããŸãã
import vuetify from '@/plugins/vuetify';
ãã㊠main.js
ã®äžéšã«ãã Vue ãåæåããŠããéšåãã以äžã®ããã«å€æŽããŸãã
new Vue({
vuetify,
render: (h) => h(App),
}).$mount('#app');
2
3
4
ããã«ãããVuetify ã®ããŒããšã³ã³ããŒãã³ãã Vue ã¢ããªã±ãŒã·ã§ã³å šäœã§å©çšå¯èœã«ãªããŸãã
ãã®ã¢ããªã±ãŒã·ã§ã³ã§ã¯ã¢ã€ã³ã³ã䜿çšããããã index.html
ãã¡ã€ã«ã® head
éšåã«ãããªã¢ã«ã¢ã€ã³ã³ãè¿œå ããå¿
èŠããããŸãããã®ãã¡ã€ã«ã¯ public
ãã©ã«ããŒã«ãããŸãã
<title>
ã¿ã°ã®åŸã«æ¬¡ã®è¡ãæ¿å
¥ããŸãã
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
ããŒãžã®ã¿ã€ãã«ããDog Loverãã«å€æŽããŸãããããã®ããã«ã title
ã¿ã°ã®ã³ã³ãã³ããå€æŽããŸãã
<title>Dog Lover</title>
次ã«ã App.vue
ã®çŸåšã®ãã³ãã¬ãŒãã次ã®ããŒã¯ã¢ããã§äžæžãããŸãã
<template>
<v-app>
<v-main class="dogs-layout">
<v-container fill-height>
<div class="dogs-overlay">
<h1 class="display-2 text-xs-center">Choose your favorite dogs</h1>
<v-card class="dog-card">
<v-img height="400px"></v-img>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon color="red">favorite</v-icon>
</v-btn>
<v-btn icon>
<v-icon>forward</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>
</v-container>
</v-main>
</v-app>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ã¢ããªãæŽæ°ããå¿ èŠããããŸãã ïŒæŽæ°ãããªãå Žåã¯ãã¢ããªã®ãã¬ãã¥ãŒã¢ãã¬ã¹ããŒã®æåæŽæ°ãã¿ã³ã䜿çšããŠãã ããïŒ
ã¯ã©ïŒããã¯å€§ããªå€åããããããŸããïŒ
ð¡ ãã®ãã³ãã¬ãŒãããŒã¯ã¢ããã§ã®
<v-app>
ã®äœ¿çšã«æ³šç®ããŠãã ãã â ãã㯠Vuetify ã®èŠä»¶ã§ãããVuetify ã䜿ã£ãã¢ããªã±ãŒã·ã§ã³ãäœæããŠãããšãã確å®ãªãµã€ã³ã§ãã ãŸããv-container
ãªã©ã® Vuetify ã®ã¬ã€ã¢ãŠãèŠçŽ ãšãv-card
ãv-btn
ãªã©ã® UI ã³ã³ããŒãã³ãã䜿çšããŠããŸãã
# Add some data - ããŒã¿ã®æäœ
ãã®æç¹ã§ãUI ã«ããŒã¿ãå
¥åããå¿
èŠããããŸããæåã«ãããããšã¯ã v-card
å
ã«ç¬ã®ç»åã衚瀺ããããšã§ããèŠãç®ãæ€èšŒããç®çã§éçãªã³ã¯ãè¿œå ããŸãããã App.vue
ã®ãã³ãã¬ãŒãã§ã v-img
ã® src
ããããã£ãå€æŽããŸãã
<v-img height="400px" src="https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"></v-img>
ãããããïŒð¶
ããããèããŠããããšã¯ãã®ãªã³ã¯ãåçã«ããããšãªã®ã§ãæåã® Vue å€æ°ãäœæããŸãããŸãã data()
ã Vue ã³ã³ããŒãã³ãã«è¿œå ããå¿
èŠããããŸãã
ãã®é¢æ°ã¯ãVue å€æ°ã®ãªããžã§ã¯ããè¿ãå¿
èŠããããŸãã <script>
ãããã¯ã§äœæããŸãããã App.vue
ã®çŸåšã® <script>
ãããã¯ãäžæžãããŸãã
<script>
export default {
data() {
return {
currentDogLink: ""
};
}
};
</script>
2
3
4
5
6
7
8
9
ð¡ ãã®æç¹ã§ã
components
ãã©ã«ããŒããHelloWorld.vue
ãã¡ã€ã«ãåé€ããããšãã§ããŸããCodeSandbox ã§ãã¡ã€ã«ãå³ã¯ãªãã¯ãããDeleteããã¯ãªãã¯ããŸãã
ããã§ã currentDogLink
ãšããå€æ°ããããããã©ã«ãå€ã¯ç©ºã®æååã§ãããã®å€æ°ã䜿çšããŠã v-img
ã®çŸåšã®ç¬ãžã®ãªã³ã¯ãæäŸããŸãã
data() {
return {
currentDogLink: "https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"
};
}
2
3
4
5
ããã§ããã³ãã¬ãŒããå€æŽã㊠src
ããããã£ã åç ã«ããäžèšã§èšå®ããå€æ°ã®å€ã䜿çšã§ããããã«ããå¿
èŠããããŸãã
ãããè¡ãã«ã¯ã v-bind
ãã£ã¬ã¯ãã£ããŸãã¯ãã®ã·ã§ãŒãã«ãã :
ãå¿
èŠã§ããåã³ App.vue
ã§ã <v-img>
ã¿ã°ãç·šéããŠãããŒãã³ãŒãã£ã³ã°ãããå€ãåé€ããŸãã
<v-img height="400px" :src="currentDogLink"></v-img>
ð¡
v-bind
ãã£ã¬ã¯ãã£ãã¯ã1 ã€ä»¥äžã®å±æ§ããŸãã¯ã³ã³ããŒãã³ãã®ããããã£ïŒpropsïŒãåŒã«åçã«ãã€ã³ãããŸãããã®å°ããª:
ããã¹ãŠã®éããçã¿ãŸãïŒ
ã°ã¬ãŒãïŒä»åºŠã¯ API ããããã€ãã®ç¬ãããŒãããŸãïŒ
âïž Pause! âïž
This is a great time to join a 'breakout room' on Zoom!
# Add Axios - Axios ã®å°å ¥
API åŒã³åºããå®è¡ããã«ã¯ãAxios (opens new window) ãšããã©ã€ãã©ãªãå¿ èŠã§ããããã¯ããã©ãŠã¶ãšä»ã® Node.js ç°å¢ã®äž¡æ¹ã§æ©èœãããããã¹ããŒã¹ã® HTTP ã¯ã©ã€ã¢ã³ãã§ãã
ð¡ ããšããšãVue 㯠.ajax ã䜿çšã㊠API åŒã³åºããè¡ãç¬èªã®æ¹æ³ããµããŒãããŠããŸãããããããAxios ã®ã¹ã¿ã³ãã¢ãã³ã©ã€ãã©ãªããã®ç®çã«éåžžã«ããŸãæ©èœããçµ±åãœãªã¥ãŒã·ã§ã³ã®å¿ èŠæ§ããªããªã£ãããããã®ãªãœãŒã¹ã¯å»æ¢ãããŸããããã®æ±ºå®ã®è©³çŽ°ã«ã€ããŠã¯ãã¡ã (opens new window)ãã芧ãã ããã
ãŸããAxios ã®ã©ã€ãã©ãªããããžã§ã¯ãã®äŸåé¢ä¿ã«è¿œå ããŸããCodeSandbox ã§ãããè¡ãã«ã¯ããAdd Dependencyããã¿ã³ãã¯ãªãã¯ããŠãaxiosããæ€çŽ¢ããŸããææ°ããŒãžã§ã³ãã€ã³ã¹ããŒã«ããŸãã
API åŒã³åºããå®è¡ããã³ã³ããŒãã³ã App.vue
ã« Axios ãã€ã³ããŒãããŸãããã®ã³ã³ããŒãã³ãã®ã¹ã¯ãªãããããã¯ã§ã <script>
ã®ããäžã«æ¬¡ã®è¡ãè¿œå ããŸãã
import axios from 'axios';
ãã®æç¹ã§ã App.vue
ã®ã¹ã¯ãªããéšåã¯æ¬¡ã®ããã«ãªããŸãã
<script>
import axios from "axios";
export default {
data() {
return {
currentDogLink:
"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"
};
}
};
</script>
2
3
4
5
6
7
8
9
10
11
ããã§ãAPI ããç»åãããŒãããæºåãæŽããŸããã
# Call the API - API ã³ãŒã«ã®å®è£
æåã® API åŒã³åºããå®è¡ããŸãããããã®ããã«ãã³ã³ããŒãã³ãå
ã« loadNewDog
ã¡ãœãã ãäœæããŸãã
ð¡
methods
ããããã£ã¯ããªããžã§ã¯ãïŒé垞㯠Vue ã€ã³ã¹ã¿ã³ã¹èªäœãŸã㯠Vue ã³ã³ããŒãã³ãïŒã«çããŠããé¢æ°ã®ãªã¹ãã§ãã
data
é¢æ°ã®çŽåŸã«è¿œå ããŸãããã
data() {
return {
currentDogLink:
"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"
};
},
methods: {
loadNewDog() {}
}
2
3
4
5
6
7
8
9
ä»ã®ãšããããã®ã¡ãœããã¯äœãããŸãããã API ããæ°ããç¬ãããŒãããå¿
èŠããããŸãããŸãã䜿çšãããšã³ããã€ã³ãã確èªããå¿
èŠããããŸãã
API ã®ããã¥ã¡ã³ã (opens new window)ãèŠããšããšã³ããã€ã³ããšã㊠https://dog.ceo/api/breeds/image/random
ã䜿ãããšãåãããŸããããã¯ã©ã³ãã ãªç¬ã®ç»åãæäŸããŸãã
GET ãªã¯ãšã¹ããå®è¡ããã«ã¯ãAxios 㯠axios.get
ã¡ãœããã䜿çšããŸããçµæ㯠JavaScript ã®ãããã¹ãšãªããããæåãšå€±æã®ã³ãŒã«ããã¯ãæäŸããŠãã®ã©ã€ããµã€ã¯ã«ã管çããŸãã
ããã§ã¯ãã¯ãšãªçµæãã³ã³ãœãŒã«ã«åºåããã ãã§ããåŒãç¶ã App.vue
ã§ãäžæ¬åŒ§ã®éã«ä»¥äžã®ã¹ããããã眮ã㊠loadNewDog() {}
ã¡ãœãããç·šéããŸãã
axios
.get('https://dog.ceo/api/breeds/image/random')
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
2
3
4
5
6
7
8
ã³ã³ããŒãã³ãã®äœææã«æ°ããã€ã¡ãŒãžã§å€ãã€ã¡ãŒãžã眮ãæããå¿
èŠãããããã methods
ã®çŽåŸã« created()
ããã¯ãè¿œå ããŸãããã
created() {}
ð¡ Note: ã¡ãœãããªããžã§ã¯ãã®åŸã«ã«ã³ããè¿œå ããŠããã
created()
ããã¯ãè¿œå ããŠãã ããïŒ
ð¡ ãããã¢ããªã®æåã®ã©ã€ããµã€ã¯ã«ããã¯ã§ãïŒãããã¯ãã³ãŒãã®ãããã¯ããã€å®è¡ãããã现ããå¶åŸ¡ããå Žåã«éåžžã«äŸ¿å©ã§ãã詳现ã¯ãã¡ã (opens new window)
äœæãããããã¯å ã§ãã¡ãœãããåŒã³åºããŸãã
created() {
this.loadNewDog();
}
2
3
ãã©ãŠã¶ãŠã£ã³ããŠã®æŽæ°ãã¿ã³ãã¯ãªãã¯ãããšãã³ã³ãœãŒã«ã«ãªããžã§ã¯ãã衚瀺ãããŸããã³ã³ãœãŒã«ã«è¡šç€ºãããŠãããªããžã§ã¯ãã®å·Šç¢å°ãã¯ãªãã¯ããŠå±éããŸãã
data
ãã£ãŒã«ãã«é¢å¿ããããŸããã¹ããŒã¿ã¹ã success
ã§ãç»åã® URL ãå«ãã¡ãã»ãŒãžãããããšãããããŸãã
âïž Pause! âïž
This is a great time to join a 'breakout room' on Zoom!
# Use the API - API ããŒã¿ã®å©çš
currentDogLink
ãããŒãããããã®ã«çœ®ãæããŸãããããã®ãšãã«ãéçãªå€ãåé€ã§ããŸãã
data() {
return {
currentDogLink: ""
};
},
2
3
4
5
loadNewDog
ã¡ãœããå
ã§ãresponse.data.message
ïŒå®éã«ã¯ç»å URLïŒããã³ã³ãœãŒã«ã«çµæãåºåããã®ã§ã¯ãªã currentDogLink
ããããã£ã«å²ãåœãŠãŸãã
loadNewDog() {
axios
.get("https://dog.ceo/api/breeds/image/random")
.then(response => {
this.currentDogLink = response.data.message;
})
.catch(error => {
console.log(error);
});
}
2
3
4
5
6
7
8
9
10
ããã§ãããŒãžãæŽæ°ãããã³ã«ããã«ãã«ã®æ°ããç¬ç»åã衚瀺ãããŸãïŒ ð
ð¡ Note: Vuetify ã®ããŒãžã§ã³ã
2.0.19
ã«ãªã£ãŠããªããšããŸãæŽæ°ãããªãå ŽåããããŸããæŽæ°ãããŸããããªã人ã¯ãVuetify ã®ããŒãžã§ã³ã確èªããŠã¿ãŠãã ããã
ãŸããã次ãžãã®ç¢å°ãã¯ãªãã¯ããããšãã«åãã¡ãœãããåŒã³åºãããã§ãããã®ãã¿ã³ã«ã¯ãªãã¯ãã³ãã©ãŒãè¿œå ããŸãããã v-on
ãã£ã¬ã¯ãã£ããŸãã¯ãã®ã·ã§ãŒãã«ãã @
ã䜿çšã§ããŸãããã³ãã¬ãŒãã§ã forward
ã¢ã€ã³ã³ã® v-btn
ãç·šéããŸãã
<v-btn icon @click="loadNewDog">
<v-icon>forward</v-icon>
</v-btn>
2
3
ã次ãžããã¿ã³ãã¯ãªãã¯ããã ãã§ãæ°ããç»åãããŒãã§ããããã«ãªããŸããã
# Build the Favorites - ãæ°ã«å ¥ãæ©èœã®æ§ç¯
ãŠãŒã¶ãŒããæ°ã«å
¥ãã®ããŒãœãã«ãªã¹ãã«ç¬ã®ç»åãè¿œå ããçŸåšã®ç¬ã®ãã¥ãŒã®ããäžã«ãããã®ç»åã®ã®ã£ã©ãªãŒã衚瀺ã§ããããã«ããŸãããªã³ã¯ãä¿åããã«ã¯ããã 1 ã€ã®ããŒã¿ãããã㣠favoriteDogs
ãšããé
åãå¿
èŠã§ãã
currentDogLink
ã®çŽåŸã«è¿œå ããããã©ã«ãã§ç©ºã«ããŠãããŸãã
data() {
return {
currentDogLink: "",
favoriteDogs: []
};
},
2
3
4
5
6
ãæ°ã«å
¥ãã®ç¬ã衚瀺ããã«ã¯ããã³ãã¬ãŒããå€æŽããå¿
èŠããããŸãã</ v-card>
çµäºã¿ã°ã®çŽåŸã«æ¬¡ã®ã³ãŒãã¹ãããããè¿œå ããŸãããã
<v-container grid-list-md fluid>
<v-layout wrap>
<v-flex xs6 sm4 md2>
<v-card class="dog-card">
<v-img height="150px"></v-img>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>delete</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
çŸåšã®ç¬ã®ãã¥ãŒã®çŽåŸã«ãåé€ããã¿ã³ã眮ããŠãã空ã®ã«ãŒããçŸããŸãã次ã«ããããã®ã«ãŒãå
ã« favoriteDogs
ã¢ã€ãã ã衚瀺ããæ¹æ³ãèããŠã¿ãŸããããïŒãããä»ã¯ç©ºãªã®ã§ãããããã«ã¯ããããã®ç¬ãå
¥ããŸãïŒïŒ
é
åã«åºã¥ããŠã¢ã€ãã ã®ãªã¹ããã¬ã³ããªã³ã°ããã«ã¯ãVue ã® v-for
ãã£ã¬ã¯ãã£ãã䜿ããŸããããã§ã¯ã favoriteDogs
ã®é
åãå埩åŠçããåã¢ã€ãã ãã¬ã³ããªã³ã°ããŸãã
ãã®ãã£ã¬ã¯ãã£ããã v-flex
ã®éå§èŠçŽ ã«è¿œå ããŸããããã³ã³ããå
ã«è¿œå ããæ°ãããæ°ã«å
¥ãã®ã«ãŒãã®é
åã衚瀺ããŸãã
<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet"></v-flex>
ããã§ãpet
㯠çŸåšã®é
åèŠçŽ ãžã®åç
§ã§ãããindex
ã¯é
åå
ã® ãã®èŠçŽ ã®ã€ã³ããã¯ã¹ ã§ãã
ð¡ ãã£ã¬ã¯ãã£ãå ã§ãã®ååãéžãã ããšãå¿ããªãã§ãã ããã
v-for="(dog, number) in favoriteDogs"
ãšèšè¿°ããå Žåãåã¢ã€ãã ã¯dog
ãšåŒã°ãããã®ã€ã³ããã¯ã¹ã¯number
ãšåŒã°ããŸãã
ãæ°ã«å
¥ãã®ç¬ã®é
åãé©åã«ã«ãŒãããŠå¥ã®ç¬ãè¿œå ããã«ã¯ãåã¢ã€ãã ã«äžæã®ããŒå±æ§ãæå®ããå¿
èŠããããŸãããã®å Žåã pet
èªäœãããŒã«ãªããŸãã
空ã®ã«ãŒããæ¶ããŸãããã倧äžå€«ã§ããïŒ favoriteDogs
é
åã空ãªã®ã§ãçŸåšã¬ã³ããªã³ã°ãããã®ã¯äœããããŸããã
ããšã¯ã v-img
ã³ã³ããŒãã³ãã® src
ããããã£ã« pet
ïŒç»åãªã³ã¯ã«ãªããŸãïŒããã€ã³ãããŸãã
<v-img height="150px" :src="pet"></v-img>
ã¡ãã£ãšäžæ¯ããç¬ã®éè³ã¿ã€ã ã§ã ðð¶ïŒ
âïž Pause! âïž
This is a great time to join a 'breakout room' on Zoom!
# Adding dogs to Favorites - ãæ°ã«å ¥ãè¿œå æ©èœã®å®è£
addToFavorites
ãšããæ°ããã¡ãœãããäœæããŸããããã¯ã currentDogLink
ã®å€ã favoriteDogs
é
åã«è¿œå ããŸãã
ïŒJavaScript ã«ã¯ãããããçšéã«äœ¿ã push
é
åã¡ãœããããããŸãïŒ
loadNewDog
ã®åŸã«ã ïŒã«ã³ãããèŠéããªãïŒïŒ
addToFavorites() {
this.favoriteDogs.push(this.currentDogLink);
}
2
3
ãããŠãã¡ãããäžçªäžã®ã«ãŒãã®ããæ°ã«å ¥ãããã¿ã³ã«ãã€ã³ãããå¿ èŠããããŸãã
<v-btn icon @click="addToFavorites">
<v-icon color="red">favorite</v-icon>
</v-btn>
2
3
ããæ°ã«å ¥ãããã¿ã³ãã¯ãªãã¯ããŠã¿ãŠãã ããïŒã®ã£ã©ãªãŒãç¬ã®ç»åã§ã©ã®ããã«æºããããŠããããèŠãããšãã§ããŸã ðŒïž
1 ã€åé¡ããããŸãã1 ã€ã®ç»åãæ°åè¿œå ã§ããããã«ãªã£ãŠããŸãããããé²ãããã«ã currentDogLink
ãæ¢ã« favoriteDogs
é
åå
ã«ãããã©ããã確èªããããæ°ã«å
¥ãããã¿ã³ãç¡å¹åããŸãããã®è€éãªããžãã¯ããã³ãã¬ãŒãå
ã«é
眮ãã代ããã«ãcomputed ããããã£ãäœæããŸãã
created()
ããã¯ã®çŽåŸã« computed
ãè¿œå ããŠïŒ created()
ãéããåŸã®ã«ã³ããå¿ããªãã§ãã ããïŒããã®äžã« isAlreadyInFavorites
ãšããååã®ããããã£ãäœæããŸãããã
computed: {
isAlreadyInFavorites() {}
}
2
3
èšç®ãããããããã£ã¯ãèšç®çµæãè¿ãé¢æ°ã§ãªããã°ãªããŸããã favoriteDogs
é
åå
ã® currentDogLink
ã®ã€ã³ããã¯ã¹ã確èªããŸãããã-1 ãã倧ããå ŽåïŒã€ãŸããé
åã«ãã®ãããªèŠçŽ ãå«ãŸããå ŽåïŒãé¢æ°ã¯ true
ãè¿ããŸããããã§ãªãå Žåãfalse
ãè¿ããŸãã
computed: {
isAlreadyInFavorites() {
return this.favoriteDogs.indexOf(this.currentDogLink) > -1;
}
}
2
3
4
5
ãããŠããããã«ãŒãã®ããæ°ã«å
¥ãããã¿ã³ã«åç㪠disabled
å±æ§ãè¿œå ãã isAlreadyInFavorites
ãèšå®ã§ããŸãã
<v-btn icon @click="addToFavorites" :disabled="isAlreadyInFavorites">
<v-icon color="red">favorite</v-icon>
</v-btn>
2
3
ãæ°ã«å ¥ãã«ç¬ãè¿œå ããŠã¿ãŠãã ãããããã§ãããæ°ã«å ¥ããã¢ã€ã³ã³ãã°ã¬ãŒè¡šç€ºãããå床ã¯ãªãã¯ã§ããªãããšãããããŸãã
# Removing dogs from Favorites - ãæ°ã«å ¥ãåé€æ©èœã®å®è£
ãšããã§ãç¬ã®ç»åã® 1 ã€ãæ°ã«å
¥ããªããªã£ããã©ãããŸããïŒãã®ãŸããªã€ãã³ãã§ã¯ã favoriteDogs
é
åãããããåé€ããå¿
èŠããããŸããããã«ã¯ãã 1 ã€ã®ã¡ãœãããå¿
èŠãªã®ã§ã addToFavorites
ã®åŸã«è¿œå ããŸãã
ïŒ addToFavorites
ã®éãæ¬åŒ§ã®åŸã«ã«ã³ããè¿œå ããŸãïŒ
removeFromFavorites() {}
ãã¡ãããé
åããåé€ããç¬ããªããšãããŠæå®ããå¿
èŠããããŸãã幞ããªããšã«ã index
ãã©ã¡ãŒã¿ãŒããããŸãããããã¡ãœããã«æž¡ããæå®ãããã€ã³ããã¯ã¹ãæã€èŠçŽ ã favoriteDogs
é
åããåé€ããŸãããã
removeFromFavorites(index) {
this.favoriteDogs.splice(index, 1);
}
2
3
ð¡ ãã®
splice()
ã¡ãœããã¯ãæ¢åã®èŠçŽ ãåé€ããŠé åã®å 容ãå€æŽããŸããæåã®åŒæ°ã¯éå§ããèŠçŽ ã®ã€ã³ããã¯ã¹ã§ã2 çªç®ã®åŒæ°ã¯åé€ããèŠçŽ ã®æ°ã§ãã
次ã«ããã®æ°ããã¡ãœãããã¯ãªãã¯ãã³ãã©ãŒã§ãåé€ããã¿ã³ã«ãã€ã³ãããå¿ èŠããããŸãã
<v-btn icon @click="removeFromFavorites(index)">
<v-icon>delete</v-icon>
</v-btn>
2
3
ð¡
removeFromFavorites
ã¡ãœããã«index
ãæž¡ãããšãå¿ããªãã§ãã ããïŒãã©ã¡ãŒã¿ãæž¡ããªãå Žåã¯ãaddToFavorites
ã¡ãœããã§è¡ã£ãããã«äžžæ¬åŒ§ãã¹ãããã§ããŸãã
ãæ°ã«å ¥ãããããã€ãã®ç¬ãè¿œå ããã³åé€ããŠã¿ãŠãã ãããåããŸãïŒ
ð ããã§ãšãããããŸããããŒã¹ãããžã§ã¯ããçµäºããŸããïŒð
# Supplement 1: Creating a Dog Component - Dog ã³ã³ããŒãã³ãã®äœæ
ããã§ã¯ããæ°ã«å ¥ãã°ãªããããåäžã®ç¬ã®ã«ãŒããæœè±¡åããŠã芪ã³ã³ããŒãã³ããšåã³ã³ããŒãã³ããã©ã®ããã«éä¿¡ããããåŠç¿ããŸãã
components
ãã©ã«ãããããŸãããä»ã®ãšããã¯ç©ºã§ããããã§æ°ãããã¡ã€ã«ãäœæãã Dog.vue
ãšããååãä»ããŸãããã
ãã®ãã¡ã€ã«ãéãã <template></ template>
ããã³ <script></ script>
ã¿ã°ãè¿œå ããŸãããã¡ã€ã«ã¯ãã®ããã«ãªããŸãã
<template></template>
<script></script>
2
3
ããã§ããæ°ã«å
¥ãã®ç¬ãå«ã v-card
ã³ã³ããŒãã³ãå
šäœïŒcss ã¯ã©ã¹ã dog-card
ïŒã App.vue
ããã³ããŒãããã³ãã¬ãŒãã¿ã°å
ã«è²Œãä»ããŸããã³ããããã App.vue
ããåé€ã§ããŸãã
ããã§ã衚瀺ããç¬ã®ç»åã芪ã³ã³ããŒãã³ãããåã³ã³ããŒãã³ãã«æž¡ãå¿
èŠããããŸãããã®ããã«ãVue 㯠props
ã䜿çšããŸãã
ð¡ props ã¯ãã³ã³ããŒãã³ãã«ç»é²ã§ããã«ã¹ã¿ã å±æ§ã§ããå€ã prop å±æ§ã«æž¡ããããšããã®ã³ã³ããŒãã³ãã€ã³ã¹ã¿ã³ã¹ã® ãããã㣠ã«ãªããŸãããã®å Žåã
Dog
ã³ã³ããŒãã³ãã«ã¯ããã®èŠªã®App
ã³ã³ããŒãã³ãããæž¡ãããdog
ããããã£ããããŸãã
Dog.vue
ã³ã³ããŒãã³ãã« props
ãªãã·ã§ã³ãè¿œå ããŸããããæåã«ã script
ã¿ã°å
ã« export ã¹ããŒãã¡ã³ããäœæããå¿
èŠããããŸãã
ïŒåŸã§ã Dog
ã³ã³ããŒãã³ãã App
ã³ã³ããŒãã³ãå
ã«ã€ã³ããŒãã§ããããã«ãªããŸãïŒ
ãã®ã³ãŒããããã¯ã Dog.vue
ã«è¿œå ããŸãã
<script>export default {}</script>
ããã§ããã®ãªããžã§ã¯ãã« props
ãªãã·ã§ã³ãš dog
prop ãè¿œå ã§ããŸãã
<script>
export default {
props: {
dog: {
type: String
}
}
};
</script>
2
3
4
5
6
7
8
9
ããã§ã¯ãç¬ã®ã¿ã€ããæå®ããŠããŸããããã¯ãç¬ã®ç»å URL ãå«ãæååã§ãã
Dog.vue
ã®ãã³ãã¬ãŒãã§ã¯ã pet
ã dog
ã«çœ®ãæããå¿
èŠããããŸããããã¯ã Dog
ã³ã³ããŒãã³ãå
ã« pet
ããªãã dog
ããããã£ã®ã¿ãæž¡ãããããã§ãããã³ãã¬ãŒãã¯æ¬¡ã®ããã«ãªããŸãã
<template>
<v-card class="dog-card">
<v-img height="150px" :src="dog"></v-img>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon @click="removeFromFavorites(index)">
<v-icon>delete</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</template>
2
3
4
5
6
7
8
9
10
11
ããã§ã¯ã App.vue
ã³ã³ããŒãã³ãã«æ»ã£ãŠãããã€ãå€æŽãå ããŸãããããŸãæåã«ãæ°ããäœæãã Dog
ã³ã³ããŒãã³ãã App.vue
ã«ã€ã³ããŒãããå¿
èŠããããŸãã
import Dog from './components/Dog';
次ã«ãå
éšã«åã³ã³ããŒãã³ããããããšã App
ã³ã³ããŒãã³ãã«ã説æãããå¿
èŠããããŸããVue ã¯ããã« components
ãªãã·ã§ã³ã䜿çšããŸãã components
ãªãã·ã§ã³ã data()
ã®äžã«è¿œå ããŸãããã
export default {
components: {
appDog: Dog
},
data() {
return {
currentDogLink: "",
favoriteDogs: []
};
},
2
3
4
5
6
7
8
9
10
ð¡ ã³ã³ããŒãã³ããªããžã§ã¯ãã®åããããã£ã®ããŒã¯ã«ã¹ã¿ã èŠçŽ ã®ååã«ãªããå€ã«ã¯ã³ã³ããŒãã³ãã®ãªãã·ã§ã³ãªããžã§ã¯ããå«ãŸããŸãã
ð¡ ã³ã³ããŒãã³ãåã«ã¯ããã£ã¡ã«ã±ãŒã¹ïŒ
appDog
ïŒãŸãã¯ã±ããã±ãŒã¹ïŒapp-dog
ïŒã䜿çšã§ããŸãããã£ã¡ã«ã±ãŒã¹åã¯ãHTML ã¿ã°åã§ã±ããã±ãŒã¹ã«ãå€æããããããšã«æ³šæããŠãã ããããã®ããã«ããŠãHTML ã«ã¹ã¿ã ã¿ã°<app-dog>
ã䜿çšããDog
ã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããŸãã
App.vue
ã§ãå
ã»ã©ã«ãŒããåé€ããã¹ããŒã¹ã«ã«ã¹ã¿ã ã¿ã°ãé
眮ãã<v-flex>
ã¿ã°ãäžæžãããŸãã
<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet">
<app-dog></app-dog>
</v-flex>
2
3
dog
ããããã£ã Dog
ã³ã³ããŒãã³ãã«æž¡ãå¿
èŠããããŸããããªãã¿ã® v-bind
ãã£ã¬ã¯ãã£ãã§è¡ããŸããïŒ :
ã·ã§ãŒãã«ããã䜿çšã§ããããšãæãåºããŠãã ããïŒ App.vue
ã«è¿œå ããã³ãŒããç·šéããŸãã
<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet">
<app-dog :dog="pet" @remove="removeFromFavorites(index)"></app-dog>
</v-flex>
2
3
ããã§ããæ°ã«å
¥ãã«ç¬ãè¿œå ããããšãããšãã°ãªããã«ç¬ãåã³è¡šç€ºãããŸãïŒãã ãã1 ã€ã®åé¡ããããŸããç¬ãåé€ãããšãã³ã³ãœãŒã«ã§å€§éã®ãšã©ãŒãçºçããŸãããã®çç±ã¯ã Dog.vue
å
ã« removeFromFavorites
ã¡ãœããããªãã index
ã«ã€ããŠãäœãç¥ããªãããã§ãã
ã¡ãœããã䜿çšãã代ããã«ã Dog
ã³ã³ããŒãã³ãå
ã®ãåé€ããã¿ã³ã ã€ãã³ããšããã¿ãŒ ã«çœ®ãæããŸãã
<v-btn icon @click="$emit('remove')"></v-btn>
$emit
ã䜿çšããŠã Dog.vue
ã¯èŠªã³ã³ããŒãã³ãïŒãã®å Žå㯠App.vue
ïŒã«ãããªé¢šã«ã¡ãã»ãŒãžãéä¿¡ããŠããŸãã
Dog.vue
> ãããã«ã¡ã¯ãããã§äœããèµ·ãã£ãŠããŸãïŒãã®ã¡ãã»ãŒãžãèªãã§åå¿ããŠãã ããã
ããã§ã Dog
ã³ã³ããŒãã³ãã remove
ã€ãã³ããçºè¡ãããšïŒã€ãŸãããåé€ããã¿ã³ã®ã¯ãªãã¯ã§ïŒããã®èŠªã® App
ã³ã³ããŒãã³ã㯠removeFromFavorites
ã¡ãœãããåŒã³åºããŸãã
ïŒããã«ãããç¹å®ã®ç¬ããæ°ã«å
¥ãã®é
åããåé€ãããŸãïŒ
ðSupplement 1 ãå®äºããŸããïŒð
# Supplement 2: Add animations - ã¢ãã¡ãŒã·ã§ã³ã®å®è£
ããã§ã¯ãã¢ãã¡ãŒã·ã§ã³å¹æãè¿œå ããŠãã¢ããªã±ãŒã·ã§ã³ãããé åçã«ããŸãããã
ð¡ Vue ã¯ã
transition
ã©ãããŒã³ã³ããŒãã³ããæäŸããŸããããã«ããã次ã®ã³ã³ããã¹ãã§ä»»æã®èŠçŽ ãŸãã¯ã³ã³ããŒãã³ãã®éå§ / çµäºãã©ã³ãžã·ã§ã³ãè¿œå ã§ããŸãã
- æ¡ä»¶ä»ãã¬ã³ããªã³ã°ïŒ
v-if
ã䜿çšïŒ- æ¡ä»¶ä»ã衚瀺ïŒ
v-show
ã䜿çšïŒ- åçã³ã³ããŒãã³ã
- ã³ã³ããŒãã³ãã«ãŒãããŒã
çŸåšã®ç¬ã®ç»åãã¢ãã¡ãŒã·ã§ã³åããŠã¿ãŸããããæåã«ãå°æ¥ã®ç§»è¡ã«é©åãªã³ã³ããã¹ããæäŸããããã«ã v-if
ãã£ã¬ã¯ãã£ããè¿œå ããå¿
èŠããããŸãã App.vue
ã§ãã¡ã€ã³ã®ç¬ã®ã«ãŒããç·šéããŸãã
<v-img v-if="currentDogLink" height="400px" :src="currentDogLink"></v-img>
ãããä»ã®ç¶æ
ã§ã¯ã currentDogLink
ã¯åžžã« true
ãè¿ããŸãïŒã次ãžããã¿ã³ãã¯ãªãã¯ãããã³ã«ç©ºã®æååã«èšå®ããŠã次ã®ç»åãããŒããããåã« currentDogLink
ã false
ãè¿ãããã«ããŸãã
loadNewDog() {
this.currentDogLink = "";
axios
.get("https://dog.ceo/api/breeds/image/random")
.then(response => {
this.currentDogLink = response.data.message;
})
.catch(error => {
console.log(error);
});
},
2
3
4
5
6
7
8
9
10
11
ããã§ããã®åŸ®åŠãªãšãã§ã¯ãã確èªã§ããŸãããŠãŒã¶ãŒãã次ãžããã¯ãªãã¯ãããã³ã«ç»åãæ¶ããŸãããããããã§ãŒãã¢ãã¡ãŒã·ã§ã³å¹æã§ä¿®æ£ããŸãã <transition>
ã¿ã°ã§ v-img
ãã©ããããname å±æ§ã« fade
ãæäŸããŸãããã
<transition name="fade">
<v-img v-if="currentDogLink" height="400px" :src="currentDogLink"></v-img>
</transition>
2
3
ããã«ããã fade-
ããå§ãŸãå€ãã® CSS ã¯ã©ã¹ãåŸãããŸãã
æåã®ãã¬ãŒã ã§ã¢ãã¡ãŒã·ã§ã³ãå§ãŸãäœçœ®ã§ãã enter
/ leave
ãã¢ãã¡ãŒã·ã§ã³ã®å®è¡äžã« enter-active
/ leave-active
ããããããã¯ãã¢ãã¡ãŒã·ã§ã³ããããã£èªäœãé
眮ãããã®ã§ãã enter-to
/ leave-to
ã¯ãèŠçŽ ãæåŸã®ãã¬ãŒã ã®ã©ãã«ããã¹ãããæå®ããŸãã
ããã¯ãã§ããã®ã§ããããã䜿çšããŠãã©ã³ãžã·ã§ã³ãäœæã§ããŸãã次ã®ã¯ã©ã¹ãè¿œå ããŠã App.vue
ã® CSS ãç·šéããŸãã
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
2
3
4
5
6
7
8
.fade-enter-active
ããã³ .fade-leave-active
ã¯ã©ã¹ã¯ãå®éã®ãã©ã³ãžã·ã§ã³ãé©çšããå Žæã§ãããã㯠Vue åºæã®ãã®ã§ã¯ãªããéåžžã® CSS ã§ãã ease
ããããã£ã¯ããã£ãããšéå§ãã次ã«éãããããŠãã£ãããšçµäºãããã©ã³ãžã·ã§ã³å¹æãæå®ããŸãã
ã次ãžããã¯ãªãã¯ãããšãç¬ã®åçã«çŽ æŽããããã§ãŒãå¹æãããããšãããããŸãã
ãŸãããæ°ã«å
¥ãã®ç¬ã®ã°ãªããã«ããã€ãã®ãšãã§ã¯ããè¿œå ããŸãããã v-for
ã§ã¬ã³ããªã³ã°ããããªã¹ããã¢ãã¡ãŒã·ã§ã³åããããã«ãVue 㯠transition-group
ã¿ã°ã䜿çšããŸãã
ð¡
<transition>
ãšã¯ç°ãªããtransition-group
ã¯å®éã®èŠçŽ ïŒããã©ã«ãã§ã¯<span>
ïŒãã¬ã³ããªã³ã°ããŸããã¿ã°å±æ§ã§ã¬ã³ããªã³ã°ãããèŠçŽ ãå€æŽã§ããŸããå éšã®èŠçŽ ã¯ãåžžã«äžæã®ããŒå±æ§ãæã€å¿ èŠããããŸãã
App.vue
ã§ããã¹ããããã³ã³ããŒãã³ã <app-dog>
ãå²ã <v-layout>
ã³ã³ããŒãã³ãã v-transition-group
ã«çœ®ãæããé©åãªã¿ã°å±æ§ãšã¯ã©ã¹ãæäŸããŸãã
<transition-group name="slide" tag="v-layout" class="wrap">
<v-flex xs6 sm4 md2 v-for="(pet, index) in favoriteDogs" :key="pet">
<app-dog :dog="pet" @remove="removeFromFavorites(index)"></app-dog>
</v-flex>
</transition-group>
2
3
4
5
transition-group
㯠v-layout
ã³ã³ããŒãã³ããšããŠã¬ã³ããªã³ã°ãããŸããã¯ã©ã¹ wrap
ã¯ã°ãªããèŠçŽ ã次ã®è¡ã«ã©ããããããã«å¿
èŠã§ããïŒ v-layout
ã® wrap
å±æ§ã眮ãæããŸãïŒ
ãŸããæ°ãããã©ã³ãžã·ã§ã³ã«ãã¹ã©ã€ãããšããååãä»ããŸããã
ããã§ãCSS ã¯ã©ã¹ã䜿çšããŠã¹ã©ã€ããã©ã³ãžã·ã§ã³ã説æã§ããŸã â ãããã®ã¯ã©ã¹ã App.vue
ã® CSS ã«è¿œå ããŸãã
.slide-enter-active {
transition: all 0.3s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(10px);
opacity: 0;
}
2
3
4
5
6
7
8
ã°ã¬ãŒãïŒæ°ããç¬ãã°ãªããã«è¿œå ãããšãçŽ æŽãããã¢ãã¡ãŒã·ã§ã³ãã§ããŸãããã ããåé€ã«ã¯åœ±é¿ããŸããã -move
ã¯ã©ã¹ããããŸããããã¯ãã¢ã€ãã ã®äœçœ®ãå€ãã£ããšãã«è¿œå ãããŸãã
ä»ã®ã¯ã©ã¹ãšåæ§ã«ããã®ãã¬ãã£ãã¯ã¹ã¯æäŸããã name
å±æ§ïŒãã®å Žå㯠slide
ïŒã®å€ãšäžèŽããŸãããããã£ãŠãããã«ã¹ã¿ã€ã«ãè¿œå ããå¿
èŠããããŸãã
.slide-leave-active {
position: absolute;
}
.slide-move {
transition: transform 0.5s;
}
2
3
4
5
6
7
ð¡ é¢ããã¢ã€ãã ã®
positionïŒabsolute;
ã«æ³šæããŠãã ããïŒèªç¶ãªæµãããããããåé€ããæ®ãã®ã¢ã€ãã ã®ã ãŒããã©ã³ãžã·ã§ã³ãããªã¬ãŒããŸãã
ãªã¹ãã«ã¯ãèŠçŽ ãåé€ããåŸã®çŽ æµãªã ãŒãã¢ãã¡ãŒã·ã§ã³ããããŸãïŒ
ðSupplement 2 ãå®äºããŸããïŒð
# Author - èè
Made with â€ïž by Natalia Tepluhina, updated by Jen Looper