web component学习使用 #WebComponentsWebComponents是一套原生的,允许我们自定义一套可重用有相应功能的元素的组件。利用它,可以实现类似vue组件的可复用模块。缺点:兼容不好相关知识:1.CustomElement:自定义元素```customElements```的通过```define```方法来自定义元素-接受两个参数-第一个参数,自定义元素名-第二个元素,自定义元素的模板对象-例子:customElement...
通过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...
js手写一个自己的滚动条 1.滚动条出现的原因是元素里面的内容超出元素本身的大小元素的所有子元素的高度和= 元素滚动条可滚动的距离 + 元素可见大小2.通过元素获取到元素内部子元素的高度和和元素可见高度,可求得元素滚动条可滚动的距离3.通过监听元素的scroll事件获取元素滚动条的滚动距离,求得当前滚动距离占可滚动位置的百分比当前滚动条滚动的距离 / 元素可滚动的距离4.(再用元素可见高度 乘 滚...
ES6学习之Map 在es5之前,js对象的属性名只能是字符串。在es6提供了map数据结构,来打破这个限制,让除了字符串之外,让对象等也可以成为属性名。创建一个map结构let map = new Map()往map里面增加成员,通过map方法,也可以直接在创建结构的时候直接添加成员,参数为数组,每个数组里面的子项也是数组,子数组有两个孙子元素let map = new Map()l...
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(...
ES6之class学习 es6提供了创建对象的一个新写法class MyObj {}大致相当于function MyObj{}class中constructor相当于对象的初始化定义class Parent { constructor(x, y){ this.x = x this.y = y }}class通过extends进行继承cl...
工作中关于vue的transition动画过渡的一个问题总结 在公司的项目中,有一个列表页切换的需求需求: 进来,默认展示列表一,点击button2,列表一向左移出屏幕外,然后列表二向左移动,占据屏幕。 点击button1,则相反。<div> <button class="button1">待完成</button> <button class="button2">...
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...
利用formData上传input选中的文件 <input id="my_text" type="file" accept="image/*" multiple>accept属性来规定上传文件类型multiple属性允许上传多个文件如何获取input选中的文件流?第一:获取input标签let input = document.getElementById('my_input')第二:通过files属性获取...
记录一次vue项目,局部引入外部插件 首先将你需要的插件从gitHub上下载下来,然后放在component组件目录下,然后找到src下相应vue组件文件目录结构如下:引入组件之后,跟平常的vue组件一样注册使用就好了...
关于vue组件内部导航守卫的一个记录 beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例...
关于vue使用axios二次获取到数据后,页面数据没有发生变化 最近用在做项目的时候,使用axios第一次获取到数据,可以成功渲染出来,数据发生变化,再次获取数据的时候,页面没有像想象中那样相应的重新渲染,不知道是不是因为数据层次太多,render函数没有自动更新,所以手动强制更新tagManager.upDownTag(this.selectList, 'down').then(() => { tagManager.getTagList(t...
关于vue使用axios二次获取到数据后,页面数据没有发生变化 最近用在做项目的时候,使用axios第一次获取到数据,可以成功渲染出来,数据发生变化,再次获取数据的时候,页面没有像想象中那样相应的重新渲染,不知道是不是因为数据层次太多,render函数没有自动更新,所以手动强制更新tagManager.upDownTag(this.selectList, 'down').then(() => { tagManager.getTagList(t...
关于使用vue-html5-editor,富文本插件,icon图标不显示的一个记录 最近项目中用到了vue-html5-eidtor富文本插件,但是功能是实现了,但是icon图标无法正常显示 首先,已经确定正常引入和全局注册了vue-html-editor插件 富文本框能正常显示,但是功能的icon图标无法显示,然后通过查找,发现是font-awesome控制着插件icon图标的显示,然后安装font-awesomeicon图标还是不...
学习记录:关于通过使用express,设置reffer和host获取qq音乐数据 因为qq音乐歌手信息的获取,设置了reffer(设置了url的来源)和host(决定了虚拟机上的哪个站点),所以通过使用express配置路由,通过axios来获取数据,将数据返回给前端请求的路由地址在webpack.dev.conf.js的before方法中配置路由地址//这里app.get('/getData', function (req, res) { var...
学习记录:在构建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 ? '?'...
学习记录:js阻止默认事件,和事件冒泡 html中某些标签,点击的时候,会执行默认的行为,比如a标签,a标签被点击的时候,就会跳转到href中的地址 给dom对象绑定事件的方式,有两种第一种:(Dom0) obj.onclick = fn第二种: (Dom2)ie浏览器: obj.attachEvent(事件名称,fn)特点:非标准ie下没有捕获(ie6-ie10有捕获)事件名称有onthi...
原生js封装jsonp函数,调用百度搜索接口 <!doctype html><html><head> <meta charset="utf-8"> <title>jsonp封装</title></head><body> <input type="text
Jquery原理学习笔记 jquery本质上是一个闭包(function myJquery (window, undefined){// 调用的时候创建一个myJquery的对象实例 var myJquery = function () { return new myJquery.prototype.init()}// 定义对象属性和扩展方法myJquery.prototype...
css学习之创建半透明边框,多层边框,条纹背景 1.创建半透明边框说到创建半透明边框,我第一反应就是border: 10px solid hsla(0,0,100%, 0.5); 得到的图像是这样的,我的目的是让透明边框将背景绿色部分显示可以添加一个属性border: 10px solid hsla(0,0,100%, 0.5);background-clip: padding-box,将子图层的背景限制在内...