Web前端
文章平均质量分 74
BoBoAn0254
联系qq:2995014103
展开
-
Vue自定义指令实现弹出框可拖拽可放大缩小效果
##一、使用场景最近开发一个项目,有一个需求,实现弹出框可拖拽可放大缩小。翻阅vue2官方文档和问度娘,发现可以用vue的自定义指令实现,所以把挣个过程记录在这篇文章中,供其它小伙伴参考使用。##二、自定义指令基础知识当我们在开发过程中需要对普通DOM元素进行底层操作,这时候就会用到自定义指令。自定义指令的钩子函数及其参数,且看官方文档介绍:一个指令定义对象可以提供如下几个钩子函数(均为可选):bind:只调用...原创 2021-05-24 15:03:03 · 2255 阅读 · 0 评论 -
Vue+Element实时局部刷新表格某一行的样式和属性值(带源码)
使用场景分析,要求提交数据表中修改的某行数据,实时刷新该行数据的状态,该行的某条属性是根据条件渲染的。el-table部分:<el-table-column label="关联状态" width="100"> <template slot-scope="scope"> <el-tag :type="scope.row.status === 'true' ? 'success' : 'info'" ...原创 2020-05-28 16:46:08 · 7729 阅读 · 0 评论 -
Vue+Element中的表格根据属性值来渲染不同的样式
<el-table-column label="当前" prop="status"> <template slot-scope="scope"> <span :style="{ color: scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status === 1 ? '男' : '女' }}</span> </template>.原创 2020-05-25 16:51:34 · 2083 阅读 · 4 评论 -
拼接两个有相同属性值数组的实现
最近公司的项目需要对接合作单位的数据库里面的信息,再对接的过程中需要用到双重for循环,遇到好多坑,希望能给其他的小伙伴提供点思路和解决方案。 下边是两个数组,a数组中的对象有id和value两个键值,b数组中interid是绑定的a数组中的id值。我们现在想实现的功能是根据a数组的id值判断b数组interid值是否匹配,若匹配将该条数据写入到a数组的新的属性中,从而形成新的数组c。let a = [{id:"1",value:"aaa"},{id:"12",valu...原创 2020-05-22 17:21:03 · 519 阅读 · 0 评论 -
ES6中的class(二)
class类中的公有(public)和私有(private)字段声明是一个JavaScript标准委员会TC39提议的试验性功能 (第3阶段)。这项功能在浏览器中的支持还受限,但你可以通过Babel等构建系统来使用它。参见下面的兼容性信息。公有字段静态公有字段和实例公有字段都是可编辑的,可遍历的,可配置的。它们本身不同于私有对应值(private counterparts)的是,它们参与原...原创 2020-04-17 11:10:04 · 426 阅读 · 0 评论 -
ES6中的class(一)
ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。JavaScript中的类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。一,组成部分*本部分主要理解类的声明提升/类声明中的类型提升类声明定义一个类的一种方法是使用一个类声明。要声...原创 2020-04-17 11:08:57 · 273 阅读 · 0 评论 -
由浅到深vue源码(一、双向数据绑定原理)
#### 双向数据绑定的方式+发布-订阅者模式(backbone.js) 一般通过pub、sub的方式来实现数据和视图的绑定,但是使用起来比较麻烦+脏值检查(angular.js) angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图。类似于通过定时器轮训检测数据是否发生了改变。+数据劫持 vue.js 则是采用数据劫持结合发布者-订阅者模式的...原创 2020-03-03 10:50:44 · 296 阅读 · 0 评论 -
HTTP和AJAX(七、AJAX中的同步与异步)
******AJAX中的同步和异步>AJAX这个任务:发送请求接收到响应主体内容(完成一个完整的HTTP事务) >xhr.send():任务开始 >xhr.readytate===4:任务结束[同步编程] let xhr=new XMLHttpRequest(); xhr.open('get','temp.json',false); ...原创 2018-08-29 15:52:03 · 167 阅读 · 0 评论 -
HTTP和AJAX(六、JS中常用的编码解码方法)
***JS中常用的编码解码方法 >正常的编码解码(非加密) >1.escape/unescape,主要就是把中文汉字进行编码和解码的(一般只有JS语言支持:也经常 应用于前端页面通信时候的中文汉字编码) >也可以通过加密的方法进行编码解码 let str='波波安@BOBO ...原创 2018-08-29 15:51:24 · 319 阅读 · 0 评论 -
HTTP和AJAX(五、网络状态码和AJAX状态码)
**第三部分细节探究**''''javascript(以下为基于原生JS实现AJAX的第三步的具体解析) //=>监听AJAX状态的改变,获取响应信息(获取响应头信息、获取响应主体信息) xhr.onreadystatechange=()=>{ if(xhr.readyState===4&&am...原创 2018-08-29 15:50:45 · 1780 阅读 · 0 评论 -
HTTP和AJAX(四、实现AJAX)
####基于原生JS实现AJAX....Javascript(以下为实现的代码及注释)//=>创建一个AJAX对象let xhr=new XMLHttpRequest();//=>不兼容IE6及更低版本浏览器(IE6:ActiveXObject)//=>打开请求地址(可以理解为一些基础配置,但是并没有发送请求呢)xhr.open([method],[url],[as...原创 2018-08-29 15:47:47 · 231 阅读 · 0 评论 -
HTTP和AJAX(三、AJAX[局部刷新]简介)
网页客户端端获取服务器端数据的大致过程>1.首先根据客户端输入的域名,到DNS服务器上进行反解析(通过域名找到对应服务器的外网IP)>2.通过找到的外网IP,找到对应的服务器>3.通过在地址栏中输入的端口号(没输入是因为不同协议有自己默认端口号)找到服务器上发布的 对应的项目>4.服务器获取到请求资源文件的地址‘例如:/stu/index.html’,把资源...原创 2018-08-29 15:28:22 · 270 阅读 · 0 评论