| commit | author | age | ||
| a4d58c | 1 | <template> |
| eb387d | 2 | <ul> |
| 43396a | 3 | <learning-resource v-for="res in storedResouces" :key="res.id" :title="res.title" :description="res.description" |
| CM | 4 | :link="res.link"> |
| eb387d | 5 | </learning-resource> |
| CM | 6 | </ul> |
| a4d58c | 7 | </template> |
| CM | 8 | |
| 9 | <script> | |
| eb387d | 10 | import LearningResource from './components/learning-resource/LearningResource.vue'; |
| CM | 11 | |
| a4d58c | 12 | export default { |
| 43396a | 13 | components: { |
| eb387d | 14 | LearningResource: LearningResource, |
| CM | 15 | }, |
| 43396a | 16 | data() { |
| a4d58c | 17 | return { |
| eb387d | 18 | storedResouces: [ |
| a4d58c | 19 | { |
| 43396a | 20 | id: 'official-guide', |
| a4d58c | 21 | title: 'Official Guide', |
| CM | 22 | description: 'The official Vue.js documentation', |
| 23 | link: 'https://vuejs.org' | |
| 24 | }, | |
| 25 | { | |
| 43396a | 26 | id: 'google', |
| a4d58c | 27 | title: 'Google', |
| CM | 28 | description: 'Learn to google...', |
| 29 | link: 'https://google.com' | |
| 30 | }, | |
| 31 | ] | |
| 32 | } | |
| 33 | } | |
| 34 | } | |
| 43396a | 35 | </script> |
| CM | 36 | |
| 37 | <style> | |
| 38 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); | |
| 39 | ||
| 40 | * { | |
| 41 | box-sizing: border-box; | |
| 42 | } | |
| 43 | ||
| 44 | html { | |
| 45 | font-family: 'Roboto', sans-serif; | |
| 46 | } | |
| 47 | ||
| 48 | body { | |
| 49 | margin: 0; | |
| 50 | } | |
| 51 | </style> | |
