利用vue-cli創(chuàng)建的vue腳手架，實(shí)現(xiàn)留言板功能

1.搭建項(xiàng)目結(jié)構(gòu)

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

項(xiàng)目初始結(jié)構(gòu)如圖

2.創(chuàng)建組件

在pages文件夾中創(chuàng)建Album、Article、Home、UCenter、Message五個(gè)組件，分別對(duì)應(yīng)相冊(cè)，文章，主頁(yè)，個(gè)人中心，留言板。

3.編輯組件

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

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

編輯App.vue,導(dǎo)入并注冊(cè)組件，編寫(xiě)頁(yè)面結(jié)構(gòu)，修改頁(yè)面樣式

<template><div id="app"><h2>個(gè)人空間</h2><ul class="nav"><li :class="{ active: page === 'Home' }" @click="page = 'Home'">主頁(yè)</li><li :class="{ active: page === 'Article' }" @click="page = 'Article'">文章</li><li :class="{ active: page === 'Album' }" @click="page = 'Album'">相冊(cè)</li><li :class="{ active: page === 'Message' }" @click="page = 'Message'">留言板</li><li :class="{ active: page === 'Ucenter' }" @click="page = 'Ucenter'">個(gè)人中心</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="請(qǐng)輸入評(píng)論內(nèi)容"></textarea><button class="send-msg" @click="sendMsg">發(fā)送留言</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>留言內(nèi)容</p></div></div> --></div></div> </template><script> // 限于純前端測(cè)試時(shí)使用 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(){// 當(dāng)前實(shí)例創(chuàng)建時(shí)，模擬從接口獲取數(shù)據(jù)this.msgList=[{id:3,author: "爾爾",time:Date.now(),img:m1,content:"我也愛(ài)你！"},{id:2,author: "依依",time:Date.now(),img:m2,content:"我愛(ài)你！"},{id:1,author: "思思",time:Date.now(),img:m3,content:"我愛(ài)你愛(ài)你！"},];},data(){return{// 雙向綁定的留言內(nèi)容content: "",// 留言內(nèi)容msgList: [],// 聲明編輯的ideditId:""}},methods: {sendMsg () {// console.log("用戶準(zhǔn)備發(fā)表留言",this.content)if(this.content===""){alert("留言內(nèi)容為空")return}if(this.editId){// 拆分?jǐn)?shù)據(jù)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 {// 創(chuàng)建留言對(duì)象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// 給輸入框綁定的變量賦值（展示編輯數(shù)據(jù)）this.content = msg.content},delMsg(id) {// 二次確認(rèn)const result = confirm("確認(rèn)刪除？")if (!result) return// 刪除this.msgList = this.msgList.filter(msg => msg.id !== id)// 防止點(diǎn)擊編輯之后在點(diǎn)擊刪除按鈕出現(xiàn)的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)}時(shí)${date.getMinutes().toString().padStart(2,0)}分${date.getSeconds().toString().padStart(2,0)}秒`}} } </script> <!-- 如果想讓這里編寫(xiě)的樣式只對(duì)當(dāng)前組件有效，style上添加一個(gè)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>

瀏覽器效果如圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。