udemy/corso-vue.git

parent: c65c4fb2 | patch | commit | show whitespace

Cristiano Magro

2024-12-30 a61ded74c832a0b692c0a853e72c27d9a25ed412

fase inziale lezione 08

11 files added

	08 - component communication/cmp-communication-01-starting-setup/.browserslistrc	3 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/.eslintrc.js	17 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/.gitignore	22 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/HOW-TO-USE.pdf	patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/babel.config.js	5 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/package.json	23 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/public/favicon.ico	patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/public/index.html	21 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/src/App.vue	92 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/src/components/FriendContact.vue	37 ●●●●● patch \| view \| raw \| blame \| history
	08 - component communication/cmp-communication-01-starting-setup/src/main.js	10 ●●●●● patch \| view \| raw \| blame \| history

 08 - component communication/cmp-communication-01-starting-setup/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 08 - component communication/cmp-communication-01-starting-setup/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 08 - component communication/cmp-communication-01-starting-setup/.gitignore

New file
@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 08 - component communication/cmp-communication-01-starting-setup/HOW-TO-USE.pdf

Binary files differ

 08 - component communication/cmp-communication-01-starting-setup/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 08 - component communication/cmp-communication-01-starting-setup/package.json

New file
@@ -0,0 +1,23 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

 08 - component communication/cmp-communication-01-starting-setup/public/favicon.ico


 08 - component communication/cmp-communication-01-starting-setup/public/index.html

New file
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 08 - component communication/cmp-communication-01-starting-setup/src/App.vue

New file
@@ -0,0 +1,92 @@
<template>
  <section>
    <header>
      <h1>My Friends</h1>
    </header>
    <ul>
      <friend-contact></friend-contact>
      <friend-contact></friend-contact>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "0987 654421 21",
          email: "julie@localhost.com",
        },
      ],
    };
  },
};
</script>

<style>
* {
  box-sizing: border-box;
}
html {
  font-family: "Jost", sans-serif;
}
body {
  margin: 0;
}
header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}
#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}
</style>

 08 - component communication/cmp-communication-01-starting-setup/src/components/FriendContact.vue

New file
@@ -0,0 +1,37 @@
<template>
  <li>
    <h2>{{ friend.name }}</h2>
    <button @click="toggleDetails">{{ detailsAreVisible ? 'Hide' : 'Show' }} Details</button>
    <ul v-if="detailsAreVisible">
      <li>
        <strong>Phone:</strong>
        {{ friend.phone }}
      </li>
      <li>
        <strong>Email:</strong>
        {{ friend.email }}
      </li>
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "0123 45678 90",
        email: "manuel@localhost.com",
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    }
  }
};
</script>

 08 - component communication/cmp-communication-01-starting-setup/src/main.js

New file
@@ -0,0 +1,10 @@
import { createApp } from 'vue';

import App from './App.vue';
import FriendContact from './components/FriendContact.vue';

const app = createApp(App);

app.component('friend-contact', FriendContact);

app.mount('#app');

New file
			@@ -0,0 +1,17 @@
			module.exports = {
			root: true,
			env: {
			node: true
			},
			'extends': [
			'plugin:vue/vue3-essential',
			'eslint:recommended'
			],
			parserOptions: {
			parser: 'babel-eslint'
			},
			rules: {
			'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
			}
			}

New file
			@@ -0,0 +1,22 @@
			.DS_Store
			node_modules
			/dist

			# local env files
			.env.local
			.env.*.local

			# Log files
			npm-debug.log*
			yarn-debug.log*
			yarn-error.log*
			pnpm-debug.log*

			# Editor directories and files
			.idea
			.vscode
			*.suo
			.ntvs
			*.njsproj
			*.sln
			*.sw?

New file
			@@ -0,0 +1,5 @@
			module.exports = {
			presets: [
			'@vue/cli-plugin-babel/preset'
			]
			}

