HamsterKnight-CSDN博客

原创 web component学习使用

#WebComponentsWebComponents是一套原生的，允许我们自定义一套可重用有相应功能的元素的组件。利用它，可以实现类似vue组件的可复用模块。缺点：兼容不好相关知识：1.CustomElement:自定义元素```customElements```的通过```define```方法来自定义元素-接受两个参数-第一个参数,自定义元素名-第二个元素,自定义元素的模板对象-例子：customElement...

2021-08-11 11:28:03 290

原创通过vue.extend实现一个弹窗组件

1.首先编写需要被继承的弹窗组件<template> <div v-if="show" ref="modal" class="ek-modal_wrap"> <div class="ek-modal-content"> <div class="modal-title-wrap"> <div clas...

2020-01-15 17:27:08 813

原创 js手写一个自己的滚动条

1.滚动条出现的原因是元素里面的内容超出元素本身的大小元素的所有子元素的高度和= 元素滚动条可滚动的距离 + 元素可见大小2.通过元素获取到元素内部子元素的高度和和元素可见高度，可求得元素滚动条可滚动的距离3.通过监听元素的scroll事件获取元素滚动条的滚动距离，求得当前滚动距离占可滚动位置的百分比当前滚动条滚动的距离 / 元素可滚动的距离4.（再用元素可见高度乘滚...

2019-08-12 17:05:15 1788 2

原创 ES6学习之Map

在es5之前，js对象的属性名只能是字符串。在es6提供了map数据结构,来打破这个限制，让除了字符串之外，让对象等也可以成为属性名。创建一个map结构let map = new Map()往map里面增加成员，通过map方法，也可以直接在创建结构的时候直接添加成员，参数为数组，每个数组里面的子项也是数组，子数组有两个孙子元素let map = new Map()l...

2019-07-24 18:54:09 183

原创 ES6学习之set

