Vue3是目前最先進的JavaScript框架之一，它是Vue.js的下一代版本。 Vue3不僅提供了更好的性能和更豐富的功能，還提供了更好的開發體驗。在本篇文章中，我們將介紹如何使用Vue3來建立一個簡單的即時通訊應用程式。
在開始建立應用程式之前，我們需要確定應用程式的結構。在我們的範例應用程式中，我們將建立以下元件：
在開始建立應用程式之前，請確保在電腦上安裝了最新版本的Node.js和Vue CLI。
要建立應用程序，請使用Vue CLI並執行以下命令：
vue create chat-app
這將建立一個新的Vue3應用程式。然後，您需要跟隨螢幕上的提示並選擇以下選項：
<template>
<div class="chat-app">
<ChatList />
<ChatInput />
</div>
</template>
<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";
export default {
name: "App",
components: {
ChatList,
ChatInput,
},
};
</script>
<style>
.chat-app {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-between;
}
</style><template>
<div class="chat-list">
<ChatMessage v-for="message in messages" :key="message.id" :message="message" />
</div>
</template>
<script>
import ChatMessage from "./ChatMessage";
export default {
name: "ChatList",
components: {
ChatMessage,
},
data() {
return {
messages: [
{ id: 1, text: "Hello", author: "Alice" },
{ id: 2, text: "Hi there", author: "Bob" },
],
};
},
};
</script>
<style>
.chat-list {
height: calc(100% - 64px);
overflow-y: scroll;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
</style><template>
<div class="chat-message">
<div class="chat-message-author">{{ message.author }}</div>
<div class="chat-message-text">{{ message.text }}</div>
</div>
</template>
<script>
export default {
name: "ChatMessage",
props: {
message: {
type: Object,
required: true,
},
},
};
</script>
<style>
.chat-message {
margin-bottom: 8px;
}
.chat-message-author {
font-weight: bold;
margin-bottom: 4px;
}
.chat-message-text {
font-size: 16px;
}
</style><template>
<div class="chat-input">
<input type="text" v-model="message" @keyup.enter="sendMessage" />
<button @click="sendMessage">Send</button>
</div>
</template>
<script>
export default {
name: "ChatInput",
data() {
return {
message: "",
};
},
methods: {
sendMessage() {
this.$emit("send", this.message);
this.message = "";
},
},
};
</script>
<style>
.chat-input {
display: flex;
height: 64px;
padding: 16px;
}
.chat-input input {
flex: 1;
border-radius: 4px 0 0 4px;
border: none;
padding: 8px;
font-size: 16px;
}
.chat-input button {
border-radius: 0 4px 4px 0;
border: none;
background-color: #007aff;
color: white;
font-size: 16px;
padding: 8px 16px;
cursor: pointer;
}
</style><script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";
export default {
name: "App",
components: {
ChatList,
ChatInput,
},
data() {
return {
messages: [
{ id: 1, text: "Hello", author: "Alice" },
{ id: 2, text: "Hi there", author: "Bob" },
],
};
},
methods: {
sendMessage(message) {
const newMessage = {
id: this.messages.length + 1,
text: message,
author: "You",
};
this.messages.push(newMessage);
},
},
};
</script><script>
export default {
name: "ChatInput",
data() {
return {
message: "",
};
},
methods: {
sendMessage() {
this.$emit("send", this.message);
this.message = "";
},
},
};
</script><ChatMessage v-for="message in messages" :key="message.id" :message="message" />
npm run serve
以上是VUE3入門實例：建立一個簡單的即時通訊應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
