利用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>