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

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


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

  1. 为了页面整体效果稍微好看一点,此案例运用bootstrap框架对页面表单结构进行渲染
  2. 利用前面学过的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>

效果如下:
在这里插入图片描述
三 、 获取留言人信息和留言,并将其显示在表单中

  1. 在子组件中利用v-model指令进行双向绑定,实现获取数据信息,并在子组件中加入相应的属性data
  2. 给发送留言按钮绑定点击事件,实现发送内容的功能,同时在子组件中加入相应的属性methods
  3. 同时实现子组件向父组件传递方法,将数据信息传递给父组件中的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>
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值