前端

关于Vue和VueComponent 一个重要的内置关系:VueComponent.prototype.proto===vue.prototype 一个重要的内置关系 为什么要有这个关系？ 让组件实例对象(vc)可以访间到Vue原型上的属性、方法. ref属性 1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">.....</h1>或<School ref="xxx"></School> 获取:this.$refs.xxx 配置项props 功能: 让组件接收外部传过来的数据 (1).传递数据: <Demo name="xxx"/> (2).接收数据: 第一种方式(只接收): props:['name'] 第二种方式(限制类型): props:{ name:String } 第三种方式(限制类型、限制必要性、指定默认值): 1 2 3 4 5 6 7 props:{ name:{ type:String,//类型限制 required:true,//必要性 default:"JQF"//默认值 } } 备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告, 若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据. mixin(混入) 功能: 可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步：定义混合 1 2 3 4 5 6 const mixData={ data(){....

背景 在为 ACMUSIC（网易云第三方客户端）的私人FM模块添加镜面倒影效果时，遇到了一个有趣的技术挑战：镜面倒影明明 DOM 结构正确、transform 也没问题，但就是不可见。这篇文章记录了排查过程和最终的解决方案。 1. 三层结构设计 倒影系统采用三层嵌套结构： .fm-card-wrapper（3D 变换容器） ├─ .fm-card（封面卡片，340×340, border-radius 28px） └─ .fm-reflection-plane（倒影裁剪平面） └─ .fm-reflection（倒影元素，scaleY(-1) 翻转） └─ img（封面图片，340×340） 关键设计思路： plane：position 在卡片正下方，overflow: hidden + border-radius: 28px 负责裁剪倒影可见区域和圆角 reflection：position 在 plane 内部，通过 transform: scaleY(-1) 实现垂直镜像 img：复用封面图片，object-fit: cover 填充 2. 核心 CSS 2.1 Plane——裁剪平面 1 2 3 4 5 6 7 8 9 10 11 12 .fm-reflection-plane { position: absolute; left: 0; top: 100%; // 紧贴卡片底部 width: 100%; height: 410px; // 关键：高度要足够大 overflow: hidden; // 裁剪可见区域 pointer-events: none; border-radius: 28px; // 与卡片圆角一致 // 真正的可见高度由 clip-path 控制 clip-path: inset(0 0 300px 0); // 顶部 110px 可见 } 2....

Vue中支持的事件 资源事件 事件名称 何时触发 error 资源加载失败时。 abort 正在加载资源已经被中止时。 load 资源及其相关资源已完成加载。 beforeunload window，document 及其资源即将被卸载。 unload 文档或一个依赖资源正在被卸载。 网络事件 事件名称 何时触发 online 浏览器已获得网络访问。 offline 浏览器已失去网络访问。 焦点事件 事件名称 何时触发 focus 元素获得焦点（不会冒泡）。 blur 元素失去焦点（不会冒泡）。 WebSocket 事件 事件名称 何时触发 open WebSocket 连接已建立。 message 通过 WebSocket 接收到一条消息。 error WebSocket 连接异常被关闭（比如有些数据无法发送）。 close WebSocket 连接已关闭。 会话历史事件 事件名称 何时触发 pagehide A session history entry is being traversed from....

重定向后页面回退反复跳转bug 问题 在网易云项目时，由于Api所返回数据的问题，在Video搜索界面出现Mv的结果，这样就导致当点击的视频为Mv时，无法在Video页面利用传入的id参数渲染Video 问题图示 解决办法 想到利用判断，在得到MV之后跳转到MV播放界面，也即重定向redirect： 1 2 3 4 5 6 this.$router.push({ name: 'MvPlay', query: { id: this.id, } }) 但是，这就出现了页面回退之后又前进这样反复的BUG，于是想到replace，修改为： 1 2 3 4 5 6 this.$router.replace({ name: 'MvPlay', query: { id: this.id, } }) 这样，在Video页面重定向到Mv页面后，不会留下在Video页面的历史，所以就不会出现上面的BUG了！

在网易云项目时，在歌手详情页点击相似的歌手跳转到query参数不同的另一个歌手详情页时，出现地址栏query参数变化，而页面却没有实时更新的现象，经过搜索找到以下解决方案： 方案一：watch监听路由 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 watch: { // 方法1 //监听路由是否变化 '$route' (to, from) { if(to.query.id !== from.query.id){ this.id = to.query.id; this.init();//重新加载数据 } } } //方法 2 设置路径变化时的处理函数 watch: { '$route': { handler: 'init', immediate: true } } 方案二：给router-view添加一个不同的key 给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。 1 <router-view :key="$route.fullpath"></router-view> 小洁🙎🏼‍♀️ 抽象问题描述：同一path的页面跳转时路由参数变化，但是组件没有对应的更新。 实际原因：主要是因为获取参数写在了created或者mounted路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。

用vue.js写成的页面中，可能出现由于外部请求导致的页面展示阻塞现象，进而导致模板语法{{xxx}}直接展示在页面上，这其实跟页面加载的流程有关，整个页面加载的流程是： 解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造HTML DOM模型 -> 加载图片等外部文件 -> 页面加载完毕 所以，当HTML加载的时候，就会把{{}} 当成文本加载出来，只有当vue初始化完成后，才会把{{}}解析成vue的语法。 遇到这种情况有以下几种解决方案： 方案一(不推荐)：在head里面加入引入vue的script标签 如果把引入vue的script放到head里面，那页面就不会出现{{}}，因为在body之前，vue就已经引入进并且加载完成了。 方案二：v-text|v-html 使用v-text插入文字，使用v-html插入HTML结构，替换原本使用的模板语法{{xxx}} 方案三：template 使用<template>标签包裹要渲染的HTML结构，那么只有vue解析时才会展示出该结构 方案四：v-cloak指令 + CSS样式 标签上的v-cloak属性在被vue解析到时会自动去掉，那么我们可以利用CSS的属性选择器，给有v-cloak属性的元素设置display:none样式，那么，在加载HTML时自然不会显示{{xxx}}，而在vue解析时又会显示出来，问题得以解决！

webStorage 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 相关API: xxxStorage.setItem('key','value'); 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 xxxStorage.getItem('key'); 该方法接受一个键名作为参数，返回键名对应的值。 xxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。 xxxStorage.clear(); 该方法会清空存储中的所有数据。 备注: SessionStorage存储的内容会随着浏览器窗口关闭而消失。 LocalStorage存储的内容，需要手动清除才会消失。 xxxStorage.getItem('key');如果key对应的value获取不到，那么getItem的返回值是null。 可以通过JSON.stringify()存储对象，通过JSON.parse()解析对象，JSON.parse(null)的结果仍然是null。

1.vue会监视data中所有层次的数据. vue对于配置在data中的所有对象都会以key值作为目标进行监视，不论多少层，都会递归地为每一个key配置getter和setter(通过Object.defineProperty())。 相关阅读 MDN关于defineProperty的说明 2.如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据，即在data中提前配置。 (1).对象中后追加的属性,Vue默认不做响应式处理 直接通过修改vm._data或者vm来添加key，并不会配置getter和setter，因此不会做响应式 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,key/index,value)或vm.$set(target,key/index,value)（可以同时修改数组和对象） ​ 特别注意: Vue.set()和vm.$set()不能直接给vm或vm的根数据对象(vm._data)添加属性!!! 3.如何监测数组中的数据? 在数组中直接通过索引的方式修改数组并不会引起Vue的响应，那么要如何做呢？Vue通过包裹数组更新元素的方法(对原数组方法进行修改)实现,本质就是做了两件事: (1). 调用原生对应的方法对数组进行更新. (2). 重新解析模板,进而更新页面. 就包裹了下面的七种数组方法： push() pop() shift() unshift() splice() sort() reverse() 也就是说，通过上面七种方法修改数组，会让Vue做出响应。 例如想要修改数组中索引为0的位置的数据，可以通过 vm.data.arr.splice(0,0,val)或Vue.set(vm.data.arr,0,val)又或者vm.$set(vm.data.arr,0,val)，在具体的由Vue管理的方法中this指向的应该就是vm！！ 数据劫持 Vue通过setter,getter对数据进行动态监测，其实就是“劫持”了数据😯

在浏览网页时无意中发现了下面这种背景互动的效果： GIF动画演示 通过一番周折，最终找到以下实现代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 function randomLine() { function n(n, e, t) { return n.getAttribute(e) || t } function e(n) { return document.getElementsByTagName(n) } function t() { var t = e("script"), o = t....

利用php中的GD库可以完成验证码类的开发。后盾人教程 PHP创建图像步骤 发送HTTP头信息，声明内容为图像 1 2 3 header('Content-type:image/gif'); header('Content-type:image/jpeg'); header('Content-type:image/png'); 通过设置头信息让浏览器渲染出图像，而不是HTML等其他类型 创建画布 1 imageCreateTrueColor(width,height); width & height 画布宽高，即为输出图片的尺寸,返回为source 类型，后续操作都是针对这个资源展开。 创建绘图所需要的颜色 1 imageColorAllocate(img_resource,R,G,B); 颜色从属于创建画布产生的图像资源而存在，后面三个值分别为红绿蓝三个通道的值，为int类型,在0—255之间。 绘图（填充画布、画圆、画方块、画线条、画布上写字） 👉 填充画布(画布背景) 1 imageFill(img_resource,x,y,color); 👉 画圆 1 2 3 4 //绘制空心圆形 imageEllipse(img_res,x,y,w,h,color); //绘制填充好的实心圆 imageFilledEllipse(img_res,x,y,w,h,color); 绘制 圆心(x,y) 宽 x，高 h，的圆 👉 画方 1 2 3 4 //空心矩形 imageRectangle(img_res,x1,y1,x2,y2,color); //实心矩形 imageFilledRectangle (img_res,x1,y1,x2,y2,color); (x1,y1)为左上角坐标， (x2,y2)为右下角坐标...