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

最新推荐文章于 2024-09-02 20:10:44 发布

Yvonne.Y

最新推荐文章于 2024-09-02 20:10:44 发布

阅读量8.3k

点赞数 12

分类专栏： Vue.js 文章标签：组价留言板 Vue vue.js 前端

本文链接：https://blog.csdn.net/PILIpilipala/article/details/109820035

版权

Vue.js 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

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

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

为了页面整体效果稍微好看一点，此案例运用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>