利用Vue.js实现简单的留言板功能

此案例主要实现点击发送留言的按钮，将我们的留言以及留言人的信息展示在留言板上，下面就是具体的步骤：

一、搭建整个留言板页面结构

为了页面整体效果稍微好看一点，此案例运用bootstrap框架对页面表单结构进行渲染
利用前面学过的Vue组件将表单结构渲染出来

(指路忘记组件知识的同学—>组件的创建)

<div id="app"><cmt-box></cmt-box><template id="temp1"><div><div class="form-group"><label for="">留言人</label><input type="text" name="" id="" class="form-control"></div><div class="form-group"><label for="">留言内容</label><input type="text" name="" id="" class="form-control"></div><div class="form-group"><input type="button" value="发送留言" class="btn btn-primary"></div></div></template><ul class="list-group"><li class="list-group-item">Item 1</li><li class="list-group-item">Item 2</li><li class="list-group-item">Item 3</li></ul>
</div>
<script>var mycon1={template:'#tmp1'}new Vue({el:'#app',data:{},methods:{},components:{'cmt-box':mycon1}})
</script>

整个页面展示如下：

二、将上面的一些假数据 (item1)删掉，利用v-for指令将数据遍历出来并显示在表单里

<div id="app"><cmt-box></cmt-box><ul class="list-group"><li class="list-group-item" v-for="item in list" :key="item.name"><div class="pane panel-info"><div class="panel-heading"><h3 class="panel-title">{{item.userName}}:{{item.id}}</h3></div><div class="panel-body">{{item.content}}<span class="label label-info pull-right">未读留言</span></div></div></li></ul>
</div><script>new Vue({el:'#app',data:{list:[{id:new Date(),userName:'迪丽热巴',content:'三生三世枕上书'},{id:new Date(),userName:'郑秀晶',content:'继承者'},{id:new Date(),userName:'宋茜',content:'风起洛阳'},]},methods:{},components:{'cmt-box':mycon1}})
</script>

效果如下：

三、获取留言人信息和留言，并将其显示在表单中

在子组件中利用v-model指令进行双向绑定，实现获取数据信息，并在子组件中加入相应的属性data
给发送留言按钮绑定点击事件，实现发送内容的功能，同时在子组件中加入相应的属性methods
同时实现子组件向父组件传递方法，将数据信息传递给父组件中的list中去

(忘记父子组件之间的如何通信的同学指路—>组件之间的通信)

<div id="app"><cmt-box @func='refresh'></cmt-box>
</div>
<template id="temp1"><div><div class="form-group"><label for="">留言人</label><input type="text" name="" id="" class="form-control" v-model='msgSonData.userName'></div><div class="form-group"><label for="">留言内容</label><input type="text" name="" id="" class="form-control" v-model='msgSonData.content'></div><div class="form-group"><input type="button" value="发送留言" @click='postContent' class="btn btn-primary"></div></div>
</template><script>var mycon1={template:'#temp1',data(){return{msgSonData:{userName:'',content:'',  }}}, methods:{postContent(){// console.log(this.msgSonData.name);this.$emit('func',this.msgSonData)}}}new Vue({el:'#app',data:{newSonData:'',list:[{id:new Date(),userName:'迪丽热巴',content:'三生三世枕上书'},{id:new Date(),userName:'郑秀晶',content:'继承者'},{id:new Date(),userName:'宋茜',content:'风起洛阳'},]},methods:{refresh(data){// console.log(data);this.newSonData=data;this.newSonData['id'] = new Date();this.list.push(this.newSonData);}},components:{'cmt-box':mycon1}})
</script>

效果如下：
当我们输入留言信息之后点击发送留言：

大功告成！！！

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app"><cmt-box @func='refresh'></cmt-box><ul class="list-group"><li class="list-group-item" v-for="item in list" :key="item.name"><div class="pane panel-info"><div class="panel-heading"><h3 class="panel-title">{{item.userName}}:{{item.id}}</h3></div><div class="panel-body">{{item.content}}<span class="label label-info pull-right">未读留言</span></div></div></li></ul>
</div>
<template id="temp1"><div><div class="form-group"><label for="">留言人</label><input type="text" name="" id="" class="form-control" v-model='msgSonData.userName'></div><div class="form-group"><label for="">留言内容</label><input type="text" name="" id="" class="form-control" v-model='msgSonData.content'></div><div class="form-group"><input type="button" value="发送留言" @click='postContent' class="btn btn-primary"></div></div>
</template><script>var mycon1={template:'#temp1',data(){return{msgSonData:{userName:'',content:'',  }}}, methods:{postContent(){// console.log(this.msgSonData.name);this.$emit('func',this.msgSonData)}}}new Vue({el:'#app',data:{newSonData:'',list:[{id:new Date(),userName:'迪丽热巴',content:'三生三世枕上书'},{id:new Date(),userName:'郑秀晶',content:'继承者'},{id:new Date(),userName:'宋茜',content:'风起洛阳'},]},methods:{refresh(data){// console.log(data);this.newSonData=data;this.newSonData['id'] = new Date();this.list.push(this.newSonData);}},components:{'cmt-box':mycon1}})
</script></body>
</html>

利用Vue.js实现简单的留言板功能相关推荐

PHP编辑留言源码,php实现简单的留言板功能（附源码）
php实现简单的留言板功能 1.原理简单的说就是数据库的创建,添加数据,显示在前端上.我的程序只是简单的留言再显示. 首先写好留言的前端页面,就简单的写入作者,标题和内容. 2.界面: 3.显示留 ...
JS原生编写实现留言板功能
实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script>window.onload = function(){var oMessageBox = d ...
利用Vue.js实现简单员工管理系统（增删查）的功能
员工管理系统注意!!此篇博客没有涉及后台数据库,所有数据自己设定,不经过数据库来增删改查!! 我们想要实现一个简单的员工管理系统案例需要以下几个步骤,我们一起来康康叭~~ 第一步:首先先实现基础的表 ...
php连接数据库的留言板,PHP+MySql实现简单的留言板功能
[相关学习推荐:mysql教程] 跟着书学的,代码不是自己写的,但是都能理解,有时间自己去写个好看一点的吼吼吼-(不熟练花了一天的时间- 留言板是接触WEB开发的基础,写一个留言板需要知道前端的一些基 ...
利用节点操作完成简易的留言板功能
效果如下: (真可爱啊) 实现原理: 每点击一次提交按钮,就创建一个 li 标签(本身 ul 里没有 li 标签,ul 在 textarea 下方)然后使用 innerHTML 将textarea 的 ...
android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
vue实现留言板的功能_Vue实现简单的留言板
本文实例为大家分享了Vue实现简单的留言板的具体代码,供大家参考,具体内容如下 body { /* margin: 0; */ padding-left: 10px; } #app{ width: 4 ...
vue脚手架实现留言板功能
利用vue-cli创建的vue脚手架,实现留言板功能 1.搭建项目结构命令行中创建vue项目,在src路径下的assets文件夹中创建images文件夹存放用户头像,并新建一个pages文件夹用于存 ...

利用Vue.js实现简单的留言板功能

利用Vue.js实现简单的留言板功能相关推荐

最新文章

热门文章