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" con…

原文地址:用ES6的class模仿Vue写一个双向绑定点击在线尝试一下最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._compile() t…

用vue写一个仿简书的轮播图

原文地址:用vue写一个仿简书的轮播图先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.可以将轮播图看成两个,如图所示: 写好每个class的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $sWidth: $width - $bWidth; // 小图片宽度 $sHeigh…

用vue写一个仿app下拉刷新的组件

如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- <transition> <div class="refresh-wrapper" ref="refresh"> <div class="refresh-inner"> <div class="refr…

使用原生node写一个聊天室

在学习node的时候都会练习做一个聊天室的项目,主要使用socket.io模块和http模块.这里我们使用更加原始的方式去写一个在命令行聊天的聊天室. http模块,socket.io都是高度封装之后的模块,我们使用更加原始的net模块来做. socket 做聊天室,我们首先要了解一下socket,用百度百科上的定义:网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket对TCP/IP封装提供网络开发的接口,提供网络通信的接口.详细可以看看各种百科…

手写一个LRU工具类

LRU概述 LRU算法,即最近最少使用算法.其使用场景非常广泛,像我们日常用的手机的后台应用展示,软件的复制粘贴板等. 本文将基于算法思想手写一个具有LRU算法功能的Java工具类. 结构设计在插入数据时,需要能快速判断是否已有相同数据.为实现该目的,可以使用hash表结构. 同时根据LRU的规则,在对已有元素进行查找和修改操作后,该元素应该被置于首位:在增加元素时,如果超过了最大容量,则会淘汰末尾元素.为减少元素移动的时间复杂度,这里采用双端链表结构,使得移动元素到首位和删除末尾元素的时间复…

使用Vue写一个九九乘法表

Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 下面是在Vue 测试实例 - 菜鸟教程(runoob.com)使用Vue写的一个九九乘法表,还请多多指教! 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src=&quo…

[Vue]写一个简单的文件上传控件

这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传使用Element的uploader控件,上传文件的行为和样式不用自己全部实现,使代码简化.且有足够的扩展性,文件传输请求的代码可以基于axios完全自己重写.我们只用关心核心代码. 搭建项目框架首先建立一个空白的项目,引入Element控件库,具体的操作和使用Element控件库请看官方文档: 组件 | Elemen…

如何手写一个js工具库？同时发布到npm上

自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法于是就创建了一个名为learnjts的项目,在空余时间也写了几个工具函数,后续还会再继续增加... 这篇文章就是一篇实战文章,我把自己创建项目,发布到npm,以及遇到的问题和解决方案全都记录了下来,如果你也想创建一个自己的js工具库,可以根据这篇文章一步一步的尝试一下 github项目地址 npm项目地址创建项目打开命令窗口,创建一个项目文件 mkdi…

教你用Vue写一个开心消消乐

之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效果展示先在这里放一个最终实现的效果,还是一个比较初级的版本,大家有什么想法欢迎评论哦游戏规则: 初始时会给玩家十分的初始分,每拖动一次就减一分,每消除一个方块就加一分,直到最后分数为0游戏结束任意两个方块都可以拖动界面设计页面的布局比较简单,格子的数据是一个二维数组的形式,说到这里大家应该…

Vue学习—Vue写一个图片轮播组件

1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现,想法: 5.示例代码结构html: <template>…

用vue写一个分页器代码

