- 博客(33)
- 收藏
- 关注
RSS订阅
原创 关于各类前端知识的整理，以及相关博客地址（持续更新）
看懂npm、yarn、pnpm之间的区别https://blog.csdn.net/qiansg123/article/details/80129453Vue实现组件信息的缓存https://blog.csdn.net/u014628388/article/details/76285659用proxy实现一个更优雅的vuehttps://juejin.im/post/...
2018-12-13 13:29:07
277
原创 更改公共组件样式
在日常的组件使用中，我们会用一些公共的ui组件库，虽然这些组件库的功能可能达到了我们的使用需求，但是大部分情况往往是组件样式不符合产品需求样式，这时候往往需要我们自写组件或使用组件提供的其他样式，但是还是会经常出现不能满足需求的情况本文章提供一个思路在普通的css中我们可以用>>>来做连接符改更改子组件的样式.csta >>> .el-cascad...
2019-07-11 13:35:43
1405
原创 使用vue-video-play直播hls视频流
这段时间需要写视频流的直播，期间使用过tlc插件（没成功），在查阅了相关资料后找到了vue-video-play插件使用npm安装npm install vue-video-player --savenpm install videojs-contrib-hlsnpm install videojs-contrib-hls.js在main.js中的调用import V...
2018-11-26 16:51:02
3998
7
原创 vue websoket的编写与应用
这段时间使用了一下websoket，抽出时间做个记录和总结注：js自带websoket，不需要引入本方法，通过按键触发，事件写在methods的方法中，通过按钮以及destroyed周期来关闭websocket的建立以及使用，JS（方法内代码，自定义方法包裹一下代码即可）如下let that = thislet wsuri = 'ws//192.168.1.1:8080:/ba...
2018-11-26 14:33:06
453
原创 webpack 代理配置 开发环境以及生产环境配置
最近在使用webpack的时候踩了很多的坑，查询了很多复制的文章，毫无营养没有帮助，在此做一些自己的理解和整理，希望对碰到和我一样情况的人有所帮助先讲一下代理是怎么设置的在webpack的文件夹config/index.js中，找到dev通过proxyTable来设置代理，以下为代码和注解proxyTable: { '/apis/*': { // 设置请求前增加...
2018-11-02 00:16:31
7832
2
原创 在vue-cli中使用axios请求 get与post
最近赶项目，没什么时间，目前抽出时间更新一下博客，在网上看到很多博客都是复制的，并不能解决问题，现在自己总结归纳了一些东西，在此做整理因为此项目使用的是的Webpack，以下的操作都是在的Webpack下进行的（的Webpack的安装和使用就略过了）首先我们需要项目的文件夹下使用npm安装axiosnpm安装axios接着在main.js中引入axios，并绑定在VUE实例的原...
2018-11-01 23:19:17
1813
原创 vue实现tab路由切换组件
使用vue自带的vue-router.js路由实现分页切换功能实现图片如下下列为实现代码css:*{ margin: 0; padding: 0; } #app ul{ width: 300px; height: 30px; ...
2018-08-15 20:29:04
14865
1
原创 vue父子之间通信
父元素改变时，实时改变子元素，子元素通过按钮改变父元素实际效果图如下：html:<!--父组件--><div id="app"> <table border="1" cellpadding="0" cellspacing="0"> <tr> &
2018-08-15 17:45:46
133
原创 vue组件之间通信（非父子之间通信）
视图如下：单击点击后：下列为实现代码：html:<dvi id="app"> <brother></brother> <hr> <sbrother></sbrother></dvi><template id="bro
2018-08-15 15:46:09
143
原创 Vue组件模板
本文章主要介绍组件模板的书写方式以下为实现页面效果以下为html代码和js代码的集合<body><div id="app"> <!--使用外部模板--> <v-com></v-com> <!--使用js内部模板--> <v-header>&am
2018-08-15 11:53:57
688
转载 jq获取上级、同级、下级元素
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，...
2018-08-08 20:52:32
7604
原创 关于jQuery和js的区别
jq的预加载？ ①页面加载完之前执行，与嵌入的js加载方式一样(写jquery插件的时候使用)(function ($) { alert('start');})(jQuery);②页面加载后执行。$(document).ready(function(){ alert('jquery ready');});③页面加载后执行。$(functi...
2018-08-01 11:28:53
398
原创 js对象轮播插件
以下为页面实现效果以下为html代码<div id="banner" class="banner"> <ul> <li style="background-color: pink"></li> <li style="background-color: aqua&
2018-07-24 19:04:14
130
原创 JavaScript ES6新特性
一、默认参数原来的书写var obj=function(name,age,color){ name=name||xiaoming; age=age||18 color=color||red}新的书写方法var obj=function(name="xiaoming",age=18,color="red")二、模板表达式...
2018-07-19 22:35:36
350
原创 ajax兼容ie低版本
//制作一个方法function myajax(method,ajHtml,ajText,fn) { //创建一个新的对象用于存储ajax let xhr=null; //判断浏览器中有没有XMLHttpRequest对象，如果没有，就调用ie的对象赋值 if (window.XMLHttpRequest){ xhr=new XMLHttpRequ...
2018-07-12 21:32:12
1527
原创 图片瀑布流布局
具体效果如下图html如下图所示<div> <ul></ul> <ul></ul> <ul></ul> <ul></ul> <ul></ul></d
2018-07-10 22:36:56
3162
原创 ajax兼容，同时输出省份选择(二级联动)
运行结果如下图单击上图的省份，下方打印省份html代码如下图<div id="province"></div><div id="city"></div>css代码如下图*{ margin: 0; padding: 0;}div{ width: 100%; padding: 10px;}div>a{
2018-07-09 22:32:17
214
原创 cookie的添加，删除，以及使用
下图为简单的网页界面通过添加cookie的名字，值，属性来设置cookie通过输入cookie的名字来打印cookie的值通过输入要删除cookie的名字来删除cookie以下为html<input id="cookiename" type="text" placeholder="cookie名字"><br/><input id="cookiezhi" ty
2018-07-08 22:41:24
4241
原创 简易登录以及注册界面制作
以下为登录和注册页面的图片登录：注册：先介绍登录页面以下为登录的html<input id="username" type="text" placeholder="请输入用户名"><input id="password" type="password" placeholder="请输入密码"><br/><br/&g...
2018-07-06 09:50:03
11737
原创 window对象，navigator对象，document文档对象，以及window下的其他对象
Window对象属性innerHeight 返回窗口的文档显示区的高度innerWidth 返回窗口的文档显示区的宽度outerHeight ...
2018-07-04 20:24:36
491
原创 导航栏上下滚动效果
以下为HTML代码<div class="banner"> <ul> <li style="background-color: pink"></li> <li style="background-color: aqua"></li>
2018-07-03 20:13:14
1077
原创 图片放大镜效果
实现效果如下图所示以下为HTML代码<div id="img1"> <img src="img/b7003af33a87e95053e42ae21c385343faf2b449.jpg"> <span></span></div><div id="img2">
2018-07-03 19:55:28
1721
原创 js实现同页面简易聊天框效果
如图为最后成品效果，下图为输入效果同时实现了在输入框中使用回车可以打印的效果具体js代码如下图let otext=document.getElementsByClassName("textInput"); //找到两个输入文本框let contBar=document.getElementsByClassName("contentBar"); //找到两个输出文本框l...
2018-07-01 19:49:52
6930
原创 实现键盘点击操作页面元素滑动
let div1=document.getElementsByTagName("div")[0]; //选取要操作的元素let oTop=false,oLeft=false,oRight=false,oButton=false; //添加四个开关来操作上下左右的实现window.onkeydown=function () { //当键盘上的方向键被按下时，将开关...
2018-06-28 21:17:21
1916
原创 基于dom来制作使用json数据类型的简易购物车
实现的网页样式使用的JSONvar json = [ // 两个店铺 { "shopname": "京东自营", "shopID": 101, // 商品 "goods": [ { "checked": false, "goodN.
2018-06-27 19:19:32
467
原创 基于dom操作的简易商品栏练习
通过单击添加增加订单来实现添加新的商品，删除可以删除当前行，点击修改可以更改此行的商品名称、数量、单价。window.onload=function () { let oIp=document.getElementById("oIp"); let tBo=document.getElementById("tBo"); oIp.onclick=tsst; tsst(); function tsst(...
2018-06-26 17:50:21
371
原创 原生js通过封装代码，使IE8支持getElementsByClassName
通过获取标签，在判断每个标签的class有没有内容，然后判断class和输入的classText，来获得有这个classText的标签。let dsafjaj=getClassNames("dsafjaj");function getClassNames(classText) { if (document.getElementsByClassName){ return d...
2018-06-25 20:11:23
133
原创 DOM的基本概念
文档对象模型（Document Object Model，简称DOM）获取节点getElementById 由id来进行获取语法：node.getElementById("id"); getElementsByClassName 由class获取 语法：node. getElementsBy...
2018-06-25 00:22:08
458
原创 原生js实现倒计时和当前时间打印
实现了目前时间到2018年6月20日十点的倒计时以及当前时间的打印输出。<body><h2>剩余时间</h2><p></p><p></p><script> window.onload=function () { function myTime() {
2018-06-20 20:18:31
618
原创 JS关于字符串操作的具体参数
声明字符串有两种方法var str1="string1"var srr2=new String("string2")注释：str1是字符串，类型是string,而str2是对象string的引用，类型是对象，如果引用被修改，str2也会被修改。charAt(x) 返回指定位置的字符注释：字符串中第一个字符的下标是 0。...
2018-06-17 20:23:47
593
原创 js简易深拷贝json
var tuta=[{ "name":"linming", "age":"34", "height":"160cm", "friends":[{ "name":"xiaohong", "age":"12", &q
2018-06-14 19:14:49
2483
原创 原生js实现抽奖效果
本人为初学者，写的不好的请不要见怪目的是用节简的代码来实现抽奖效果下图为基本的布局通过点击GO按钮可以实现滚动，可连续点击。以下为代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&a
2018-06-13 19:33:57
1888
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人