vue教程2-07 微博评论功能

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<link href="style/weibo.css" rel="stylesheet" type="text/css" />

    <style>

        [v-cloak]{

            /*比较大的段落，防止闪烁，看到花括号*/

            display: none;

        }

    </style>

    <script src="../vue.js"></script>

    <script src="../vue-resource.js"></script>

    <script>

        Vue.filter('date',function(input){

            var oDate=new Date(input*1000);

            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();

        });

        window.onload=function(){

            var URL='weibo.php';

            new Vue({

                el:'.znsArea',

                data:{ //vue的属性、数据

                    t1:'',

                    msgData:[]

                },

                methods:{

                    add:function(){

                        //发送请求

                        this.$http({

                            url:URL,

                            data:{ //后台发送数据

                                act:'add',

                                content:this.t1

                            }

                        }).then(function(res){

                            var json=res.data;

                            //msgData添加数据

                            this.msgData.unshift({

                                content:this.t1,

                                time:json.time,

                                acc:0,

                                ref:0,

                                id:json.id

                            });

                            this.t1='';

                        });

                    },

                    getPageData:function(n){

                        this.$http({

                            url:URL,

                            data:{

                                act:'get',

                                page:n

                            }

                        }).then(function(res){

                            //console.log(res.data);

                            var arr=res.data;

                            console.log(arr);

                            for(var i=0; i<arr.length; i++){

                               this.msgData.push({

                                   content:arr[i].content,

                                   time:arr[i].time,

                                   acc:arr[i].acc,

                                   ref:arr[i].ref,

                                   id:arr[i].id

                               });

                            }

                        });

                    }

                },

                created:function(){

                   this.getPageData(1);

                }

            });

        };

    </script>

</head>

<body>

<div class="znsArea">

<!--留言-->

     <div class="takeComment">

        <textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="t1"></textarea>

        <div class="takeSbmComment">

            <input type="button" class="inputs" value="" @click="add" />

            <span>(可按 Enter 回复)</span>

        </div>

    </div>

<!--已留-->

    <div class="commentOn">

        <div class="noContent" v-show="msgData.length==0">暂无留言</div>

        <div class="messList">

            <div class="reply" v-for="item in msgData" v-cloak>

                <p class="replyContent">{{item.content}}</p>

                <p class="operation">

                    <span class="replyTime">{{item.time|date}}</span>

                    <span class="handle">

                        <a href="javascript:;" class="top">{{item.acc}}</a>

                        <a href="javascript:;" class="down_icon">{{item.ref}}</a>

                        <a href="javascript:;" class="cut">删除</a>

                    </span>

                </p>

            </div>

        </div>

        <div class="page">

            <a href="javascript:;" class="active">1</a>

            <a href="javascript:;">2</a>

            <a href="javascript:;">3</a>

        </div>

    </div>

</div>

</body>

</html>

vue教程2-07 微博评论功能的更多相关文章

  1. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue学习（5）-评论功能（利用父组件的方法）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 第 14 篇：交流的桥梁“评论功能”——HelloDjango 系列教程

    截止到目前为止我们的 django blog 文章展示部分,已经实现的"八九不离十"了.你以为本系列文章就要结束了吗?不能够!新的征程才刚刚开始,HelloDjango 系列文章刚 ...

  4. 如何科学地蹭热点：用python爬虫获取热门微博评论并进行情感分析

    前言:本文主要涉及知识点包括新浪微博爬虫.python对数据库的简单读写.简单的列表数据去重.简单的自然语言处理(snowNLP模块.机器学习).适合有一定编程基础,并对python有所了解的盆友阅读 ...

  5. VuePress 博客优化之增加 Vssue 评论功能

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  6. 微博评论箱的隐藏Bug解决

    最近给站点添加社交评论功能,即用微博.QQ帐号就可以在网站上评论.其中Sina微博评论箱在IE和Firefox有个Bug,就是如果初始页面中微博评论箱所在那一部分处于不可见状态,那么后面即使切换了显示 ...

  7. 如何通过Gitalk评论插件，5分钟为你的博客快速集成评论功能

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  8. 接入gitment为hexo添加评论功能

    title: 接入gitment为hexo添加评论功能 toc: false date: 2018-04-16 10:59:56 categories: methods tags: hexo gitm ...

  9. 一篇文章教会你使用Python定时抓取微博评论

    [Part1--理论篇] 试想一个问题,如果我们要抓取某个微博大V微博的评论数据,应该怎么实现呢?最简单的做法就是找到微博评论数据接口,然后通过改变参数来获取最新数据并保存.首先从微博api寻找抓取评 ...

随机推荐

  1. 更新源pip

    国内镜像源列表 豆瓣(douban) http://pypi.douban.com/simple/清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/阿里云 h ...

  2. C++STL 迭代器

    迭代器类别: 输入迭代器(只读迭代器).输出迭代器(只写迭代器).正向迭代器.双向迭代器.随机访问迭代器 逆向遍历 for(vector<int>::reverse_iterator ri ...

  3. IntelliJ IDEA 2017版 使用笔记(十一) Debug操作：IDEA 快捷键

    调试功能;            缩短项目时间,调高阅读源码的能力.   一.添加断点,选中一行代码,双击即可生成断点(快捷键:ctrl+F8)                二.单步运行,快捷键:s ...

  4. UVa 10294 Arif in Dhaka (First Love Part 2) (Polya定理)

    题意:给定 n 和 m 表示要制作一个项链和手镯,项链和手镯的区别就是手镯旋转和翻转都是相同的,而项链旋转都是相同的,而翻转是不同的,问你使用 n 个珠子和 m 种颜色可以制作多少种项链和手镯. 析: ...

  5. mysql 入门 jdbc

    在java程序中连接mysql,先要到mysql的网站上面去下载驱动,并且安装,默认安装在c盘(我的都是默认安装,目录为C:\Program Files\MySQL\MySQL Connector J ...

  6. mysql 存储过程 有数据修改 没数据插入

    BEGIN DECLARE sid INT(10) DEFAULT 0; DECLARE money INT(10) DEFAULT 0; DECLARE row_count INT; DECLARE ...

  7. linux安装源码jdk

    第一步: 传输jdk到服务器上可以用xhsell,也可以用ftp 第二步:解压文件 tar -xzvf jdk-7u80-linux-x64.tar.gz 第三步:配置环境变量 输入即可 注意:修改J ...

  8. 批处理FINDSTR正则表达式用法实例分析

    1.findstr . 2.txt 或 Findstr "." 2.txt 从文件2.txt中查找任意字符,不包括空字符或空行 2.findstr .* 2.txt 或 finds ...

  9. 队列<一>

    这里用的递归法,采用两种版本,一种是C语言,一种是C++:但是,用C语言没有“引用”,所以采用的是指向指针的指针:而C++具备“引用”,所以直接用&引用,简洁: 先看C++的代码: BiTre ...

  10. （转）在.NET程序运行过程中，什么是堆，什么是栈？什么情况下会在堆（栈）上分配数据？它们有性能上的区别吗？“结构”对象可能分配在堆上吗？什么情况下会发生，有什么需要注意的吗？

    转自:http://www.cnblogs.com/xiaoyao2011/archive/2011/09/09/2172427.html 在.NET程序运行过程中,什么是堆,什么是栈? 堆也就是托管 ...