利用vue-cli創建的vue腳手架，實現留言板功能

1.搭建項目結構

命令行中創建vue項目，在src路徑下的assets文件夾中創建images文件夾存放用戶頭像，并新建一個pages文件夾用于存放自己的vue文件。

項目初始結構如圖

2.創建組件

在pages文件夾中創建Album、Article、Home、UCenter、Message五個組件，分別對應相冊，文章，主頁，個人中心，留言板。

3.編輯組件

編輯除留言板(Message.vue)之外的所有組件，此案例只針對留言板功能
編輯其他頁面組件代碼如下：

<template><div class="home"><h2>主頁頁面</h2></div> </template><script> export default {data() {return {};}, }; </script><style> </style>

編輯App.vue,導入并注冊組件，編寫頁面結構，修改頁面樣式

<template><div id="app"><h2>個人空間</h2><ul class="nav"><li :class="{ active: page === 'Home' }" @click="page = 'Home'">主頁</li><li :class="{ active: page === 'Article' }" @click="page = 'Article'">文章</li><li :class="{ active: page === 'Album' }" @click="page = 'Album'">相冊</li><li :class="{ active: page === 'Message' }" @click="page = 'Message'">留言板</li><li :class="{ active: page === 'Ucenter' }" @click="page = 'Ucenter'">個人中心</li></ul><hr /><keep-alive><component :is="page"></component></keep-alive></div> </template><script> import Album from "./pages/Album.vue"; import Article from "./pages/Article.vue"; import Home from "./pages/Home.vue"; import Message from "./pages/Message.vue"; import Ucenter from "./pages/Ucenter.vue";export default {name: "App",components: {Album,Article,Home,Message,Ucenter,},data() {return {page: "Home",};}, }; </script><style> * {margin: 0;padding: 0;box-sizing: border-box; } html, body {background-color: #eee; } .nav {margin: 50px 0;height: 50px;background-color: antiquewhite;font-size: 22px;display: flex;list-style: none; } .nav li {line-height: 40px;padding: 5px 20px;cursor: pointer; } .nav li:hover {font-weight: bold; } .nav li.active {color: orangered;border-bottom: 2px solid orangered; } </style>

編輯Message.vue,代碼如下

<template><div class="message"><h2>留言板</h2><div class="input-msg"><textarea name="" id="msg" cols="50" rows="5" v-model.trim="content" @keyup.enter="sendMsg" placeholder="請輸入評論內容"></textarea><button class="send-msg" @click="sendMsg">發送留言</button></div><div class="history"><div class="msg-item" v-for="msg in msgList" :key="msg.id"><img class="header-img" :src="msg.img" alt=""><div><h2>作者：{{msg.author}}<small>{{msg.time | formatTime}}</small></h2><p class="cont">{{msg.content}}</p><p class="control"><button class="btn btn-edit" @click="editMsg(msg)">編輯</button><button class="btn btn-del" @click="delMsg(msg.id)">刪除</button></p></div></div><!-- <div class="msg-item"><img class="header-img" src="../assets/images/1.webp" alt=""><div><h2>作者：豆子<small>2022-10-14 15:03:26</small></h2><p>留言內容</p></div></div> --></div></div> </template><script> // 限于純前端測試時使用 import m1 from "../assets/images/1.jpg" import m2 from "../assets/images/2.jpg" import m3 from "../assets/images/3.jpg" import m4 from '../assets/images/4.jpg' export default {created(){// 當前實例創建時，模擬從接口獲取數據this.msgList=[{id:3,author: "爾爾",time:Date.now(),img:m1,content:"我也愛你！"},{id:2,author: "依依",time:Date.now(),img:m2,content:"我愛你！"},{id:1,author: "思思",time:Date.now(),img:m3,content:"我愛你愛你！"},];},data(){return{// 雙向綁定的留言內容content: "",// 留言內容msgList: [],// 聲明編輯的ideditId:""}},methods: {sendMsg () {// console.log("用戶準備發表留言",this.content)if(this.content===""){alert("留言內容為空")return}if(this.editId){// 拆分數據let [content]=this.content.split(" ")let index = this.msgList.findIndex(msg=>msg.id === this.editId)this.msgList[index].content=content// 清空文本域、清空editIdthis.content=""this.editId=""}else {// 創建留言對象let id=this.msgList.length>0?this.msgList[0].id+1:1let m={id,author:"豆子",time: Date.now(),img:m4,content:this.content}// 添加留言this.msgList.unshift(m)// 清空留言框this.content=""}},editMsg(msg) {// 給編輯的id賦值this.editId = msg.id// 給輸入框綁定的變量賦值（展示編輯數據）this.content = msg.content},delMsg(id) {// 二次確認const result = confirm("確認刪除？")if (!result) return// 刪除this.msgList = this.msgList.filter(msg => msg.id !== id)// 防止點擊編輯之后在點擊刪除按鈕出現的bugthis.editId=""this.content=""},},filters: {formatTime:value=>{const date=new Date(value)return `${date.getFullYear()}年${(date.getMonth()+1).toString().padStart(2,0)}月${date.getDate().toString().padStart(2,0)}日 ${date.getHours().toString().padStart(2,0)}時${date.getMinutes().toString().padStart(2,0)}分${date.getSeconds().toString().padStart(2,0)}秒`}} } </script> <!-- 如果想讓這里編寫的樣式只對當前組件有效，style上添加一個scoped屬性--> <style scoped> .input-msg{width: 80%;margin: 10px auto;display: flex;flex-direction: column;align-items: flex-end; } #msg{width: 100%;height: 180px;padding: 10px;outline: none;border: 1px solid rgba(219, 73, 73, 0.466);border-radius: 5px;resize: none;display: block;margin: 10px auto;font-size: 18px; } .send-msg{width: 200px;height: 40px;border: none;background-color: orangered;color: wheat;border-radius: 20px;cursor: pointer;font-size: 18px; } .send-msg:hover{background-color: rgb(34, 231, 109);color: #000; } .history{width: 80%;padding: 20px 10px;margin: 10px auto;background-color: #fff; } .msg-item{display: flex;padding: 10px;border-bottom: 1px dashed #888; } .msg-item img{width: 100px;height: 100px;border-radius: 10px; } .msg-item div{margin-left: 10px;width: 100%; } .msg-item div h2{font-size: 22px; } .msg-item div h2 small{font-size: 16px;color: #888;font-weight: 600;margin-left: 20px; } .msg-item div p.cont{font-size: 16px;color: #444;margin: 10px 0;word-wrap: break-word;word-wrap: break-word;white-space: pre-wrap;min-height: 50px;/* border: 1px solid red; */ } .control{width: 100%;display: flex;justify-content: flex-end; } .btn{width: 80px;height: 30px;border: 1px solid #888;border-radius: 15px;cursor: pointer; } .btn-edit{background-color: rgb(20, 187, 247); } .btn-edit:hover{background-color: rgb(17, 148, 196);color: #fff; } .btn-del{background-color: rgb(247, 20, 88); } .btn-del:hover{background-color: rgb(192, 21, 72);color: #fff; } </style>

瀏覽器效果如圖

總結

以上是生活随笔為你收集整理的vue脚手架实现留言板功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。