add components
This commit is contained in:
parent
8fbb1c6c35
commit
cc9418d59c
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>User App</h1>
|
||||||
|
<active-user></active-user>
|
||||||
|
<user-data></user-data>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2>{{ username }}</h2>
|
||||||
|
<h3>{{ age }}</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: "Maxi",
|
||||||
|
age: 18,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<form @submit.prevent="returnData">
|
||||||
|
<div>
|
||||||
|
<label>Username: </label>
|
||||||
|
<input type="text" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Age: </label>
|
||||||
|
<input type="number" />
|
||||||
|
</div>
|
||||||
|
<div><button>Add User</button></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
returnData() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,9 +1,19 @@
|
||||||
import { createApp } from 'vue'
|
"use strict";
|
||||||
|
|
||||||
createApp({}).mount('#app')
|
import { createApp } from "vue";
|
||||||
|
|
||||||
// Task 1:
|
import App from "./App.vue";
|
||||||
// Add two components to the app:
|
import ActiveUser from "./components/ActiveUser.vue";
|
||||||
|
import UserData from "./components/UserData.vue";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.component("active-user", ActiveUser);
|
||||||
|
app.component("user-data", UserData);
|
||||||
|
|
||||||
|
app.mount("#app");
|
||||||
|
// Task 1:
|
||||||
|
// Add two components to the app:
|
||||||
// An ActiveUser component and an UserData component
|
// An ActiveUser component and an UserData component
|
||||||
// ActiveUser should output a username (h2) and age (h3)
|
// ActiveUser should output a username (h2) and age (h3)
|
||||||
// UserData should output two input fields => for name and age
|
// UserData should output two input fields => for name and age
|
||||||
|
@ -13,4 +23,4 @@ createApp({}).mount('#app')
|
||||||
|
|
||||||
// Task 3: Add user data and ensure it contains a name and age
|
// Task 3: Add user data and ensure it contains a name and age
|
||||||
// User data should be output in ActiveUser
|
// User data should be output in ActiveUser
|
||||||
// It should be updated via the UserData component
|
// It should be updated via the UserData component
|
||||||
|
|
Reference in New Issue