- 博客(39)
- 收藏
- 关注
RSS订阅原创 js数组中会修改原数组的方法
js数组中有很多内置的方法，会修改原数组的有下面几种1.sort()排序 let myfoo =function(a,b){ return a-b; } a = [22,1,444,3] console.log(a.sort()) // [1,22,3,444] console.log(a.sort(myfoo)) // [1,3,22,444]2.reverse()颠倒...
2020-03-29 14:51:48
2430
2
原创 DOM的addEventListener方法第三个参数
DOM的事件有三个阶段1.捕获 2.处于目标 3.冒泡其中addEventListener监听事件的时候第三个参数默认为false当第三个参数不设置或者设置为false时，事件在冒泡阶段触法（由内到外，先执行子事件，再执行父事件）当设置为true时，事件在捕获阶段就触法（由外到内，先执行父事件）...
2020-03-20 15:39:44
305
原创 localStorage的使用
localStorage缓存基本使用1.存值// 三种方法localStorage.setItem('name','value')localStorage.name = 'value';localStorage['name'] = 'value';2.取值localStorage.getItem('name')localStorage['name']localStorage.n...
2020-02-28 16:57:02
130
原创 react 父子组件通信
1.父组件传值给子组件使用prop// 父组件import React from 'react';import Myheader from './components/Myheader.js'function App() { return ( <div className="App"> <Myheader id='123'><...
2020-02-17 14:25:36
103
原创 react路由react-router-dom的使用
一.简单使用1.引入依赖yarn add react-router-dom2.声明新建一个router.js文件import React from 'react'import {HashRouter,Switch,Route} from 'react-router-dom'import Home from '../components/Home.js'import Index ...
2020-02-17 14:23:38
162
原创 vue插槽
v-slot vue指令匿名插槽/默认插槽只可以使用一次，由父组件提供样式和内容，子组件只负责显示具名插槽可以使用多次<template v-slot:插槽名称>插槽内容作用域插槽（带数据的插槽）在slot上面绑定数据<template v-slot:插槽名称=集合>{{集合.值}}<slot name=“插槽名称” :值=xxx>直接上代...
2020-02-14 19:49:17
6918
原创 vue路由跳转与参数传递
这里注意router与router与router与route$router是全局路由对象，有push(),和go()等方法$route是正在跳转的路由对象，有name，path，params和query等方法路由声明与使用1.1 新建一个router.js文件创建路由import Vue from 'vue'import VueRouter from 'vue-router'...
2020-02-14 15:21:22
171
原创 微信小程序组件通信
1.全局变量globalDataapp.js 申明全局变量App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { // 初始化云环境 wx.cloud.init({ env: 'xxx...
2020-02-13 20:57:18
152
原创 es5与es6数组去重
1.es5数组去重这里出了可以去重还可以获取重复的次数 var arr = [1,1,2,2,3,3,4,5,6] var obj = {}; //key 为不重复数组各项的值，value为该值重复次数 var newArr=[] arr.forEach(function(item){ if(!obj[item]){ obj[item]...
2020-02-13 17:01:57
206
原创 vue 组件通信
1.父组件传子组件（props）父组件v-bind（简写":"）绑定 子组件通过props// 父组件<template> <div> <Aside :id="father_id" ></Aside> </div></template><script> import...
2020-02-12 21:42:22
327
原创 angular/react/vue/微信小程序 生命周期钩子
前端三门流行框架都有不同的生命周期钩子1.angular// 组件初始化时执行constructorngOnChangesngOnInitngDoCheckngAfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewChecked// 变化检测时执行ngOnChangesngDoCheckngAfte...
2020-02-11 22:48:50
331
原创 微信小程序使用云开发
1.在项目根目录找到 project.config.json 文件 // 新增 cloudfunctionRoot 字段， // 指定本地已存在的目录作为云函数的本地根目录 "miniprogramRoot": "miniprogram/", //项目根目录 "cloudfunctionRoot": "cloudfunctions/", //云函数根目录2...
2020-01-25 14:34:03
468
原创 angular7 路由配置与获取路由参数
可以使用switchMap、params和Query获取一、switchMap获取1.导入相应的模块import {ActivatedRoute, ParamMap} from '@angular/router';import {switchMap} from 'rxjs/operators';2.注入相应的服务 constructor(private route: Activa...
2020-01-18 16:33:58
3431
原创 键盘事件
在开发过程中，键盘事件经常有使用到keydownkeypresskeyup顺序为keydown -> keypress ->keyup注意：keypress 只能捕获单个字符，不能捕获组合键 无法响应系统功能键（如delete，backspace） 不区分小键盘和主键盘的数字字符 KeyPress主要用来接收字母、数字等ANSI字符KeyboardEventIni...
2020-01-15 17:51:23
144
原创 鼠标事件与鼠标位置
一、鼠标事件一些具体的事件都派生自 MouseEvent：WheelEvent 和DragEvent。1.MouseEvent// 常见鼠标事件mousedown 鼠标按下mouseup 鼠标释放click 左键单击dblclick 左键双击mousemove 鼠标移动mouseover 鼠标经过mouseout 鼠标滑出mouseenter ...
2020-01-15 16:56:10
607
原创 js数组与对象-空值判断
在做项目的时候遇到过这个坑const arr = [];const obj = {}if(arr) { console.log('true'); } else { consoel.log('false'); } if(obj) { console.log('true'); } else { consoel.log('false'); ...
2020-01-14 16:27:57
748
转载 js数据类型判断
有三种方式，分别为 typeof、instanceof 和Object.prototype.toString.call()一、typeof使用方法 ：(typeof + 值 ) --返回一个字符串// 基本数据类型typeof 'banana' // 'string'typeof true // 'boolean'typeof 123 // 'number'typeof Sym...
2020-01-14 15:56:19
76
原创 for in与for of循环
一、for infor-in 循环主要用于遍历对象for(keys in obj){} keys 表示 obj 对象的每一个键值对的键所有循环中，需要使用obj[keys]来取到每一个值二、for offor-in 循环主要用于遍历数组 遍历数组还有forEach map等for(item of obj) {}...
2020-01-14 15:03:50
135
原创 angular7 [ngStyle]与[ngClass]的使用
等号右边都为对象1.ngStyle<!--一个--><div [ngStyle]="'color' : 1 > 0 ? 'red': 'white'">秃然变强</div><!--多个用逗号隔开--><div [ngStyle]="'color' : 1 > 0 ? 'red': 'white', 'background...
2020-01-14 10:33:58
379
原创 background-image图片不存在时显示默认照片
css的background-image 没有像 img标签一样有onerror事件<img src="./images/第一张.png" onerror="noExist();" /><script type="text/javascript"> function noExist(){ var img=event.srcElement; img.src="./...
2020-01-13 17:21:42
2415
原创 ctrl + click 事件
ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。event.ctrlKey=true|false|1|0html文件<html><head> <title>ctrl + click 事件</title> <style> .click{ ...
2020-01-11 15:15:22
2197
原创 angular7 img src问题
angular图片问题问题可以使用下面的写法<img [src]={{imgUrl}} /><img [src]="imgUrl" /><img src={{imgUrl}} /><img src="imgUrl" /><img ng-src="imgUrl" /><img src="assets/images/...
2020-01-10 17:32:31
1710
原创 angular7 ngx-spinner使用
1.引入在module文件中引入import {NgxSpinnerModule} from 'ngx-spinner';2.imports写入@NgModule({ imports: [ NgxSpinnerModule, ], })3.html文件<ngx-spinner type="ball-scale-multiple"> <p c...
2020-01-10 17:29:08
645
原创 自定义滚动条
谷歌(webkit内核)浏览器可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar — 整个滚动条.::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.::-webkit-scrollbar-track — 滚动条轨道.::...
2020-01-08 16:54:00
160
原创 angular7上传表格文件并展示在页面
一.html文件 <div class="modal-header"> <img src="./assets/images/call-record/importCallRecord/数据导入.png" alt="数据导入"> <div>族谱数据导入</div> <a href="jav...
2020-01-08 16:48:27
474
原创 angulart 使用推送通知服务 NotificationsService
一、父组件1.在父组件module文件导入import { NgModule } from '@angular/core';import {SimpleNotificationsModule} from 'angular2-notifications';@NgModule({ imports: [ SimpleNotificationsModule.forRoot(), ...
2020-01-06 16:24:34
870
原创 angular7 路由重定向
1.导入在ts文件中导入import {Router} from '@angular/router';2.注入依赖 constructor(private router: Router,) { }3.使用 this.router.navigate([`manage/bill-o/${this.objDetail.id}`]);...
2020-01-03 11:19:37
676
原创 angular7 html文件遍历对象
在gangular中的TS文件中遍历对象时可以使用很多种方法例如 for in但是在html文件中不能使用 *ngFor in 来遍历对象如果需要在html文件中遍历对象时，可以这样写// TS文件export class ChooseComponent implements OnInit{ objectKeys = Object.keys; // 加入这个 construc...
2019-12-31 21:13:05
923
原创 angular7 键盘回车事件
监听keyup事件，$event.which === 13<input name="key" [(ngModel)]="key" class="form-control" placeholder="搜索..." (keyup)="($event.which === 13)?showModal():0">
2019-12-31 11:44:03
1327
原创 angular遇到的坑 Can't bind to 'ngModel' since it isn't a known property of 'input'
当我在input标签里使用[(ngModule)]时<input [(ngModel)]="key" class="form-control" placeholder="搜索..." (change)="showModal()">出现一个坑，提示Can't bind to 'ngModel' since it isn't a known property of 'input'...
2019-12-31 09:43:08
265
原创 angular7使用ngx-bootstrap-modal
TemplateRef 是 angular的 核心类BsModalService 和 BsModalRef是 ngx-bootstrap里面的services1.安装 项目目录安装npm install ngx-bootstrap --save2.引入 module文件import { ModalModule } from 'ngx-bootstrap';@NgModule({...
2019-12-30 21:15:10
686
原创 angular7创建组件
1.两条重要ng命令ng generate module bootstrap-modal // 创建ng的module模板ng generate component bootstrap-modal // 创建ng的组件模板2.配置exports当其他组件想要调用这个新建的组件时，这个组件的module文件需要配置exportsimport { NgModule } from '@a...
2019-12-30 20:44:37
358
原创 在angular中使用window
一、变量在angular(TS)中不能直接使用window全局变量，如果直接声明 window.xx是会报错的把window写成（window as any） window.qiang = ‘秃然变强' // 会报错 (window as any).qiang= ‘秃然变强' // 成功二、事件angualr中使用window事件1.使用HostListener @Hos...
2019-12-27 17:56:39
2627
原创 cytoscapeJS 学习笔记(1)
cytoscapeJS是用于可视化和分析的图论（网络）库具体的功能API等详细内容需要看官网，这里只是简单的介绍，起抛砖引玉的作用1.安装// windows 下安装npm : npm install cytoscape2.手势Cytoscape.js支持几种手势：抓取并拖动背景进行平移：触摸和桌面捏放大：触摸和桌面（带有支持的触控板）鼠标滚轮缩放：桌面两指触控板向上或向下缩...
2019-12-08 20:26:07
666
原创 angular笔记-组件通信
angular前端组件化思想：将部分模版和逻辑封装为组件，并在不同的页面位置中使用，可以实现代码的复用angular组件间通信的方式：@input @output 以及 @ViewChild一：@input 父传子//父html文件<app-child [data]='msg' ></app-child>//父ts文件export class Child i...
2019-12-01 21:40:23
153
原创 ngx-bootstrap学习笔记
ngx-bootstrap 是angular的一个UI框架，是Angular快速集成Bootstrap 3或Bootstrap 4组件的最佳方式。ngx-bootstrap可以提高开发效率。这里我使用的是 @angular/cli 8.2.5，与bootstrap41.安装ngx-bootstrap----在项目目录打开cmd控制台输入----使用 ”–save“写入依赖npm inst...
2019-11-24 20:59:49
431
原创 angular学习笔记--跨域
协议、地址和域名有一个不一致的时候都需要跨域。很多情况下开发的时候前端部署的服务器与后端部署的服务器提供的接口域名不相同，前后端就需要跨域进行数据交互。这里记录下angular的一种跨域方法。我使用的是环境是 @angular/cli “~8.3.4” 版本一 在项目根目录下新建proxy.config.json文件{ "/y-api": { "target": "...
2019-11-18 22:39:35
125
原创 Git学习笔记
Git 是一种在全球范围都广受欢迎的版本控制系统。在公司项目开发过程中使用git分支保护是为了防止相关成员Push代码到重要的分支（例如master分支），便于仓库的分支管理。下面简单记录下git的学习笔记。初始化git创建git初始化工作空间，在对应的工作空间，打开git命令行模式git init新建一个分支并同时切换到该个分支上（”xiaoming“为分支名称） git...
2019-11-07 12:15:10
82
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人