New file
			@@ -0,0 +1,23 @@
			{
			"name": "vue-first-app",
			"version": "0.1.0",
			"private": true,
			"scripts": {
			"serve": "vue-cli-service serve",
			"build": "vue-cli-service build",
			"lint": "vue-cli-service lint"
			},
			"dependencies": {
			"core-js": "^3.6.5",
			"vue": "^3.0.0"
			},
			"devDependencies": {
			"@vue/cli-plugin-babel": "~4.5.0",
			"@vue/cli-plugin-eslint": "~4.5.0",
			"@vue/cli-service": "~4.5.0",
			"@vue/compiler-sfc": "^3.0.0-0",
			"babel-eslint": "^10.1.0",
			"eslint": "^6.7.2",
			"eslint-plugin-vue": "^7.0.0-0"
			}
			}

New file
			@@ -0,0 +1,21 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="utf-8" />
			<meta http-equiv="X-UA-Compatible" content="IE=edge" />
			<meta name="viewport" content="width=device-width,initial-scale=1.0" />
			<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
			<title><%= htmlWebpackPlugin.options.title %></title>
			</head>
			<body>
			<noscript>
			<strong
			>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
			properly without JavaScript enabled. Please enable it to
			continue.</strong
			>
			</noscript>
			<div id="app"></div>
			<!-- built files will be auto injected -->
			</body>
			</html>

New file
			@@ -0,0 +1,92 @@
			<template>
			<section>
			<header>
			<h1>My Friends</h1>
			</header>
			<ul>
			<friend-contact></friend-contact>
			<friend-contact></friend-contact>
			</ul>
			</section>
			</template>

			<script>
			export default {
			data() {
			return {
			friends: [
			{
			id: "manuel",
			name: "Manuel Lorenz",
			phone: "0123 45678 90",
			email: "manuel@localhost.com",
			},
			{
			id: "julie",
			name: "Julie Jones",
			phone: "0987 654421 21",
			email: "julie@localhost.com",
			},
			],
			};
			},
			};
			</script>

			<style>
			* {
			box-sizing: border-box;
			}
			html {
			font-family: "Jost", sans-serif;
			}
			body {
			margin: 0;
			}
			header {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
			margin: 3rem auto;
			border-radius: 10px;
			padding: 1rem;
			background-color: #58004d;
			color: white;
			text-align: center;
			width: 90%;
			max-width: 40rem;
			}
			#app ul {
			margin: 0;
			padding: 0;
			list-style: none;
			}
			#app li {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
			margin: 1rem auto;
			border-radius: 10px;
			padding: 1rem;
			text-align: center;
			width: 90%;
			max-width: 40rem;
			}
			#app h2 {
			font-size: 2rem;
			border-bottom: 4px solid #ccc;
			color: #58004d;
			margin: 0 0 1rem 0;
			}
			#app button {
			font: inherit;
			cursor: pointer;
			border: 1px solid #ff0077;
			background-color: #ff0077;
			color: white;
			padding: 0.05rem 1rem;
			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
			}
			#app button:hover,
			#app button:active {
			background-color: #ec3169;
			border-color: #ec3169;
			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
			}
			</style>

New file
			@@ -0,0 +1,37 @@
			<template>
			<li>
			<h2>{{ friend.name }}</h2>
			<button @click="toggleDetails">{{ detailsAreVisible ? 'Hide' : 'Show' }} Details</button>
			<ul v-if="detailsAreVisible">
			<li>
			<strong>Phone:</strong>
			{{ friend.phone }}
			</li>
			<li>
			<strong>Email:</strong>
			{{ friend.email }}
			</li>
			</ul>
			</li>
			</template>

			<script>
			export default {
			data() {
			return {
			detailsAreVisible: false,
			friend: {
			id: "manuel",
			name: "Manuel Lorenz",
			phone: "0123 45678 90",
			email: "manuel@localhost.com",
			},
			};
			},
			methods: {
			toggleDetails() {
			this.detailsAreVisible = !this.detailsAreVisible;
			}
			}
			};
			</script>

New file
			@@ -0,0 +1,10 @@
			import { createApp } from 'vue';

			import App from './App.vue';
			import FriendContact from './components/FriendContact.vue';

			const app = createApp(App);

			app.component('friend-contact', FriendContact);

			app.mount('#app');