前言
最近在学习 VUE的相关知识，之前学习html和css3和原生js及jq库时感觉还挺轻松，但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router，vue-cli，webpack，npm等等都得接触到一些)，太庞杂了，因此因为这一个月以来看的东西太多了脑壳有点儿懵，想了想先巩固一下VUE的基础再往后面进行，所以练习写了这个 发表评论功能 的小玩意儿。
（emmmmmmmm…以上废话可忽略）
实现功能
一个提交评论的表单区域（包括：评论人及评论内容，组件呈现）
评论列表显示的区域（vue实例展现）
使用localStorage存储数据使得刷新或关闭浏览器不影响评论数量
效果展示
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"><link rel="stylesheet" href="/releases/v5.3.1/css/all.css"><script src="/npm/vue@2.5.21/dist/vue.js"></script><title>Title</title></head><body><!-- 评论列表展示区域 --><div id="app-listcomments"><publish @func="getlocalinfo"></publish><br><div class="container"><ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">{{ item.content }}<span class="badge badge-secondary badge-pill">{{ item.user }}</span></li></ul></div></div><!-- 提交评论的表单组件 --><template id="publish"><div><div class="card border-info"><div class="card-header">评论系统</div><div class="card-body"><div class="container"><form><div class="form-group"><label for="user">评论人:</label><input type="text" class="form-control" id="user" v-model="user"></div><div class="form-group"><label for="content">评论内容:</label><textarea id="content" class="form-control" v-model="content"></textarea></div><input type="button" value="发表评论" class="btn btn-primary" @click="getinfo"></form></div></div></div></div></template><script>//组件创建（使用局部组件方式）var publish = {data() {return {user: '',content: ''}},template: "#publish",methods: {getinfo() {//获得输入框的user及content数据并更新到评论列表if (this.user == '' || this.content == '') { //判断输入框是否为空alert("输入框请不要留空白")} else {var info = {id: Math.random(),user: this.user,content: this.content} //获取用户输入的数据存到info对象中var list = JSON.parse(localStorage.getItem('cmts') || '[]') //获取localstrage中的数据，字符串类型需要转换为json对象list.push(info)//将得到的info对象的添加到listlocalStorage.setItem('cmts', JSON.stringify(list))//将更新好的数据重新添加到localstragethis.user = this.content = '' //清空输入框this.$emit('func')//更新页面的评论列表}}},}//vue实例部分创建var listcomment = new Vue({el: "#app-listcomments",data: {list: [{id: Math.random(),user: "林宥嘉",content: "多久了我都没变，爱你这回事整整六年"},{id: Math.random(),user: "华晨宇",content: "看着飞舞的尘埃掉下来"}]},created() {var localinfo = JSON.parse(localStorage.getItem('cmts') || '[]')if (localinfo.length == 0) {var list = this.listlocalStorage.setItem('cmts', JSON.stringify(list))}this.getlocalinfo()},components: {'publish': publish},methods: {getlocalinfo() {var list = JSON.parse(localStorage.getItem('cmts') || '[]')this.list = list}}})</script><script src="/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script><script src="/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script><script src="/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script></body></html>
原文地址：/weixin_43388844/article/details/86443883