set是ES6新提供的一个数据结构，跟集合差不多，里面的每个值都是唯一的。Set本身就是一个构造函数，可以直接通过new方法创建set结构let s = new Set()增 s.add(1) 删 s.delete(1) 查 s.has(1) 清除所有 s.clear()通过add方法，添加数据项let s = new Set()s.add(1)s.add(...

2019-07-19 17:42:58 137

原创 ES6之class学习

es6提供了创建对象的一个新写法class MyObj {}大致相当于function MyObj{}class中constructor相当于对象的初始化定义class Parent { constructor(x, y){ this.x = x this.y = y }}class通过extends进行继承cl...

2019-07-19 15:12:57 134

原创工作中关于vue的transition动画过渡的一个问题总结

在公司的项目中，有一个列表页切换的需求需求：进来，默认展示列表一，点击button2，列表一向左移出屏幕外，然后列表二向左移动，占据屏幕。点击button1，则相反。<div> <button class="button1">待完成</button> <button class="button2"&gt...

2019-06-27 16:25:37 2160

原创 create-react-app创建react项目骨架，配置路径别名与antd的按需加载

第一步下载react-app-rewired和customize-cranpm i react-app rewired customize-cra -D第二步下载 babel-plugin-importnpm i add babel-plugin-import -D第三步修改package.json里的配置"scripts": { "start": "react-app-r...

2019-04-11 22:22:45 4548 1

原创利用formData上传input选中的文件

<input id="my_text" type="file" accept="image/*" multiple>accept属性来规定上传文件类型multiple属性允许上传多个文件如何获取input选中的文件流？第一：获取input标签let input = document.getElementById('my_input')第二：通过files属性获取...

2019-01-30 15:57:30 432

原创记录一次vue项目，局部引入外部插件

首先将你需要的插件从gitHub上下载下来，然后放在component组件目录下，然后找到src下相应vue组件文件目录结构如下：引入组件之后，跟平常的vue组件一样注册使用就好了...

2019-01-18 15:59:34 2408

原创关于vue组件内部导航守卫的一个记录

beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例...

2018-12-18 17:30:55 396

原创关于vue使用axios二次获取到数据后，页面数据没有发生变化

最近用在做项目的时候，使用axios第一次获取到数据，可以成功渲染出来，数据发生变化，再次获取数据的时候，页面没有像想象中那样相应的重新渲染，不知道是不是因为数据层次太多，render函数没有自动更新，所以手动强制更新tagManager.upDownTag(this.selectList, 'down').then(() => { tagManager.getTagList(t...

2018-11-26 16:30:27 3222 5

原创关于使用vue-html5-editor,富文本插件，icon图标不显示的一个记录

最近项目中用到了vue-html5-eidtor富文本插件，但是功能是实现了，但是icon图标无法正常显示首先，已经确定正常引入和全局注册了vue-html-editor插件富文本框能正常显示，但是功能的icon图标无法显示，然后通过查找，发现是font-awesome控制着插件icon图标的显示，然后安装font-awesomeicon图标还是不...

2018-11-11 22:56:27 3028

原创学习记录：关于通过使用express，设置reffer和host获取qq音乐数据

因为qq音乐歌手信息的获取，设置了reffer（设置了url的来源）和host(决定了虚拟机上的哪个站点)，所以通过使用express配置路由，通过axios来获取数据，将数据返回给前端请求的路由地址在webpack.dev.conf.js的before方法中配置路由地址//这里app.get('/getData', function (req, res) { var...

2018-10-12 10:33:57 1536

原创学习记录：在构建vue项目中利用jsonp 模块和Promise对象,封装自己的jsonp函数

安装jsonp 模块npm install jsonp引入jsonp函数import myJsonp from jsonpexport defalut function Jsonp (url ,data , option) // data为传入的参数对象，option就是原jsonp模板的opts{ url + = (url.indexOf('?')<0 ? '?'...

2018-10-10 17:02:16 608

原创学习记录：js阻止默认事件，和事件冒泡

html中某些标签，点击的时候，会执行默认的行为，比如a标签，a标签被点击的时候，就会跳转到href中的地址给dom对象绑定事件的方式，有两种第一种：(Dom0) obj.onclick = fn第二种： (Dom2)ie浏览器: obj.attachEvent(事件名称，fn)特点：非标准ie下没有捕获（ie6-ie10有捕获）事件名称有onthi...

2018-10-10 10:54:07 161

原创原生js封装jsonp函数，调用百度搜索接口

<!doctype html><html><head> <meta charset="utf-8"> <title>jsonp封装</title></head><body> <input type="text

2018-09-27 23:32:34 586

原创 Jquery原理学习笔记

jquery本质上是一个闭包（function myJquery (window, undefined){// 调用的时候创建一个myJquery的对象实例 var myJquery = function () { return new myJquery.prototype.init()}// 定义对象属性和扩展方法myJquery.prototype...

2018-08-19 20:41:24 190

原创 css学习之创建半透明边框,多层边框，条纹背景

1.创建半透明边框说到创建半透明边框，我第一反应就是border: 10px solid hsla(0,0,100%, 0.5)；得到的图像是这样的，我的目的是让透明边框将背景绿色部分显示可以添加一个属性border: 10px solid hsla(0,0,100%, 0.5)；background-clip: padding-box,将子图层的背景限制在内...

2018-08-07 23:13:13 518

原创 vue-music笔记之歌手列表左右两栏联动学习记录

better-scroll实现左右两栏联动首先对两栏进行基本样式的布局给右侧字母栏，添加监听事件onShortcutTouchStart,首先传入一个事件参数，利用getData方法获取当前点击元素data-index的值getData (el, name, val) { let prefix = 'data-' name = prefix + name if (val) ...

2018-07-26 22:54:38 461

原创 javascript之this绑定规则学习

This的指向（this是一个记录着一个函数执行上下文的属性）默认绑定在无法应用其他规则时，this应用默认绑定，this指向全局对象在严格模式下（this绑定到undefined）隐式绑定当函数应用有上下文的对象时，隐式绑定规则会把当前this绑定到这个上下文对象例如foo() {console.log(this.a)}var obj2 = {...

2018-07-26 16:56:46 238

原创 es6入门笔记之promise

ES6之Promisepromise是异步编程的一个解决方案Promise是一个容器，保存着未来才会结束的事件Promise对象对象状态不受外界影响三种状态：pending（进行中），fulfilled(已成功)，rejected(已失败)当前的状态由操作结果决定，其他操作无法影响这个状态Promise对象的状态改变，只有两种可能：从pending变为fulfilled...

2018-07-24 22:52:52 190

原创返回结果的HTTP状态码

2xx 相应结果表明请求被正确处理了200 ok 代表客户端发来的请求在服务器端被正确处理了比如使用GET 方法时，对应请求资源的实体会被作为相应返回204 No Content代表服务器接收的请求已成功处理，但是返回的响应报文中不含实体的主体部分206 Partial Content 客户端进行了范围请求，服务器端成功执行了这部分的GET请求 3XX 表明浏览器...

2018-07-23 23:09:45 333

原创 vue学习笔记之饿了么引入icon字体文件出错

在学习vue饿了么demo过程中，引入icon字体文件时，出现modules没被找到的错误，从错误来看应该是文件路径不对，但是如下图所示icon字体文件已经使用了相对路径文件目录结构如下但运行还是报错。解决办法一、使用绝对路径二、在webpack.base.conf.js配置文件中找到加载字体的模块看到加载方式是‘url-loader’,应该loader是加载方式吧，不是很清楚，尝试着将url改为...

2018-06-16 08:39:07 1267

原创学习笔记---------vue-cli新版缺少dev-sever.js和dev-client.js，被webpack.dev.conf.js替换

关于饿了么，使用新版vue-cli来mock数据，遇到的问题，vue-cli新版缺少dev-sever.js和dev-client.js。在vue-cli中mock数据时，在旧版本的vue-cli中是在build目录下dev-sever.js中添加数据接口在新版的vue-cli中dev-sever.js和dev-client.js被webpack.dev.conf.js替代在定义变量的区域添加以下...

2018-06-12 00:27:28 1015 1

原创小白JS学习笔记之数组(二)

数组Array.isArray(value):判断是不是数组的方法举例：var List = ['aa','bb'];console.log(Array.isArray(List))//true; 数组转换成字符串将数组转换成字符串的三大方法：toString(),toLocalString(),valueOf()var color = ['red','blue','g...

2018-05-14 16:41:59 163

原创 js小白学习路之js数组(一)

学习笔记：js数组操作改变原数组的操作一、对数组进行更新或删除var arr= [ 'red','green','blue']; pop() arrr.pop()//blue 取出数组最后一项 push() arr.push('black')// 4 将数据项添加到数组末尾,返回新数组的长度shift() arr.shif...

2018-05-14 15:35:37 273

原创流程控制语句switch，with语句

swithswitch的兄弟语句的if语句，根据传入的参数进行流程控制，参数可以字符串或者其它不是常量的值举例switch(str){case "hello": console.log("hello"); break；//跳出当前switch语句，如果没有break则继续往下执行case 10: console.log(10); break;default: ...

2018-05-14 15:33:01 1593

原创小白JS学习笔记之字符串处理

字符方法：chatAt()和chatCodeAt()chatAt()和chatCodeAt()都可以传入一个参数chatAt(str)：返回指定字符的位置chatCodeAt(index)：传入子字符的位置，返回子字符串的Unicode编码，用途：可以用来判断字符串中的字符是字母还是汉字如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN字符串还可以同构方括...

2018-05-13 15:05:08 386

HamsterKnight的博客