Javascript

  • vue动态绑定图标的完整步骤

    0 图标和图片的不同 图标时字符,图片时二进制流。即图片加载会比图标慢,且加载图标最好不要用img标签,我们可以把图标当成组件用import的方法引入进来,然后当成标签引入。 1 安装svg 1.使用管理员身份运行cmd窗口,切换到项目目录下执行。 npm add svg 2 从图标库下载图标 1.阿里图标库 https://www.iconfont.cn/ 2.下载svg 3.在compone目录下建立一个icons,在icons下建立一个svg目录,专门用来放图标。 3 查看插件的使用方法 vue所有的插件都在node_modules中 根据下载时的插件名来找到插件e-cli-plugin…

    2021年6月11日
    0 7 0
  • 详解Angular组件之投影

    概述 运行时动态改变组件模版的内容。没路由那么复杂,只是一段html,没有业务逻辑。 ngContent指令将父组件模版上的任意片段投影到子组件上。 一、简单例子 1、子组件中使用<ng-content>指令来标记投影点 <div class=”wrapper”> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content> </div> 2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中 <di…

    2021年6月11日
    0 4 0
  • 详解Angular项目中共享模块的实现

    一、共享CommonModule 创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 暂时只有CommonModule,以后会有一些需要共享的组件。 import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; @NgModule({ imports: [ CommonModule ], exports:[ CommonModule ], declarations: [] }) export class SharedM…

    Javascript 2021年6月11日
    0 3 0
  • Node.js断点续传的实现

    前言 平常业务需求:上传图片、Excel等,毕竟几M的大小可以很快就上传到服务器。 针对于上传视频等大文件几百M或者几G的大小,就需要等待比较长的时间。 这就产生了对应的解决方法,对于大文件上传时的暂停、断网、网络较差的情况下, 使用切片+断点续传就能够很好的应对上述的情况 方案分析 切片 就是对上传视频进行切分,具体操作为: File.slice(start,end):返回新的blob对象 拷贝blob的起始字节 拷贝blob的结束字节 断点续传 每次切片上传之前,请求服务器接口,读取相同文件的已上传切片数 上传的是新文件,服务端则返回0,否则返回已上传切片数 具体解决流程 该demo提供关…

    Javascript 2021年6月11日
    0 4 0
  • 详解前端安全之JavaScript防http劫持与XSS

    HTTP劫持、DNS劫持与XSS 先简单讲讲什么是 HTTP 劫持与 DNS 劫持。 HTTP劫持 什么是HTTP劫持呢,大多数情况是运营商HTTP劫持,当我们使用HTTP请求请求一个网站页面的时候,网络运营商会在正常的数据流中插入精心设计的网络数据报文,让客户端(通常是浏览器)展示“错误”的数据,通常是一些弹窗,宣传性广告或者直接显示某网站的内容,大家应该都有遇到过。 DNS劫持 DNS 劫持就是通过劫持了 DNS 服务器,通过某些手段取得某域名的解析记录控制权,进而修改此域名的解析结果,导致对该域名的访问由原IP地址转入到修改后的指定IP,其结果就是对特定的网址不能访问或访问的是假网址,从…

    2021年6月11日
    0 2 0
  • JavaScript必看的10道面试题总结(推荐)

    1.this指向 1.谁调用指向谁 例: function foo(){ console.log(“this”,this); } new foo(); 2.全局指向window 例: function foo(){ console.log(“this”,this); } foo(); 3.构造函数的this指向构造函数实例 4.call/apply/bind 强制改变this指向 5.箭头函数的this始终指向父级上下文 2.事件模型:事件委托、代理?如何让事件先冒泡后捕获 事件委托:又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托…

    Javascript 2021年6月10日
    0 2 0
  • JavaScript canvas实现流星特效

    本文实例为大家分享了JavaScript canvas实现流星特效展示的具体代码,供大家参考,具体内容如下 1、控制透明度变化函数 function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根构建的缓慢减速运动 核心函数:x*x + 2*x function easeOutQuad(curtime,begin,end,duration){ let x = curtime…

    Javascript 2021年6月10日
    0 2 0
  • vue-element-admin项目导入和导出的实现

    vue-element-admin导入组件封装 模板和样式 首先封装一个类似的组件,首先需要注意的是,类似功能,vue-element-admin已经提供了,我们只需要改造即可 excel导入功能需要使用npm包xlsx,所以需要安装xlsx插件 npm i xlsx 将vue-element-admin提供的导入功能新建一个组件,位置: src/components/UploadExcel import CommonTools from ‘./CommonTools’ import UploadExcel from ‘./UploadExcel’ export default { insta…

    2021年6月10日
    0 4 0
  • 如何用DevUI搭建自己的Angular组件库

    前言 作为前端开发者,随着公司业务的不断发展和增长,业务对组件功能、交互的诉求会越来越多,不同产品或者团队之间公用的组件也会越来越多,这时候就需要有一套用于支撑内部使用的组件库,也可以是基于已有组件扩展或者封装一些原生三方库。本文会手把手教你搭建自己的Angular组件库。 创建组件库 我们首先创建一个Angular项目,用来管理组件的展示和发布,用以下命令生成一个新的项目 ng new <my-project> 项目初始化完成后,进入到项目下运行以下cli命令初始化lib目录和配置, 生成一个组件库骨架 ng generate library <my-lib> –p…

    2021年6月10日
    0 2 0
  • 详解Angular动态组件

    使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的)。 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的。 再举一个常见的例子,动态弹出框,弹出的组件是不确定的、不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求。 怎么实现 然后我们来找个把手,看实现动态组件需要什么。 一、动态组件放在哪 我们需要知道把动态组件加在哪里,也就是锚点。那什么东西可…

    Javascript 2021年6月10日
    0 2 0
  • 详解Angular父子组件通讯

    概述 Angular组件间通讯 组件树,1号是根组件AppComponent。 组件之间松耦合,组件之间知道的越少越好。 组件4里面点击按钮,触发组件5的初始化逻辑。 传统做法:在按钮4的点击事件里调用组件5的方法。紧密耦合。 Angular:在组件4根本不知道组件5存在的情况下实现。 使用松耦合的方式在组件之间传递数据开发出高重用性的组件。 使用输入输出属性在父子关系的组件之间传递数据。 一、输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西。不需要知道这些东西从哪里来来。 组件只需要知道当它需要的东西外部世界提供给它以后它应该怎么做。 组件通过输出属性发射事件告诉外…

    2021年6月1日
    0 5 0
  • vue具名插槽的基本使用实例

    前言 具有名字的插槽slot使用 中的 “name” 属性绑定元素 注意: 1,如果没有匹配到 则放到匿名的插槽中 2,具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序 vue的匿名插槽(默认插槽) 父组件 <div> <myslot>我是刚刚</myslot> </div> 子组件 <div> <slot><slot> </div> vue的具名插槽 父组件 <div> <myslot> <template #one>猪…

    2021年6月1日
    0 3 0
  • 详解Angular组件之中间人模式

    一、中间人模式 该组件树中除了组件1以外,每个组件都有一个父组件可以扮演中间人的角色。顶级的中间人是组件1,它可以使组件2,组件3,组件6之间互相通讯。依次类推,组件2是组件4和组件5的中间人。组件3是组件7和组件8的中间人。 中间人负责从一个组件接收数据并将其传递给另一个组件。 二、例子 股票报价组件为例,假设交易员在监看着报价组件的价格,当股票价格达到某一个值的时候,交易员会点一个购买按钮,来购买股票。问题:报价组件并不知道应该如何下单来买股票,它只是用来监控股票价格的。所以报价组件在这时应该通知它的中间人【也就是APP组件】告诉它交易员要在某个价格购买某只股票。中间人应该知道哪个组件可以…

    2021年6月1日
    0 4 0
  • 详解Angular组件之生命周期(二)

    一、view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子。 1、实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子。 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用。 @ViewChild(‘child1’) child1:Child1Component; //父组件中获得子组件的引用 ngOnInit(){ this.child1…

    2021年6月1日
    0 4 0
  • 详解Angular路由之子路由

    一、子路由语法 二、实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息。 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部。 1、新建2个组件修改其内容 ng g component productDesc ng g component sellerInfo 重点是修改销售员信息组件,显示销售员ID。 import { Component, OnInit } from ‘@angular/core’; import { ActivatedRoute } from ‘@angular/router’; @Component({ selector: ‘ap…

    2021年5月31日
    0 4 0