自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(45)
  • 收藏
  • 关注

原创 安装并配置yarn

1、安装npm install yarn -g2、查看版本yarn -version3、配置yarn私服(加入网址为http://www.taobao.com)yarn config set registry http://www.taobao.com4、查看yarn私服yarn config get registry 回车显示http://www.taobao.com这样以后就可以直接执行yarn install安装依赖包啦...

2020-11-23 14:18:59

原创 css清除浮动的4种方法

float布局会脱离文档流,对页面的布局造成影响,比如造成父级的高度坍塌等问题。清除浮动后,便不会影响文档流。下面介绍一下现在清除浮动的一些方式。一、父级添加overflow: hidden;子元素浮动了,会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性,就可以解决浮动带来的影响。<ul class="cc"> <li></li> <li></li></ul><style t

2020-09-08 15:11:58 28

原创 区分冒泡和捕获

事件处理函数中第三个参数为false表示冒泡,为true表示捕获,默认为false

2020-09-08 14:00:27 16

原创 HTML img元素中的 alt 属性与 title 属性区别

图片中的 alt 属性是在图片不能正常显示时出现的文本提示图片中的 title 属性是在鼠标在移动到元素上的文本提示

2020-08-28 14:43:18 33

原创 css中visibily:hidden和display:none的区别

1、display:none视为不存在且不加载,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失;visibility:hidden隐藏,但在浏览时保留位置,即对象在网页上不可见,但该对象在网页上所占的空间没有改变;2、使用 display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。即它仍具有高度、宽度等属性值。...

2020-08-28 14:34:27 35

原创 js理解对象

js中有两种属性:数据属性和访问器属性。1、属数据属性默认的特性有4个:(默认前三个属性都为true)configurable: 表示能否通过delete删除属性从而定义新属性,为false则不能变为可配置的了。enumerable:可通过for … in枚举writable:可写value:属性的值2、要修改属性默认的特性,必须使用Object.defineProperty(属性所在的对象,属性的名字,描述符对象)方法,描述符对象的属性必须是configurable、enumerable

2020-08-18 21:23:39 33

原创 跨域技术

2020-08-18 00:04:37 29

原创 HTTP与ajax介绍

HTTP头部信息:请求头:ACCEPT:浏览器能够处理的内容类型。ACCEPT-Charset: 浏览器能够显示的字符集。ACCEPT-Encoding: 浏览器能够处理的压缩编码。ACCEPT-Language:浏览器当前设置的语言。Connection:浏览器与服务器之间连接的类型。Cookie:当前页面设置的任何cookie.Host:发出请求的页面所在的域。Referer:发出请求的页面的URI.User-Agent: 浏览器的用户代理字符串。使用setRequestHeade

2020-08-17 22:35:59 39

原创 原生ajax

var xhr = new XHRHttpRequest();//第三个参数表示是否异步发送请求xhr.open(“get”, “example.php”, false);//参数作为请求主体发送的数据,如果没有则必须传入nullxhr.send(null);响应数据相应的属性:responseText: 作为响应主体被返回的文本;responseXML: 保存着响应数据的XML DOM文本;status: 响应的HTTP状态;statusText: HTTP状态的说明。异步请求时,re

2020-08-17 21:51:37 24

原创 前端模块化

node中的模块化:es6中的模块化:

2020-08-06 11:28:10 32

原创 vue笔记 ---组件之间的通信

父组件向子组件传值:props中如果值是一个数组或者对象,默认值必须是一个工厂函数,否则报错。props: { msgInfo: { type: Array, required: true, default: function(){ return [] } }, msg1: [string, number] //msg1既可以是字符串也可以是number}父组件中绑定props值要用短横线格式:<comList :mag-info="message"&gt.

2020-08-05 16:10:48 42

原创 react学习第六天

react插槽加粗样式

2020-08-04 22:38:01 43

原创 react学习第五天

react生命周期:组件从实例化到渲染到最终从页面中销毁,整个过程就是生命周期,在这个生命周期中,我们有许多可以调用的事件,也俗称为钩子函数。生命周期的3个状态:mounting:将组件插入到DOM中updating:将数据更新到DOM中unmounting:将组件移除DOM中生命周期钩子函数:componentWillMount:组件将要渲染componentDidMount:组件渲染完毕componentWillReceiveProps:组件将要接收props数据shouldCo

2020-08-03 22:47:51 25

原创 js数组方法

遍历数组的方法:forEach:对数组直接进行循环,相当于直接for 循环:arr.forEach((item,index,arr)=>{ //.....})map:对数组的每一项进行加工,加工完成之后返回一个新的数组arr.map((item,index,arr)=>{ //...})filter:过滤,将想要的内容进行行筛选,不要的内容去除,最终想要的内容返回arr.filter((item,index)=>{ //....})reduc

2020-08-03 21:55:24 31

原创 react学习第四天(三)

react列表渲染:将列表的内容拼装成数组放置到模板中import React from 'react';import ReactDOM from 'react-dom';let arr = ["小明","小黑","小白"]let arrHtml = [<li>小明</li>,<li>小黑</li>,<li>小白</li>] //将数据拼装成数组jsx对象class Welcome extends React.Compone

2020-08-01 16:16:48 38

原创 react学习第四天(二)

react条件渲染1、案例一import React from 'react';import ReactDOM from 'react-dom';import'./App.css';function UserGreet(props){ return ( <h1>欢迎登陆</h1> )}function UserLogin(props){ return ( <h1>请先登录</h1> )}class Paren

2020-08-01 14:56:31 32

原创 react学习第四天(一)

react事件:绑定事件的命名,用驼峰命名法{ } 中传入一个 函数,而不是字符串<button onClick={this.sendData}>传递数据给父元素</button>react返回的事件对象是代理的原生事件对象,如果想要查看事件对象的具体值,必须直接输出事件对象的属性,直接输出console.log(event)打印出属性值都为null原生js阻止默认行为时,可以直接返回return false,react中,阻止默认行为必须e.preventDefa

2020-08-01 13:52:00 19

原创 react学习第三天(二)

1、父组件向子组件传数据:props父组件向子组件传数据:props 单向流动props的传值可以是任意的类型props可以设置默认值:HelloMessage.defaultProps = { name: '老陈' } //name是变量名,可以设置多个默认值props可以传递函数,可以传递父元素的函数,就可以修改父元素的state状态,从而实现子组件向父组件传递数据2、子组件向父组件传递数据:调用父组件的函数从而操作父元素的数据,从而实现数据从子组件传递给父组件...

2020-08-01 13:28:27 23

原创 react学习第三天(一)

react状态管理react中的 state 相当于vue中的 data ,但是使用方式和vue不一致。修改state的正确方式,调用setState,切勿重新修改数据例: 每隔1行输出当前时间import React from 'react';import ReactDOM from 'react-dom';import'./App.css';class Clock extends React.Component{ constructor(props){ super(pro

2020-07-31 22:12:51 23

原创 react学习第二天(三)

react组件:函数式组件、类组件1、函数式组件//函数式组件function Father(){ //组件名字要大写 return ( <div> <h1>函数式组件</h1> </div> )}ReactDOM.render( <Father/>, document.querySelector('#root'))//函数式组件function Father(){ //组件名字

2020-07-29 23:52:25 66

原创 react学习第二天(二)

jsx_style 样式let exampleStyle = { background: "pink", borderBottom: "1px solid blue" //注意要使用驼峰命名法}let element = ( <div> <h1 style={exampleStyle}>helloworld</h1> //jsx中不能在style中直接添加样式 //<h1 style="height: 200px;"&

2020-07-29 23:13:46 31

原创 react学习第二天(一)

1、react jsx语法优点jsx执行更快,编译为javascript代码时进行优化类型更安全,编译过程如果出错,就不能编译,及时发现错误jsx编写模板更加简单快速(不要跟vue比)2、react jsx语法注意:jsx必须要有根节点正常普通html 元素要小写,如果是大写,默认是组件3、jsx表达式//例一:let str = '当前的时间是:'let time = new Date().toLocaleTimeString()let element = ( <d

2020-07-29 22:29:28 28

原创 react学习第一天

react 构建用户界面的javascript库,主要用于构建ui界面,2013年开源。特点:声明式的设计高效,采用虚拟DOM来实现DOM的渲染,最大限度地减少DOM的操作灵活,跟其他库灵活搭配使用JSX,俗称JS里面写HTML,javascript语法的扩展组件化。模块化。代码容易复用,2016年之前大型项目非常喜欢react单向数据流,没有实现数据的双向绑定,数据->视图->事件->数据1、安装脚手架npm install -g create-react-app

2020-07-28 23:15:52 30

原创 sass入门(四)

一. 使用选择器继承来精简CSS选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现//通过选择器继承继承样式.error { border: 1px solid red; background-color: #fdd;}.seriousError { @extend .error; //.seriousError将会继承样式表中任何位置处为.error定义的所有样式 border-width: 3px;}.seriousError不仅

2020-07-18 17:09:15 33

原创 sass入门(三)

二. 混合器当样式变得越来越复杂,需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了,这时可以通过sass的混合器实现大段样式的重用。@mixin rounded-corners { /*定义混合器,目的是添加跨浏览器的圆角边框*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}/*在样式表中通过@include来使用这个混合器,放在你希望的任何地方*/notice {

2020-07-18 16:43:42 25

原创 sass入门(二)

一. 导入sass文件@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中1.导入局部文件:可省略文件名开头的下划线例如:你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import “themes/night-sky”;。2.默认变量值;一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。举例说明:$link-color: blue;$link-color: red;a {

2020-07-18 16:13:32 28

原创 sass入门(一)

一. $声明变量$nav-color: #F90;nav { $width: 100px; width: $width; color: $nav-color;}//编译后nav { width: 100px; color: #F90;}$highlight-color: #F90;.selected { border: 1px solid $highlight-color;}//编译后.selected { border: 1px solid #F

2020-07-17 18:28:19 43

原创 vue中使用typescript的迷惑

一. 第三方插件库:vue-class-componentvue-class-component 是官方维护的TypeScript装饰器,写法比较扁平化import { Component, Vue, Watch, Prop } from 'vue-class-component'import Header from '@/component/header.vue'import MyMixin from './mixin.js' Vue.mixin(MyMixin); @Compone

2020-07-16 18:09:00 116

原创 前端项目学习

下载并运行https://github.com/Armour/vue-typescript-admin-template模板项目,熟悉了前端项目的基本结构,了解了vue,vuex,typescript,element-ui怎么结合一块开发项目,并自由添加路由以及页面。以下是我添加的页面:test组件<template> <div> <el-button type="primary" size="mini" plain="true"> 提交

2020-07-15 18:43:54 65

原创 vue学习笔记(五)

节点,树<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>上述 HTML 对应的 DOM 节点树如下图所示:每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。虚拟DOM:Vue 通过建立一个虚拟 D

2020-07-14 11:05:46 160

原创 vue学习笔记(四)

混入:混入提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}

2020-07-14 10:32:00 122

原创 vue学习笔记(三)

处理边界情况:访问根实例:在每个 new Vue 实例的子组件中,其根实例可以通过 $root property 进行访问(适用于小型应用,大型应用使用vuex来管理状态)// Vue 根实例new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } }})//所有的子组件都可以

2020-07-14 09:59:04 127

原创 vue学习笔记(二)

组件:组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。全局注册:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { //全局注册一个组件,第一个参数为组件名称 d

2020-07-13 17:51:25 136

原创 vue学习笔记(一)

1. 插值表达式(也可以是简单的表达式或者三元表达式)<span>message: {{ msg }}</span>2. 插入原始HTML<p v-html="rawHtml"></p>3. 插入html属性<div v-bind:id="dynamic"></div>4. 指令:带有v-前缀(1)v-if:条件渲染,这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="aweso

2020-07-13 16:44:42 61

原创 vuex的学习笔记与总结

一. Vuex是什么vuex是实现组件全局状态管理的一种机制,可以方便的实现组件之间数据的共享。二. 使用vuex统一管理状态的好处能够在vuex中集中管理共享的数据,易于开发和后期维护;能够高效地实现组件之间的数据共享,提高开发效率;存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步;三. 什么样的数据适合存储到vuex中一般情况下,只有组件之间共享的数据,才有必要存储到vuex中,对于组件中的私有数据,依旧存储在组件自身的私有data中。四. vuex的基本使用安

2020-07-13 11:50:27 66

原创 es6学习(上)

一. 字符串的新增方法includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。et s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true这三个方法都支持第二个参数,表示开始搜索的位置。et s = 'Hell

2020-07-10 18:07:31 47

原创 typescript中的装饰器(笔记)

装饰器是一种特殊类型的申明,它能够被附加到类申明、方法、属性或参数上,可以修改类的行为通俗的讲,装饰器就是一个方法,可以注入到类、方法、属性或参数上来扩展类、属性、方法、参数的功能常见的装饰器: 类装饰器、属性装饰器、方法装饰器、参数装饰器装饰器的写法: 普通装饰器(无法传参)、装饰器工厂(可以传参)普通装饰器: 不能传参 // 定义一个装饰器function logClass(param:any){ console.log(param)//输出:ƒ HttpClient() {}.

2020-07-10 16:46:09 87

原创 typescript中的枚举(笔记)

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。数字枚举enum Direction { //定义了一个数字枚举 Up = 1, //Up使用初始化为 1, 其余的成员会从 1开始自动增长,Direction.Up的值为 1, Down为 2, Left为 3, Right为 4 Down, Left, Right}我们还可以完全不使用初始化器:enum

2020-07-10 15:00:49 88

原创 typescript中的泛型(笔记)

例:不用泛型的话,函数可能是下面这样:function identity(arg: number): number { return arg;}或者,我们使用any类型来定义函数:function identity(arg: any): any { return arg;}使用any类型会导致这个函数可以接收任何类型的arg参数,这样就丢失了一些信息:传入的类型与返回的类型应该是相同的。如果我们传入一个数字,我们只知道任何类型的值都有可能被返回。因此,我们需要一种方法使返回值

2020-07-10 14:10:41 107

原创 typescript中的类(笔记)

1.类:class Greeter { greeting: string; Constructor(message: string){ This.greeting = mesage; } greet(){ Return “hello”+this.greeting; }}Let greeter = new Greeter(“world”);2.继承:Class Animal { Move(distance: number = 0){ Console.log(`animal

2020-07-10 11:37:27 54

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除