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

缺乏、安全感 2022-12-22 09:55 286阅读 0赞

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

--------------------

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

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

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

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

整个页面展示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]  
二 、将上面的一些假数据 (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>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]  
三 、 获取留言人信息和留言，并将其显示在表单中

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

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

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

效果如下：  
当我们输入留言信息之后点击发送留言：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]  
大功告成！！！

--------------------

完整代码如下：

<!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>

[Link 1]: https://blog.csdn.net/PILIpilipala/article/details/109670566
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3abba3ec2f0c42d69e948fb1a83be5a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/f46d21853a1d49bbbbc37ee4581a2ff4.png
[Link 2]: https://blog.csdn.net/PILIpilipala/article/details/109681124
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/a61ed9d810224e6fb31dafcb835e6436.png