vue---发表评论页面编写

最新推荐文章于 2024-08-04 12:47:40 发布
最新推荐文章于 2024-08-04 12:47:40 发布
阅读量4.4k 收藏 15
点赞数 7
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssllkkyyaa/article/details/94714606
版权

1 vue页面架构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>  
<body>
    <div id="app">
        
        
    </div>
     
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                 
            },
            
            methods: {
                
            }
             

        })
    </script>
    
</body>
</html>

2 加载评论列表（静态数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>  
<body>
    <div id="app">
       
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人:{{ item.user }}</span>
                {{ item.content }}
            </li>
        </ul>
        
    </div>
    
    <script>
         
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                 {id: Date.now(), user:'李白', content: '天生我才必有用'},
                 {id: Date.now(), user:'林则徐', content:'岂因祸福避趋之'},
                 {id: Date.now(), user:'蛤', content:'苟利国家生死以'}
                ]
            },
            
            methods: {
                
            },
             

        })
    </script>
    
</body>
</html>

3  设计组件---将发布输入框设置为组件

添加组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>  
<body>
    <div id="app">
         <comment-box>

        </comment-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人:{{ item.user }}</span>
                {{ item.content }}
            </li>
        </ul>
       
    </div>
     <template id='temp1' >
        <div>
            <div class="form-group">
                <label>评论人：</label>
                <input type="text"  class="form-control"  >
            </div>
            <div class="form-group">
                <label>评论内容：</label>
                <textarea class="form-control"  ></textarea>
            </div>
            <div class="form-group" >
                <input type="button" value="发表评论" class="btn btn-primary" >
            </div>
        </div>
    </template>
    <script>
         var commentBox = {
            template: '#temp1',
            
        }
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                 {id: Date.now(), user:'李白', content: '天生我才必有用'},
                 {id: Date.now(), user:'林则徐', content:'岂因祸福避趋之'},
                 {id: Date.now(), user:'蛤', content:'苟利国家生死以'}
                ]
            },
            
            methods: {
                
            },
            components:{
                'comment-box':commentBox
            }


        })
    </script>
    
</body>
</html>

4添加监听，绑定数据到组件数据缓存变量

4.1 父组件加载数据，提供刷新数据监听以及对外的刷新方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>  
<body>
    <div id="app">
         <comment-box><!-- @update="loadComments" -->

        </comment-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人:{{ item.user }}</span>
                {{ item.content }}
            </li>
        </ul>
       
    </div>
     <template id='temp1' >
        <div>
            <div class="form-group">
                <label>评论人：</label>
                <input type="text"  class="form-control" >
            </div>
            <div class="form-group">
                <label>评论内容：</label>
                <textarea class="form-control"   ></textarea>
            </div>
            <div class="form-group" >
                <input type="button" value="发表评论" class="btn btn-primary" >
            </div>
        </div>
    </template>
    <script>
         var commentBox = {
            template: '#temp1',
             data(){
                return {
                    user: '',
                    content: ''
                }
            },
            methods: {
                
            },
        }
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                 {id: Date.now(), user:'李白', content: '天生我才必有用'},
                 {id: Date.now(), user:'林则徐', content:'岂因祸福避趋之'},
                 {id: Date.now(), user:'蛤', content:'苟利国家生死以'}
                ]
            },
            created() {//渲染html前调用
                this.loadComments()
            },
            methods: {
                loadComments(){
                    var list = JSON.parse(localStorage.getItem('cmts' ))
                     if(!list){
                        list = JSON.parse('[]')
                    }
                 this.list = list//更新  list  数据，数据变了，展示view变了
                }    
            },
            components:{
                'comment-box':commentBox
            }


        })
    </script>
    
</body>
</html>

 