分页是项目中常会用到的,网上的插件也很多,但是有些功能太齐全反而不是必要的,所以抽时间自己写了一下(小白写代码,若发现问题还请及时赐教,感激不尽……) 如图,想要一个这样的页码: a. 上一页.下一页固定展示 b. 第一页.最后一页固定展示 c. 中间,即:左右...之间需要展示的页码个数可自定义 d. 可任意选择页面展示数据条数一.不需要展示 ,只展示页码,需要定义3个变量:pageNum(当前页码).totalNum(总页码).middleSize(中间,即左右...之间需要展示的页码个…

在上线项目中，用Vue写一个星级评价

先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : srcNoStar" @click="imgItem(1)"> <img :src="imgNum>1 ? srcStar : srcNoStar" @click="imgItem(2)"> <img :src…

Golang之写一个聊天室

. 海量用户在线聊天系统 . 点对点聊天 . 用户登录&注册一.服务端开发 . 用户管理用户id:数字用户密码:字母数字组合用户昵称:用来显示用户性别:字符串用户头像:url 用户上线登录时间:字符串用户是否在线:online 数据存储:redis hash:users . 用户动作 . 发送信息 . 接收信息 . 用户注册&登录 . 用户消息离线存储二.客户端开发 . 用户注册 . 用户登录 . 发送信息 . 获取用户列表三.通信协议 [:]表示长度 []json…

使用Vue写一个登陆页面并在管理页面查看和修改

注册页面代码如下html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="css/register.css"> <link rel="stylesheet&q…

vue 写一个瀑布流插件

效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡新建 vue-water-easy.vue 组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(items,clos) in list" :key="clos" :style="waterStyle"…

vue 写一个炫酷的轮播图

效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-certify{ /*上下左右居中*/ height: 100%; width: 100%; .centerPosition { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transform:…

利用vue写一个复选框的组件

HTML <multicheck :source=tlist :busValue='objInfo.tt' @getTt="getTtInfo"></multicheck> data tlist:[ {value:'A',label:'1'}, {value:'B',label:'2'}, {value:'C',label:'3'}, {value:'D',label:'4'}, {value:'E',label:'5'} ] methods getTtInfo…

python 开发简单的聊天工具

python 太强大了,以至于它什么都可以做,哈哈,开个玩笑.但是今天要讲的真的是一个非常神奇的应用. 使用python写一个聊天工具其实大家平时用的QQ类似的聊天工具,也是使用socket进行聊天,只是它还包含了更加复杂的功能.基本原理是一样的. python实现聊天功能,主要用到了socket模块.下面直接上实例吧 server端 1 2 3 4 5 6 7 8 9 10 11 12 13 import socket s=socket.socket() #建立socket链接 s.bind…

python 开发简单的聊天工具-乾颐堂

android 开发写一个RecyclerView布局的聊天室，并且添加RecyclerView的点击事件

实现思维顺序: 1.首先我们需要准备2张.9的png图片(一张图片为左边聊天泡泡,一个图片为右边的聊天泡泡),可以使用draw9patch.bat工具制作,任何图片导入到drawable中. 2.需要写一个聊天室布局xml,布局由android.support.v7.widget.RecyclerView布局构成聊天信息列表布局,一个文本输入框作为信息输入,一个发送Button作为发送键. 3.需要写一个消息的子布局,用于显示RecyclerView布局中里的消息. 4.写一个保存数据的数据类,…

面试题：你能写一个Vue的双向数据绑定吗？

在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望能让大家有所收获. 1.原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例.为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-mod…

java中定义一个CloneUtil 工具类

其实所有的java对象都可以具备克隆能力,只是因为在基础类Object中被设定成了一个保留方法(protected),要想真正拥有克隆的能力, 就需要实现Cloneable接口,重写clone方法.通过克隆方法得到的对象是一个本地的副本. 1.实现Cloneable接口具体看代码: class User implements Cloneable{ int age; public User(int age){ //用this关键字不至于类成员变量与形参混淆 this.age=age; } //这…

[AST实战]从零开始写一个wepy转VUE的工具

为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要一些公共页面和功能,但新项目又有自己的独特点,这些页面需求重新开发成本很高,但如果把小程序代码转换成 VUE 就会容易的多,因此需要这样一个转换工具. 本文将通过实战带你体验 HTML.css.JavaScript 的 AST 解析和转换过程如果你看完觉得有用,请点个赞~ AST 概览 AST 全称是叫抽象…

用Socket做一个局域网聊天工具（转）

原文:http://www.cnblogs.com/technology/archive/2010/08/15/1799858.html 程序设计成为简单的服务端和客户端之间的通信, 但通过一些方法可以将这两者进行统一起来, 让服务端也成为客户端, 让客户端也成为服务端, 使它们之间可以互相随时不间断的通信. 考虑到实现最原始的服务端和客户端之间的通信所需要的步骤对于写这样的程序是很有帮助的. 作为服务端, 要声明一个Socket A并绑定(Bind)某一个IP+这个IP指定的通信端口, 比如这…