博客的博客

原创 关于ES6的一些东西

变量提升代码执行前会对变量进行提前声明，对未声明的变量会赋一个初始值Undefined。但是如果使用 let 或者 const 就不会被变量提升，代码必须要执行到 let 或者 const 的那一行才会对变量进行声明。...

原创 React 错误边界的使用方法

关于React错误边界在未引入错误边界时，如果组件出现错误则会导致整个页面出现错误，对于用户非常不友好，因此有必要引入错误边界对可能出现错误的元素进行包裹在React的生命周期函数中有一个componentDidCatch，它能够对子元素的错误进行捕获componentDidCatch(error,errorInfo)使用方法：单独创建一个错误边界组件//ErrorBoundary.jsximport React from 'react'export default class Err

原创 Redux的基本使用方法(计数器)

Redux就像Vuex一样哈哈，可以让组件之间的数据传递变得方便传统的数据传递非常的麻烦，如果最上层组件要将数据传递给最下层的组件需要逐级传递，组件的耦合度会变得非常的高，要是其中一个组件出现问题的话会导致整个项目出现问题。而Redux是把数据放到一个单独的空间中，需要使用数据的时候就不需要逐级传递了，直接去这个单独的空间中取数据就行了首先安装Reduxnpm i --save-dev Redux创建一个单独的.js文件用来存储数据以及关于这个数据的方法//count.jscons

原创 React子组件向父组件传递参数

父组件//Parentimport React from 'react'import Child from './Child.jsx'export default class App extends React.Component{ constructor(){ super() this.state={} } parentClickHandle=(data)=>{ console.log(data); } render(){ ret

原创 使用Webpack搭建一个最基本的React环境

1.首先初始化项目结构npm init包名随意填写好之后一路按回车，直到文件夹内生成 package.json 文件，在与package.json同级的目录下新建一个文件夹用于新建项目由于Node.js会自下而上的找包，所以我们把包安装在最外层（也就是package.json同级目录），让Node.js自己去找包，这样我们就只用安装一次包非常的方便。2.安装webpack相关包npm i webpack webpack-cli webpack-dev-server -Dnpm i h

原创 React的最基本使用方式

1.创建Webpack-dev-server运行环境此处省略嘻嘻嘻…2.下载和导入React 和ReactDOM包//下载npm install react react-dom -D//在index.js中导入import React from 'react'import ReactDOM from 'react-dom'3.创建虚拟DOM元素// 创建虚拟DOM元素// 参数1：创建的元素类型，字符串，表示元素的名称// 参数2：是一个对象或null，表示当前这个DOM元素的

原创 webpack devserver