4.2 子类添加数据绑定，添加动作监听，调用父类方法实现刷新数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>  
<body>
    <div id="app">
         <comment-box @update="loadComments"> 
        </comment-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人:{{ item.user }}</span>
                {{ item.content }}
            </li>
        </ul>
       
    </div>
     <template id='temp1' >
        <div>
            <div class="form-group">
                <label>评论人：</label>
                <input type="text"  class="form-control" v-model="user">
            </div>
            <div class="form-group">
                <label>评论内容：</label>
                <textarea class="form-control"   v-model="content"></textarea>
            </div>
            <div class="form-group" >
                <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
            </div>
        </div>
    </template>
    <script>
         var commentBox = {
            template: '#temp1',
             data(){
                return {
                    user: '',
                    content: ''
                }
            },
            methods: {
                postComment(){
                    /* 
                        
                        1.评论数据村到哪里去？？？ 存放到了localStorage中
                        2.先组织出一个最新的评论数据对象
                        3.把第二步中得到的评论对象保存到localStorage中
                            3.1  localStorage中只支持存放字符串数据, 要先调用JSON.stringfy
                            3.2  在保存最新的评论数据之前，要从localStorage获取之前的评论数据。转化为一个数组对象。然后吧最新的数据push进去
                            3.3  如果获取到的localStorage中的评论字符串为空，则可以返回一个'[]'让JSON.parse去转换
                            3.4  把最新评论列表数组再次调用JSON.stringfy 转化为 数组字符串然后调用localStringfy。
                            
                    */
                    var comment = {id: Date.now(), user: this.user, content: this.content}

                    var list = JSON.parse(localStorage.getItem('cmts'))
                    if(!list){
                        list=JSON.parse('[]');
                    }
                    list.unshift(comment)
                    localStorage.setItem('cmts', JSON.stringify(list))

                    this.user = this.content = ''
                    this.$emit('update')
                    
                }
            },
        }
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                 {id: Date.now(), user:'李白', content: '天生我才必有用'},
                 {id: Date.now(), user:'林则徐', content:'岂因祸福避趋之'},
                 {id: Date.now(), user:'蛤', content:'苟利国家生死以'}
                ]
            },
            created() {//渲染html前调用  主要是准备数据
                this.loadComments()
            },
            methods: {
                loadComments(){
                    var list = JSON.parse(localStorage.getItem('cmts' ))//有缓存加载缓存
                     if(!list){//无缓存  直接设置为空数组对象
                        list = JSON.parse('[]')
                    }
                 this.list = list//更新  list  数据，内存/缓存  更新，数据变了，展示view变了
                }    
            },
            components:{
                'comment-box':commentBox
            }


        })
    </script>
    
</body>
</html>

子类传入数据

 

方法监听  触发父类

 

