From eb387dbd90a2a891ee5ee4458e32cccb460fd9b1 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Mon, 06 Jan 2025 18:15:48 +0100
Subject: [PATCH] first components e props
---
10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue | 17 +++++++++++++++--
10 - course project/xno-prj-cmp-01-starting-setup/src/main.js | 4 +++-
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue | 20 ++++++++++++++++++++
3 files changed, 38 insertions(+), 3 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
index 8b23411..36206d2 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
@@ -1,12 +1,25 @@
<template>
- <ul></ul>
+ <ul>
+ <learning-resource v-for="res in storedResouces"
+ :key="res.id"
+ :title="res.title"
+ :description="res.description"
+ :link="res.link"
+ >
+ </learning-resource>
+ </ul>
</template>
<script>
+import LearningResource from './components/learning-resource/LearningResource.vue';
+
export default {
+ components:{
+ LearningResource: LearningResource,
+ },
data(){
return {
- storedResouces:[
+ storedResouces: [
{
id:'official-guide',
title: 'Official Guide',
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
new file mode 100644
index 0000000..5fd7ac1
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
@@ -0,0 +1,20 @@
+<template>
+ <li>
+ <div>
+ <header>
+ <h3>{{ title }}</h3>
+ <button>Delete</button>
+ </header>
+ </div>
+ <p>{{ description }}</p>
+ <nav>
+ <a :href="link">View Resource</a>
+ </nav>
+ </li>
+</template>
+
+<script>
+export default {
+ props: ['title', 'description', 'link']
+}
+</script>
\ No newline at end of file
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js b/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
index 01a27ce..419fa69 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
@@ -1,3 +1,5 @@
import { createApp } from 'vue';
-createApp({}).mount('#app');
+import App from './App.vue';
+
+createApp(App).mount('#app');
--
Gitblit v1.8.0