devServer的一些配置项contentBase运行代码的目录contentBase:resolve(__dirname,'build')watchContentBase监视ContentBase目录下的所有文件，一旦文件发生改变就会重载watchContentBase:truewatchOptions监视文件watchOptions:{ //ignored，忽略某些文件，node_modules不需要监视 ignored:/node_modules/}compre

原创 webpack resolve

resolve是配置路径的规则，可以配置引入资源的默认路径alias配置解析路径别名原本要这样引入css文件和js文件的import './src/js/index.js'import './src/css/index.csss'非常不方便而且容易出错，如果需要引入很多个文件就需要写很多次但是可以通过配置解析模块路径别名来解决配置方法：resolve:{alias:{ $css:resolve(__dirname,'src/css'), $js:resolve(__dirna

原创 webpack dll动态链接库

如果在项目中引入了第三方资源，直接对项目进行打包的话，会把第三方资源也一起打包到入口文件中，这样会使得入口文件非常大。使用dll动态链接库可以把第三方资源和项目的入口分别打包。使用方法：1.首先在与webpack.config.js同级的目录下创建webpack.dll.js文件//webpack.dll.jsconst{resolve}=require('path')const webpack =require('webpack')module.exports={ entry:{

原创 webpack externals

       如果在入口文件里引入了第三方资源然后直接打包的话，会把第三方资源也一起打包进去，这样的话打包出来的文件会变得很大。而且有时候引入的是CDN资源，不需要打包但是却被打包了，所以需要externals来排除不需要打包的资源。直接打包的后果，会把jquery也打包到文件中去使用externals进行排除const{resolve}=require('path')const HtmlWebPackPlugin=requi

原创 webpack oneOf和enforce的使用方法

oneOfwebpack原本的loader是将每个文件都过一遍，比如有一个js文件 rules中有10个loader，第一个是处理js文件的loader，当第一个loader处理完成后webpack不会自动跳出，而是会继续拿着这个js文件去尝试匹配剩下的9个loader，相当于没有break。而oneOf就相当于这个break用法rules:[ oneOf:[ { test:/\.css$/,

原创 webpack sourcemap的使用以及区别

webpack sourcemap是一种能够提供打包后代码错误位置的技术，有了这项技术我们能够知道代码错误的具体位置使用方法在webpack.config.js中配置即可devtool:'source-map'有几种不同的配置项source-map：外联会生成一个外部的sourcemap文件，同时会提示代码出错的源文件inline-source-map内联会在打包好的入口js内生成一个sourcemap字符串出错提示也是标明了错误的源文件webpack-source

原创 Webpack 将css提取成单独文件分离

如果采用默认配置导入css的话 打包后是这样的css样式会被直接写入到html中去，可能会带来不必要的影响，这时候就需要把css单独分离出来首先要安装mini-css-extract-pluginpostcss-loaderpostcss-preset-envnpm i mini-css-extract-plugin postcss-loader postcss-preset-env -D然后配置webpack.config.jsconst{resolve}=require('path'

原创 Webpack中core-js的使用

IE浏览器无法兼容es6语法，我们可以使用core-js进行兼容性处理，从而使IE浏览器也能够正常的解析es6语法比如const这个函数在Chrome中能够正常的执行而在IE中则不能执行使用core-js首先需要安装core-js、babel-loader和@babel/preset-envnpm i core-js babel-loader @babel/preset-env -D然后在webpack.config.js中配置core-js{

原创 关于vue-cli编译报错3221225477 的一种解决办法

vue-cli 编译时会报错 serve ended with error code 3221225477有可能是Node.js的版本不兼容。卸载后安装稳定版的Node.js可以解决

原创 Vuex的基本概念与使用方法

Vuex是什么 Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex统一管理数据的好处① 能够在Vuex中集中管理共享的数据，易于开发和后期维护②能够高效的实现组件之间的数据共享，提高开发效率③储存在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步什么样的数据适合存储到Vuex中 一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可核心概念概述Vuex中的核心

原创 使用图形化界面创建vue项目

在命令行窗口输入vue ui按下回车后会自动在浏览器中打开图形化界面点击创建可以选择创建项目的文件夹点击在此创建新项目只用填写项目名称和git的存储信息就好了选择预设，第一次的话请手动第一项是问你是否使用历史模式的router第二项是问你lint的配置文件第三项是问你什么时候校验语法创好了 很简单...

原创 使用命令行创建vue项目

准备首先需要安装vue-cli 打开命令提示符输入npm i -g @vue/cli安装完成后就可以开始创建vue项目1.基于命令行的方式创建vue项目vue caeate project-name2.基于图形化界面的方式创建vue项目vue ui开始创建项目1.在终端中输入vue create vue_project_01 按下回车开始创建项目2.此时会...

原创 vue获取DOM元素

由于vue不推荐操作DOM节点所以最好不要使用原生的getElement方法vue有一个reference属性它能够获取DOM节点在想要获取的节点上添加ref这个属性 ，这个节点就会被实例获取到操作DOM节点this.$refs.myp......

原创 async/await的基本用法

async/await是ES7引入的新语法，可以更加方便的进行异步操作async关键字用于函数上(async函数的返回值是Promise实例对象)

原创 axios用法

axios的基本特性axios是一个基于Promise用于浏览器和node.js的HTTP客户端它具有以下特性支持浏览器和Node.js支持Promise能拦截请求和相应自动转换JSON数据axios.get('/url') .then(ret=>{ //data属性名称是固定的，用于获取后台相应的数据 console.log(ret.data)})axios...

原创 fetch用法

fetch概述1.基本特性更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版基于Promise2.语法结构fetch(url).then(fn2) .then(fn3) ... .catch(fn)3.fetch的基本用法...

原创 Promise用法

Promise概述Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。使用Promise主要有以下好处：可以避免多层异步调用嵌套问题（回调地狱）Promise对象提供了简洁的API，使得控制异步操作更加容易Promise用法实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务resolve和reject两...

原创 JavaScript中的闭包

闭包是一个拥有许多变量和绑定了这些变量的环境表达式（通常是一个函数），因而这些变量也是该表达式的一部分。在JavaScript中，所有的function都是一个闭包，不过一般来说，嵌套的function所产生的闭包更为强大，也就大部分时候所谓的闭包。 闭包的原理JavaScript允许使用内部函数，即函数定义和函数表达式位于另一个函数的函数体内。而且这些内部函数可以访问它们所在的外部函...

原创 JavaScript原型链

原创 flex布局

flex布局原理flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 ●当我们为父盒子设置为flex布局以后，子元素的float、clear和vertical-align属性将失效●伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式常见父项属性...

原创 webpack在 vs code上无法执行的解决方法 无法加载文件 \npm\webpack.ps1。 无法在当前系统上运行该脚本。有关运行脚本和 设置执行策略的详细信息

在Visaul Studio Code中无法使用webpack命令的问题webpack : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1。未对文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1 进行数字签名。无法在当前系统上运行该脚本。有关运行脚本和...

原创 Vue的生命周期

beforeCreate：这是第一个生命周期函数，表示实例被完全创建出来之前，会执行他在beforCreate生命周期函数执行的时候，data和methods中的数据还没有被初始化Created：这是第二个生命周期函数，在Created中data和methods都已经被初始化好了如果要调用methods中的方法或操作data中的数据，最早只能在Created中操作beforeMou...

原创 记录一些面试题

1.JavaScript中的定时器有哪些？答：1.setTimeout 只执行一次，在指定的时间数后调用函数或计算表达式2.setInterval 会一直重复执行，按照指定的时间来调用函数或者执行表达式，此方法会不停的调用函数，直到clearInterval()被调用或者窗口被关闭...

原创 vue的键盘修饰符

vue的键盘修饰符就是在按下按键或者弹起按键的时候执行某个操作<body> <div id="app"> <h4>{{ msg}}</h4> <input type="text" name="" id="" @keyup.enter="add" v-model="msg2"> </...

原创 vue中的过滤器

过滤器就是将一些字符串过滤 修改字符串的内容<body> <div id="app"> <p>{{msg|msgFormat}}</p><!--这里是选择使用哪一个过滤器--> </div> <script> //定义一个Vue全局的过滤器，名字叫做msgForm...

原创 vue控制css

vue控制css的一种方法，使用v-bind直接传递一个数组 这里的class需要使用v-bind做数据绑定<div id="app"> <h1 :class="['red','fw']">这是一个H1</h1> </div><style> .red{ color: red; ...

原创 vue事件修饰符

vue的事件修饰符1. .stop.stop是阻止事件冒泡<div id="app"> <div class="inner" @click="divhandler"> <input type="button" value="点击" @click="btnhandler"> </div>...

原创 vue的一些指令

1.v-cloak的基本使用方法，解决插值表达式闪烁问题首先在使用插值表达式的时候<body> <div id="app"> <p>{{ msg}}</p> </div> <script> var vm=new Vue({ el:'#app',...

原创 webpack-dev-server的基本配置 和一些错误

2019年9月5日webpack-dev-server是一个非常强大的工具，能够自动检测到我们的代码更新并且自动打包当完成webpack的配置之后 -------->webpack的基本配置1.安装webpack-dev-server 在控制台输入 'npm i webpack-dev-server -y' ...

原创 webpack的基本配置

2019年9月4日webpack的基本配置当我们在控制台直接输入webpack执行命令的时候,webpack做了以下几步1.首先，webpack发现，我们并没有通过命令的形式，给他指定入口和出口2.webpack就会去项目的根路径中，查找一个叫做'webpack.config.js'的配置文件3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析完成配置文件后，就得到了...

原创 vue路由嵌套

2019年8月25日路由的嵌套主要是用的是routes的children属性var router=new VueRouter({ routes:[ {path:'/account', component:account, children:[ ...

原创 vue路由传参

2019年8月24日使用query方式传递参数<router-link to="/login?id=10&name=zs">登录</router-link>?后就是需要传递的参数在login模块中添加created函数var login={ template:'<h1>登录---{{$route.query.id}}-...

原创 vue路由

2019年8月23日vue路由的基本使用首先引入vue的包，再引入vue-router的包将路由规则对象注册到vm实例上，用来监听URL地址的变化，然后展示相应的组件var vm = new Vue({ el: '#app', data: { }, methods: {}, ...

原创 vue父子组件

2019年8月20日父组件向子组件传值props中的数据都是从父组件传递给子组件的把父组件传递过来的parentmsg属性，先在数组中定义一下，才能使用这个数据<script> var vm=new Vue({ el:'#app', data:{ msg:'父组件中的数据' ...