SoLucky2017
关注
专栏目录
使用vue写一个评论组件
weixin_42593701的博客
02-09 448
写一个评论组件，可以使用 Vue 框架。您可以在 Vue 文件中编写模板，绑定数据并处理用户输入。 下面是一个简单的示例： <template> <div> <form @submit.prevent="submitComment"> <textarea v-model="newComment"></textarea&g...
vue-preview之前端小新的看法--jd
Jordan53的博客
10-23 229
图片分享 5.3.1图片分享列表 创建src\pages\photo\PhotoList.vue，代码如下。 <template> <div>图片分享列表</div> </template> 修改src\router.js，导入组件。 import PhotoList from './pages/photo/PhotoList.vue' 添加路由规则。 routes: [ …… { path: '/photo/list', component: P
vue评论组件，_基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点.zip
04-03
vue评论组件，_基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点.zip
vue之评论
weixin_47409897的博客
10-19 1025
目录评论组件 artical.vue评论头部组件 CommentTitle.vue评论组件 Comment.vue二级评论组件 ComemntChild.vue 评论组件 artical.vue 功能： 先获取用户信息 获取文章 数据 获取评论数据 发表评论 发表评论后，调用子组件中的 获取最新评论方法 点击回复 拿到父评论的id 并且给评论的数据对象，添加父评论的id 点击回复的 时候 输入框聚焦 需要使用 ref 拿到子组件的节点 然后调用子组件中的 input表单节点下 使用focus方
Vue从入门到精通全网最强保姆级教程(持续更新中)
最新发布
2301_81007211的博客
08-04 1231
Vue是前端优秀框架， 是一套用于构建用户界面的渐进式框架。
发表评论网页
lx127372的博客
07-14 4262
需求：写一个发表评论功能的网页，可以删除评论 &lt;%@ page language="java" pageEncoding="GBk"%&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;发表评论&lt;/title&gt; &lt;script language="javascript"&g
发表评论页面--总结
iteye_3962的博客
02-13 380
1.ajax跨域异步获取，评论接口数据     &lt;script&gt;部分代码 $.ajax({ type: 'get', url: "", dataType: "jsonp", success: success_result, error: error_result, jso...
vue-cnode：基于vue3函数的构建cnode社区
02-06
axios库常用于处理HTTP请求，vue-cnode项目很可能会用它来与CNode API进行通信，获取或发送数据，如获取话题列表、发表评论、登录注册等操作。 IView是一个流行的Vue UI组件库，它提供了丰富的UI元素，可以快速搭建...
node-vue-app示例代码
10-15
4. **搭建Vue.js前端**：用Vue CLI创建一个新的Vue项目，编写组件（如文章列表组件、文章详情组件、评论组件），并利用Vuex管理状态，确保数据在组件间正确传递。 5. **前后端交互**：使用axios在Vue组件中发起HTTP...
基于《狂神说Java》Vue--学习笔记
wudidahuanggua的博客
06-18 1407
本笔记仅做学习与复习使用，不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅！！!点击跳转至遇见狂神说哔哩哔哩首页如果你也是狂神的小迷弟，可以加我好友一起探讨学习。...
前端框架-Vue
AyinMars的博客
03-25 6294
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
Vue简单评论组件代码
12-11
简单的Vue评论组件案例，涉及到了Vue组件使用方法，过滤器使用方法，及计算属性的使用。
前端学习记录之评论页面
10-19
模仿腾讯新闻网站的评论页面，实现其静态布局，仅供练习参考。
vue3评论组件
web
05-01 7775
vue评论组件，🔥基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点。
Vue组件-评论区
qq_43618136的博客
03-14 1205
Vue组件-评论区 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-...
vue评论回复组件
热门推荐
bright的博客
12-15 1万+
vue评论回复组件 1.使用下面命令下载hbl-comment组件 npm i bright-comment 2、下载完成之后在项目中引入 import comment from 'bright-comment' components:{ comment }, 3、使用 <comment></comment> 4、如果没有下载element-ui的使用下面命令进行下载 npm i element-ui -S 5、下载完成后在main.js中引入 import Ele
vue项目封装评论组件
cczz66的博客
06-15 933
效果图： 评论组件：
使用Vue组件为页面添加评论
lty5240的博客
03-22 4445
简介 首先这是一个Laravel练手项目，使用blade和Vue组件混合开发Web页面。 本文章将使用Vue.js组件为博客详情页添加评论功能，主要实现以下功能： 文章页面可查看评论 用户可进行评论，并且不需要刷新视图 准备工作 首先新建好Vue组件：Comment.vue 并将它在入口（默认为app.js）进行注册： Vue.component('comments',require('./c...
vue2 封装的评论组件
小王的技术库
10-28 650
图十一：beginwork的结果图十二：beginwork的结果**总结**：`beginwork`在`mount`阶段，最重要的作用就是带着当前的`fiber`节点和子虚拟dom执行`reconcileChildren`，每次`reconcile`都会利用`子虚拟dom`来构建好这一层的`fiber链表`（包括`fiber节点之间的child, sibling, return关系`）。为大家准备了一个前端资料包。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值