【vue】vue组件发表评论功能

今天看了vue相关的视频，所以跟着做一个小demo把知识串联起来，内容很简单但是也算是学习道路上的一点进步。

1 思路分析

发表评论模块写入一个组件，提高复用性。
关键点：

子组件通过localStorage向父组件传值
子组件有自己的data存储user和content，即评论人和评论内容，也就是dom元素绑定的数据。
点击‘发表评论’后，首先是将各条评论存入localStorage,然后通过在组件出绑定的函数调用父组件中的loadComments()加载评论。
vue生命周期的熟悉。在created()中写入loadComments(),每次页面加载就会载入评论数据。

2 源代码

需要vue.js和bootstrap.js两个文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="../lib/vue.js"></script><link rel="stylesheet" href="../lib/bootstrap.css"><style>li{list-style:none;}</style>
</head>
<body><div id="app"><com @func="loadComments"></com><ul class="list-group"><li class="list-group-item" v-for="item in list">{{item.content}}<span class="badge">{{item.user}}</span></li></ul></div><!-- 评论区组件 --><template id="tmp"><div><div class="form-group"><label>评论人</label><input class="form-control" id="user" v-model:value="user"/></div><div class="form-group"><label>评论内容</label><input class="form-control" id="content" v-model:value="content"/></div>   <div><input type="button" class="btn btn-primary" value="发表评论" @click="postComments"/></div></div></template><script>var tmp={template:"#tmp",data:function(){return {user:'',content:''}},methods:{postComments(){var comment={user:this.user,content:this.content};var list=JSON.parse(localStorage.getItem('cmts')||'[]');list.unshift(comment);localStorage.setItem('cmts',JSON.stringify(list));//数组对象和字符串相互转换的过程this.user='';this.content='';this.$emit('func');}}}var vm=new Vue({el:"#app",data:{list:[]},created(){this.loadComments();},methods:{loadComments(){this.list=JSON.parse(localStorage.getItem('cmts')||'[]');}},components:{'com':tmp}});</script>
</body>
</html>

【vue】vue组件发表评论功能相关推荐

vue组件案例----发表评论功能
页面展示 1.引入样式bootstrap.css和vue.js文件 <link rel="stylesheet" href="../bootsrtrap/css/b ...
【Javascript】进阶之实现评论分页与发表评论功能
描述:实现评论分页与发表评论 1.评论分页,通过上一页.下一页和输入页数跳转 2.发表评论是需要先判断是否登录,登录后显示个人中心和退出,再发表评论,如果选择匿名评论,则显示匿名代码实现 HTML ...
vue组件实现发表评论功能（localStorage）
首先画出简单的界面如下: 说说我的思路:由于是为了去练习组件之间传值,所以将页面上的写评论部分写在了子组件中,然后在然后然后子组件点击发表将数据传递给父组件的data,再由父组件来渲染评论社区的页面. ...
vue a-input组件的只读功能实现
<a-input readOnly style='width: 150px;margin-left: 10px' v-model='model.strategyInstrument' >& ...
小程序发表评论功能
工作日志随手笔记仅供参考 1.点击发表按钮判断内容是否为空如果为空提示请输入内容 2.如果内容不为空将评论框里输入的内容的值传入评论列表 <view wx:for="{{ ...
基于vue练习demo：发表评论案例 (使用localStorage存储数据)
前言最近在学习 VUE的相关知识,之前学习html和css3和原生js及jq库时感觉还挺轻松,但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router,vue-cli,webpac ...
16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
17款优秀的Vue UI组件库汇总
17款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
Vue UI组件库总结推荐
基于Vue的Quasar Framework 介绍这个框架UI组件很全面,准备下次使用这个框架了基于Vue的Quasar Framework 中文网 http://www.quasarchs.co ...

【vue】vue组件发表评论功能

1 思路分析

2 源代码

【vue】vue组件发表评论功能相关推荐

最新文章

热门文章