步骤
实现手动输入数据添加新的联系人
1、添加新的组件NewFriend.vue用于录入数据
<template>
<form @submit.prevent="submitData"> <!--阻止刷新页面-->
<div>
<label>Name</label>
<input type="text" v-model="enteredName">
</div>
<div>
<label>Phone</label>
<input type="text" v-model="enteredPhone">
</div>
<div>
<label>Email</label>
<input type="text" v-model="enteredEmail">
</div>
<div>
<button>Add Contact</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
enteredName: '',
enteredPhone: '',
enteredEmail: ''
};
},
emits: ['add-contact'],
methods: {
submitData() {
if (this.enteredName && this.enteredPhone && this.enteredEmail) {
传单个数据
// this.$emit('add-contact',
// this.enteredName,
// this.enteredPhone,
// this.enteredEmail
// );
//传对象
this.$emit('add-contact', {
name: this.enteredName,
phone: this.enteredPhone,
email: this.enteredEmail
});
//清空输入框
this.enteredName = '';
this.enteredPhone = '';
this.enteredEmail = '';
} else {
alert('Please enter all fields!');
}
}
}
};
</script>
2、main.js中导入组件
import { createApp } from 'vue'
import App from './App.vue'
import FriendContact from './components/FriendContact.vue';
import NewFriend from './components/NewFriend.vue';
const app = createApp(App);
app.component('friend-contact', FriendContact);
app.component('new-friend', NewFriend);
app.mount('#app');
3、App.vue中添加style,添加addContact方法添加联系人
<template>
<section>
<header>
<h1>My Friends</h1>
</header>
<new-friend @add-contact="addContact"></new-friend> <!--使用组件-->
<ul>
<friend-contact v-for="friend in friends" :key="friend.id" :id="friend.id" :name="friend.name"
:phone-number="friend.phone" :email-address="friend.email" :is-favorite="friend.isFavorite"
@toggle-favorite="toggleFavoriteStatus(friend.id)"></friend-contact>
</ul>
</section>
</template>
<script>
// const app = {
export default {
data() {
return {
friends: [
//{ id: 1, name: 'John', phone: '1234567890', email: 'john@gmail.com', isFavorite: true },
// { id: 2, name: 'Jane', phone: '0987654321', email: 'jane@gmail.com', isFavorite: false },
//{ id: 3, name: 'Bob', phone: '1245678901', email: 'bob@gmail.com', isFavorite: true },
// { id: 4, name: 'Alice', phone: '0123456789', email: 'alice@gmail.com', isFavorite: true },
// { id: 5, name: 'Jack', phone: '1029384756', email: 'jack@gmail.com', isFavorite: false },
// { id: 6, name: 'Jill', phone: '1234567890', email: 'jill@gmail.com', isFavorite: true }
]
}
},
methods: {
toggleFavoriteStatus(friendId) {
// const identifiedFriend = this.friends.find(friend => friend.id === friendId);
// identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
this.friends.find(friend => friend.id === friendId).isFavorite =
!this.friends.find(friend => friend.id === friendId).isFavorite
},
添加方法addContact用于增加联系人
// addContact(name, phone, email) {
// const newFriend = { id: this.friends.length + 1, name: name, phone: phone, email: email, isFavorite: false };
// this.friends.push(newFriend);
// }
addContact(friendObj) {
const newFriend = {id: this.friends.length + 1, ...friendObj};
this.friends.push(newFriend)
}
}
}
</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;
}
/*为NewFriend-form添加style*/
#app li,
#app form {
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);
}
/*NewFriend-newstyle*/
#app input {
font: inherit;
padding: 0.2rem 0.4rem;
}
#app label {
font-weight: bold;
margin-right: 1rem;
width: 7rem;
display: inline-block;
}
#app form div {
margin: 1rem 0;
}
</style>