前端自由人-CSDN博客

原创 react redux理解与使用方法

redux使用创建项目安装redux图片全局理解使用创建项目命令： npx create-react-app my-app安装redux命令： npm install redux图片全局理解Store 带有推送功能的数据仓库react UI组件订阅subscribeReducer 帮助Store处理数据的方法action 如打电话，发短信 ---- dispathch 消息分发使用创建Store.jsimport { createStore } from

2022-02-15 12:21:57 519

原创 angular如何操作节点修改样式

文章目录angular如何操作节点修改样式angular如何操作节点修改样式一、直接操作DOM（不推荐）// 获取DOM节点@ViewChildren('img') imgs: QueryList<ElementRef>this.imgs.forEach(item => { item.nativeElement.style.height = "100px" });二、 Renderer2方法（推荐：可以防止代码注入攻击）import { Rendere

2021-03-27 23:47:20 785

原创 nodejs的service.js

用nodejs写服务返回数据var express = require('express');var app = express()var bodyParser = require('body-parser') // 解析的// 解析json参数app.use(bodyParser.json());// 创建application/x-www-form-urlencoded 编码解析app.use(bodyParser.urlencoded({ extended: true}))// 设置

2021-03-19 11:24:56 1054

原创 ViewChild和ViewChildren的使用

文章目录ViewChildViewChildrenViewChild第一种：获取DOM<div #box>一个盒子</div>import {AfterViewInit,ViewChild,ElementRef} from '@angular/core';// static默认false，是否需要提前拿到，静态的和没ngif的可以设置为true@ViewChild('box',{static:true}) private boxel:ElementRef;ngAf

2021-03-16 16:23:43 1501

原创 ngStyle和ngClass使用

文章目录属性形式NgStyleNgClass其它ngNonBindable属性形式[style.属性值]<button [style.color]="'red'">bbbb</button><button [style.color]="false ? 'red' : 'blue'">blue</button>带单位的<button [style.font-size.px]="20">哈哈</button><

2021-03-14 18:42:23 205

原创 angular路由学习

angular路由学习目录简单路由使用1.导入和注册路由2.组件使用路由通配符路由路由重定向参数路由子路由嵌套路由模块函数式路由路由传参路由守卫简单路由使用1.导入和注册路由app.module.ts文件③④可以抽出来写---①import { RouterModule,Routes } from "@angular/router"; ---④导入组件import { TimComponent } from './tim/tim.component';import { HugoCo

2021-03-14 06:27:42 314 1

原创 angular的httpClient使用

ng的httpClient发送请求库如何使用httpClient发送请求1. 全局注册: app.module.ts2. 组件使用成功方法3. http获取错误处理2种方法：请求非JSON数据GET传参POST传参重试失败的请求retry()如何使用httpClient发送请求1. 全局注册: app.module.tsimport { HttpClientModule } from "@angular/common/http";@NgModule({ imports: [ HttpClientM

2021-03-13 22:02:09 1342

原创 angular的父子组件通信

文章目录通信：父传子：{Input}通信：子传父：（通过事件）双向数据绑定：[(ngModel)]的使用通信：父传子：{Input}//父 <app-child [num]="count"></app-child>// 子html<h1>我是父传过来的：{{num}}</h1>// 子tsimport { Input } from '@angular/core'; @Input() num:any;// 使用别名： @Input('num

2021-03-13 14:09:10 468

原创 angular管道多种用法

angular管道多种用法管道参数化// ts文件public birstday = new Date()private flag:boolean = false; get format(){ return this.flag ? "yyyy-MM-dd" : "yyyy/MM/dd" }// html文件{{birstday | date }}{{birstday | date:'yyyy-MM-dd'}}{{birstday

2021-03-13 11:28:20 547

原创 angular响应式表单使用

angular响应式表单使用ReactiveFormsModule引入文件到模块: {ReactiveFormsModule }这里导入文件为：app.module.tsimport { ReactiveFormsModule } from '@angular/forms'declarations: [ AppHighlightDirective ],html<form [formGroup]="myGroup" (ngSubmit)="onSubmit(

2021-03-12 00:37:25 133

原创 angular自定义指令Directive使用方法

angular自定义指令Directive1.第一种Directive不传参数1.创建Directive ts文件：highlight.directive.component.tsDirective,ElementRef 引用2个属性import { Directive,ElementRef} from '@angular/core'@Directive({ selector:'[appHighlight]' // []设置为属性 .appHighlight设置为类})exp

2021-03-11 22:50:55 1363

原创 angular的service服务使用

一、service服务ng g s service/search服务组件：search.service.tsname:string = 'kk'public getName():string{ return this.name } public setName(v:string):void{ this.name = v }组件使用service// ts文件// 导入服务import {SearchService} from '../service/se

2021-03-10 23:23:27 2407 1

原创 javascript数据类型和栈堆存放解析

javascript数据类型和栈堆存放解析栈和堆栈是单独存放堆是存放地址，指向对象// 栈 var a = 'mooc'var b = ab = 'moo2'console.log(a,b) // mooc moo2// 堆var c = {key : 1}var d = cd.key = 2console.log(c,d) // 2,2// 存放解析// ['mooc','moo2] // 栈// c d [ 'x00018', 'x00018'

2021-03-02 22:18:19 109

原创 vue知识的ref使用

vue小知识点ref 的使用ref 的使用ref是绑定在标签中，操作dom的例子： <div class="nav_right" ref="city" v-on:click='changeCityFun'>清远</div> methods:{ changeCityFun(){ var kk = this.$ref...

2020-10-20 14:03:31 556

原创 css样式

初始化项目的一些基本问题--摘要移动端：解决点击300毫秒延迟样式初始化参考文件移动端：1像素边框问题移动端：解决点击300毫秒延迟使用插件fastClick①npm install fastCilck --save②import fastClick from ‘fastClick’③fastClick.attach(document.body)样式初始化参考文件文件名reset...

2020-10-20 14:03:06 52

原创 webpack 全局安装和项目安装

webpack 全局安装和项目安装全局安装根据项目安装全局安装命令安装：npm install webpack webpack-cli -g效果为显示成功根据项目安装解决多个项目使用不同的webpack版本问题删除全局webpack命令：npm uninstall webpack webpack-cli -g根据项目安装，终端进入项目文件夹可以选择相应版本，执行命令：npm i...

2020-10-20 14:02:34 560

原创 html5新特性，和一些标签用法

html5新特性，和一些标签用法table表格的使用属性：[colspan,rowspan]table里的thead tfoot tbody的用法ul ol li dl dt ddtextarea文本区域input label的连着用法from的表单与连用属性html5嵌入音频，嵌入视频table表格的使用属性：[colspan,rowspan]配合使用的所有元素有：大盒子：tabl...

2020-10-20 14:02:11 300

原创 js中的值类型和引用类型的区别

js中的值类型和引用类型的区别1.JavaScript中的变量类型有哪些？2.值类型和引用类型的区别实例：几方面的区别举例：总结1.JavaScript中的变量类型有哪些？（1）值类型（基本类型）：字符串（string）、数值（number）、布尔值（boolean）、undefined、null （这5种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值）(ECMAScript ...

2019-11-07 23:35:05 189

原创 js原型--模仿jquery显示和事件绑定

原型事件绑定简单的代码演示function Elem(id) { this.elem = document.getElementById(id) } Elem.prototype.html = function (val) { var elem = this.elem; if (val){ elem.in...

2019-11-07 19:09:55 164

原创 js设计模式-装饰者模式

设计模式装饰者模式es7例子，装饰器写法装饰者模式es7例子，装饰器写法需要安装插件npm install babel-plugin-transform-decorators-legacy --save-dev文件设置.babelrc的"plugins":["transform-decorators-legacy"]function testDec(isDec){ retur...

2019-11-04 11:48:32 133

原创 js单例模式

js单例模式解析简单代码理解登录应用场景，例子解析就是此终只有一个实例对象，（就是只有一个new的构造函数）简单代码理解class loginForm{ constructor(){ this.state = 'hide'; }}// 这是挂载loginForm的静态方法-----重点1，，会始终只有一个loginForm....

2019-11-03 13:46:01 101

原创 js的执行顺序问题

JS的执行顺序一、语法分析浏览器将所有JS检查一遍，看有没有语法错误，这里并不会执行，没有错误则进行第二步，预编译二、预编译预编译的时候会创建一个AO对象（Activation Object）执行上下文函数声明整体提升，变量声明提升。值为undefind，，理解：(找形参和变量声明，将形参和变量作为AO对象的属性名，值为undefined;)。三、语句执行异...

2019-11-02 12:26:34 232

原创前端v8内存管理

主要知识点解析：v8是js运行的引擎为什么我们要关注内存v8引擎的机制v8内存分配内存大小老生代问题新生代如何晋升到老生代02、v8是如何处理变量的变量处理优化内存的技巧（变量）防止内存泄漏解析：v8是js运行的引擎v8引擎如何回收垃圾如何查看v8内存使用情况内存优化实例为什么我们要关注内存防止页面占用内存过大，引起客户端卡顿，甚至无响应Node使用的也是v8，内存对于后端服务...

2019-11-02 10:42:03 501

原创 async,await配合promise的使用

async,await配合promise的使用async function kk(){ const data = await getData(); console.log(data)};function getData(){ return new Promise((resolve) => { setTimeout(function () { ...

2019-10-31 14:57:37 651 1

原创 css水平垂直居中多种方法

水平居中第一种//结构<div class="parent"> <div class="child"></div> </div>.parent{ text-align: center;}.child{ display:inline-block;}text-align属性：是为文本内容...

2019-10-31 14:54:28 94

原创添加码云ssh秘钥

文章目录生成 sshkey获取ssh key到码云添加ssh key生成 sshkey打开终端按如下命令输入自己码云账号来生成 sshkey:ssh-keygen -t rsa -C "xxxxx@xxxxx.com" 按照如下图提示完成三次回车，即可生成 ssh key获取ssh key输入如下命令可查看已经生成的ssh key（若提示cat不是内部命令，可关掉终端，再次输入...

2019-09-10 14:16:06 888

原创 js判断数据类型4中种方法

文章目录判断数据类型1. typeof介绍2. instanceof3. constructor方法4.Object.prototype.toString.call()判断数据类型有4中方法typeofinstanceofconstructorObject.prototype.toString.call() //这个完美1. typeof介绍console.log(type...

2019-08-31 16:19:55 131

原创 js数据类型之Nnmber

文章目录数据类型Number对象方法Math对象方法数据类型Undefined；Null；Boolean；String；Number；Symbol； //es6多出的Object。Number对象方法toSting (有介绍)toLocaleStringtoFixed (有介绍)toExponentialtoPrecision (有介绍)val...

2019-08-31 15:45:27 185

原创 Js的this原理

文章目录调用方法2中写法详细理解例子调用方法2中写法this指向完全不同var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo() //obj调用，this指向obj// 写法二foo() //window调用，this指向window详细理解例子var obj = { fo...

2019-08-31 12:49:20 105

原创 es6的class类

文章目录Class的基本语法简介和基本用法静态方法 staticclass继承类的prototype属性和_proto_属性Class的基本语法简介和基本用法基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已.语法对比1es5写法function Point(x, ...

2019-08-31 12:30:29 236

原创 js链式调用

文章目录js链式调用js链式调用概念：只有本对象才能调用，利用this作用域，返回this例子： class Cat{ constructor(name){ this.name = name; this.run =function(){ console.log(name + ' run'); ...

2019-08-31 10:42:38 291

原创 js单例设计模式

文章目录单体模式概念：作用：惰性单体技术分支单体技术单体模式弊端单体模式概念：解析：最简单的单体其实就是一个对象字面量。它把一批有一定关联的方法和属性组织在一起。var Singleton={ name: nimei, age: 2, walk: function(){ ... }, eat: function(){ ...

2019-08-31 09:54:39 104

原创 es6的set方法map方法

es6总结：数组集合：set介绍及用法map总结：set是创建新数组实例map是键的值得数据结构数组集合：set介绍及用法概念：一个Set是一堆东西的集合，Set有点像数组，不过跟数组不一样的是，Set里面不能有重复的内容；实例属性和方法：size、add、delete、has、clear // 创建一个集合 var arr= new Set( ['aa','bb','cc...

2019-08-26 13:03:02 472

原创 axios应用和配置方法

axiosaxios特性1.常规特性2.支持的浏览器axios --> http请求方法axios基础用法 2种写法axios进阶用法（实例，配置，拦截器，取消请求等）axios进一步封装，在项目中的实际应用axios特性1.常规特性支持Promise API拦截请求和响应转换请求数据和响应数据（在请求的时候，有一些敏感信息需要加密，然后回来的时候可以解密）取消请求自动转换J...

2019-08-24 23:58:32 274

原创 vue基础混入方法

vue复用性--混入解析例子选项合并全局混入自定义选项合并策略解析混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。例子Test.js文件：导出对象export default { created: function () { ...

2019-08-22 09:32:01 1296

原创小程序基础总结

小程序根目录文件代码结构解析.app.js文件app.json文件app.wxss文件project.config.json文件sitemap.jsonpages文件夹：wxml常用标签修改data数据常用指令：生命周期跳转页面：根目录文件代码结构解析最外层单独文件：.app.js文件设置一些全局的基础数据等app.json文件底部tab, 标题栏和路由等设置；“page”:{} ...

2019-08-16 18:29:06 115

原创 git管理代码命令

git代码管理命令提交代码分支用法提交完分支后如何合并分支到主分支上查看所有分支进阶提交代码git add . （.可以改为单位件，这样就可以提交单文件了）git commit -m ‘描述’git push 提交分支用法git pullgit checkout index-swipergit status 查看当前分支状态提交完分支后如何合并分支到主分...

2019-08-14 09:52:54 358

原创 css

cssinput选择框checkbox的美化，如何做？前端兼容性问题input选择框checkbox的美化，如何做？作用：可以隐藏默认样式，设置自己喜欢的选择框label[for]和id隐藏原生input:checked + labelhtml代码： <div class="checkbox"> <input type="checkbox" id...

2019-08-07 23:23:54 69

原创小知识①v-once②is③props校验④组件绑定原生事件⑤插槽slot

v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。例子1：使用方法Vue.component('child-one',{ template:'<div v-once>这是childone组件</div&gt...

2019-07-15 23:59:05 167

原创 vue路由配置和使用

vue路由配置和使用安装路由文件配置入口文件配置 src/main.jsApp.vue路由地址跳转切换安装本地环境安装路由插件vue-router： cnpm install vue-router --save-dev路由文件配置路由文件：src/router/index.js中的import Vue from 'vue' //前提条件引入vue文件①import Router...

2019-07-15 13:55:04 464

空空如也

空空如也