- 博客(54)
- 收藏
- 关注
RSS订阅原创 vite+vue3使用localhost访问接口报错 500
用ip访问这个接口是可以通的 但是用localhost访问就报500或者200但不返回东西，原因就是代理少了个配置 secure: false, // 跳过https验证。
2023-03-15 17:14:18
2026
1
原创 git pull拉取不下来文件
关于git pull 拉不下来文件的解决方法git pull 拉不下来有可能是因为远端提交了新的文件修改太多 到几百上千条的时候就有可能拉不下来 这时候可以执行一个命令配置拉取的长度git config --system core.longpaths true执行完就可以了...
2020-03-24 10:27:28
7722
2
原创 面试题:在地址栏输入url到页面的渲染发生了什么
在地址栏输入url到页面的渲染发生了什么整体过程在这整个过程中，大致可以分为以下几个过程1. DNS域名解析2. TCP连接3. HTTP请求4. 处理请求返回HTTP响应5. 页面渲染6. 关闭连接DNS域名解析首先我们应该要知道的是，在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就...
2019-06-05 09:28:30
942
1
原创 redux的异步
redux的异步异步请求一个数据在actionCreators中请求数据 import * as type from './type'import store from '../index'const actionCreators = { countAdd () { let action = { type: type.INCRE...
2019-05-16 21:50:12
665
原创 react的 redux，分片版本
react的 redux，分片版本redux的使用流程1.安装 reduxyarn add redux2.在src目录下创建store文件夹3.在sore中创建文件 ： index.js ：全局的一些方法 , reducer.js：管理所有reducer的地方4.每个的数据单独放一个文件夹，例如count文件夹5.在count文件夹中创建四个文件： actionCreators.j...
2019-05-16 21:31:26
720
原创 react的ref通信
react的ref通信import React, { Component,Fragment } from 'react'class Father extends Component { nameChange = () => { console.log( this ) // this.refs.son.setState({ // ...
2019-05-16 21:31:05
315
原创 react的Hooks
react的HooksHooks解决的问题就是： 可以让我们在函数式组件内部书写 state和 生命周期钩子，原本函数式组件内部是不能定义state和方法的，只有lei组件内部可以useState 是用来定义state的useEffect 类似于componentDidMount // componentDidUpdate，当数据发生改变时就会触发 import React,{ us...
2019-05-16 21:30:41
188
原创 flux的基本使用
flux的基本使用什么是MVC？MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。V即View视图是指用户看到并与之交互的界面。M即Model模型是管理数据 ，很多业务逻辑都在模型中完成。在MVC的三个部件中，模型拥有最多的处理任务。C即Controller控制器是指控制器接受用户的...
2019-05-16 21:30:22
3021
原创 react-router-dom react的路由
react-router-dom react的路由react路由现在是4.+版本，使用的是react-router-dom，3.+的版本使用的是react-riuter路由的模式有两种老浏览器提供的 hash模式， 我们称之为： HashRouterH5提供的的 hsitory 模式，我们称之为 BrowserRouter注意： H5模式的路由需要后端支持路由的搭建hash路...
2019-05-16 21:29:57
585
原创 路由的监听和withRouter
路由的监听和withRouter每一个使用了路由的组件都会被Route包裹起来，每个被Route包裹的组件都会多出几个对象，通过this.props查看，所以当我们使用生命周期钩子函数中的 componentWillMount()函数或者 componentDidUpdate()函数都可以监听到路由的变化路由改变，组件的 this.props.location 中的 pathname 就会改变...
2019-05-16 21:29:28
816
原创 react的路由传参和接参
react的路由传参和接参传参 //路由传参写在 to 属性后面，必须是一个对象的形式，两个大括号，第一个大括号表示js语法，第二个大括号表示对象，可以传三个参数，pathname：路由名称，search：路径中的参数，state：数据<NavLink activeClassName = "active" to = { {...
2019-05-16 21:28:41
3201
原创 编程式导航
编程式导航每一个使用了路由的组件都会被Route包裹起来，每个被Route包裹的组件都会多出几个对象，通过this.props查看 import React,{Component} from 'react';class List extends Component{ push = () => { // push会将浏览信息存进浏览器中，replace...
2019-05-16 21:26:25
1421
原创 react的高阶组件
react的高阶组件高阶组件的作用就是实现组件复用，节省内存先定义一个函数式组价，传入一个参数，这个参数就是组件组件内返回一个class类组件，类名可以写也可以不写类组件内部可以写方法，数据，然后将参数当做组件返回出去，并将方法或者数据，传个这个组件代码 import React,{ Component } from 'react';const Hoc = ( Comp...
2019-05-15 21:52:33
2932
原创 react生命周期
生命周期react的生命周期分为四个阶段：初始化阶段，更新阶段，销毁阶段，错误处理阶段（错误处理是16.3新出的） UNSFE为过时的版本初始化阶段constructorstatic getDerivedStateFromProps//新版本才有的componentWillMount( ) / UNSAFE_componentWillMount()//未来淘汰版本render ()...
2019-05-15 21:52:14
730
1
原创 react的跨组件通信
react的跨组件通信react的跨组件通信，主要靠的就是Context，可以直接跨过中间层的组件，减少性能消耗代码 //我们需要把爷爷组件的数组传给儿子组件，如果通过传统的方法，需要使用props一级级往内传，会导致性能的消耗。而且很慢，所以有了跨组件通信 import React,{ Component,Fragment } from 'react';con...
2019-05-15 21:51:32
3126
原创 react的事件
react的事件React – 事件写法一共四种，我们推荐有两种箭头函数class App extends React.component{ change = () => {}//箭头函数会自动捕捉当前的上下文对象的this}在constructor函数中bind thisclass App extends React.component{ const...
2019-05-15 21:51:10
138
原创 条件渲染和列表渲染
条件渲染和列表渲染条件渲染通过三目运算render () { return ( <Fragment> <button onClick = { this.change }> change </button> <h3> { this.state.flag? '骏哥...
2019-05-15 21:50:48
295
原创 react的数据渲染
react的数据渲染react的书渲染分为两种，一种是props属性，一种是state状态propsprops外部传入父组件通过属性的形式将数据绑定在子组件身上，子组件通过 this.props获得外部传入的props只能通过外部修改 class App extends React.Component { name = 20000 // 实例属性 rende...
2019-05-15 21:50:27
499
原创 前端模块化
前端模块化前段模块化规范有哪些：AMD（require.js）依赖前置，require.js在申明依赖的模块时会在第一之间加载并执行模块内的代码，哪怕是不需要的模块也会一起加载；define是一个函数，所以函数内部一定要返回一个对象 //定义模块，define是一个函数，所以函数内部一定要返回一个对象 define ( [ ' 这里可以写一个文件名，表示依赖这个文件，不依赖的...
2019-05-15 21:50:03
238
原创 使用 npx 安装react
使用 npx 安装react1.安装npm最新版本 create-react-app 后面接的是项目名称npx create-react-app demoname2.进入项目并运行，根据提示运行开发环境的命令，一般是 yarn start3.这里有个选择：要不要抽离webpack的配置项文件，因为如果不离的话，webpack的配置文件是在nodemodules文件中的，一般我们是不建议修...
2019-05-15 21:49:32
2781
原创 react的组件书写方式和Fragment
react的组件书写方式和Fragment函数式 //第一种写法import React from ' react '; function add () { return ( <div></div>//这里写的是标签 ) }; //第二种写法 const ...
2019-05-15 21:48:59
536
原创 react 的样式写法
react 的样式写法内联样式const Home3 = function () { return ( //这里第一个大括号表示要插入js语法了，第二个大括号表示对象的括号 <div style = {{ color: 'red',fontSize: '50px',background: 'green' }}> 函数...
2019-05-15 21:48:26
11338
原创 vux基本使用
vuex的基本使用什么是状态？用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态什么是状态管理？用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态，这种管理的形式我们称之为 状态管理vuex是做什么的？（概念）vuex是一个集中式的存储仓库【状态】，类似于 本地存储、数据库，vuex是vue的状态管理工具，它的功能主...
2019-05-05 19:33:17
2848
3
原创 路由懒加载，数据缓存，路由动效，路由激活
路由懒加载，数据缓存，路由动效，路由激活路由懒加载概念： 指的是，对应的路由加载对应的路由组件—按需加载路由，点那个加载那个Vue异步组件webpack的代码分割const routerLaayLoad = ( comName ) => {//这里返回的是一个函数 return () => {//如若你一个函数 import (/* webpack...
2019-04-29 11:04:00
256
原创 导航守卫（也叫路由守卫）
导航守卫（也叫路由守卫）作用： — 类似 【保安】守卫路由进举例： 携带数据进出举例： 事情完成才能出导航守卫一共有三种形式- A: 全局导航守卫. 全局前置守卫 router.beforeEach(fn)fn中有三个参数to:表示要去哪里from：表示从哪里来next：表示通不通过关于next的使用next() 等价于 n...
2019-04-29 08:51:19
3962
原创 动态路由 & 路由传参 & 编程式导航
动态路由 & 路由传参 & 编程式导航vue cli3 配置反向代理在脚手架根目录下面新建一个 vue.config.js// vue.config.js中可以默认直接使用 http-proxy-middlewaremodule.exports = {//暴露出去 devServer: { proxy: { '/douba...
2019-04-29 08:47:13
383
原创 vue-router的基本使用步骤（全）
vue-router的基本使用步骤（全）vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境，如 ...
2019-04-29 08:29:37
3402
原创 webpack 的安装使用详解
webpack 的安装使用详解官网: https://webpack.js.org/中文: https://www.webpackjs.com/前身: browserify 缺点，只能转化js后有详细代码安装webpack全局npm i webpack webpack-cli -gcnpm i webpack webpack-cli -gyarn add webpack w...
2019-04-28 21:21:07
346
原创 vs code cli 脚手架的安装
vs code cli 脚手架的安装cli现在有两个版本，一个是cli2,一个是cli3,目前就市场来说主要是用cli3,但是cli2也是还有很多公司在使用的，所以最好都要学习使用一下；cli的两个版本是不兼容的，安装了cli2就不能安装cli3，装了cli3就不能cli2，如果想要两个都安装的话，就得安装一个工具，下面会讲到,cli2和cli3的安装命令是不一样的使用yard安装可能会比较...
2019-04-28 21:16:10
4318
原创 自定义插件库的步骤
自定义插件库的步骤1. 首先最起码的你得先安装好脚手架，cli3或cli2都行2. 文件的路径要看自己的实际情况来看3. 在src中创建一个lougin文件夹4. 然后再这个文件夹里再建一个components文件夹和一个index.js文件5. 在components文件夹中创建要定义的插件文件，比如创建一个loading文件6. 在loading文件中写好代码<templa...
2019-04-28 21:15:35
270
原创 props,filter,directive,slot
props属性验证，过滤器，自定义指令，插槽1. props属性验证常用形式：props: {key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型}//当我们需要满足某个条件才输出时，可以使用validateor( val )函数，函数内返回满足条件的props: { key: { validator( value ){...
2019-04-23 20:59:10
194
原创 vue的生命周期和钩子函数
vue.js生命周期组件生命周期（ 组件内钩子 ）钩子函数，就是options里面的key, 它的值是函数钩子函数写在其他配置项的后面组件的有哪几个阶段？初始化阶段运行中阶段销毁阶段初始化阶段分为两个大阶段， 每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一生 钩子函数 --》 （就像人在某个阶段做得一些事情， 这些事情是自动触发）有那四个钩...
2019-04-23 18:58:01
339
原创 vue.js中的mixins
vue.js中的mixinsmixins：混入；分为两种，一种是局部混入，一种是全局混入局部混入new Vue可以称之为组件或者是根实例，组件中的各种方法全部堆放在组件中，分工不够明确，出了问题就只能找组件的麻烦，所以vue.js就推出了一种方法，mixins。在组件外创建一个对象，里面写入组件中的其中一个方法，然后在组件中写入mixins：[ obj1，obj2，obj3]；外部写的方...
2019-04-22 19:23:39
1145
原创 Vue.js虚拟dom和diff算法
Vue.js虚拟dom和diff算法虚拟dom是什么呢？虚拟dom也叫vdom，其实就是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构;vdom一开始刚创建出来就会先渲染一次来看下代码//初始的虚拟dom结构var vdom = { vnode: { tag: 'div', attr: { ...
2019-04-22 19:23:09
410
原创 vue.js数据请求方式axios和fetch
vue.js数据请求方式axios和fetch1.axiosaxios是一个第三方库，需要引入文件，可以直接在bootcdn中直接下载文件引入axios返回的是一个promise对象，所以可以通过.then().catch()的方法调用写法是在methods中写一个函数，在函数里写axios方法，写法与ajax相类似axios的请求方式遵循restful规范，各种请求方式都可以，这里主...
2019-04-22 19:21:56
647
原创 vue.js中响应式原理和双向数据绑定原理
vue.js中响应式原理和双向数据绑定原理1.首先，我们来了解一下什么叫状态管理？什么叫做状态？什么叫做状态管理？我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理2.然后我们再了解一下什么叫Object.defiendProperty。Object.defineProperty( obj , obj.attr , descriptor )...
2019-04-22 19:20:58
7089
1
原创 vue.js组件嵌套和template的外用
Vue.extend组件的嵌套和template外用组件嵌套分为全局组件嵌套和局部组件嵌套组件嵌套需要将子元素写在父元素内局部嵌套子组件必须在父组件中注册之后才能在父组件的模板中使用全局组件嵌套Vue.component('Father',{ template: '<h3> father <Son></Son> </h3>'//...
2019-04-22 19:18:04
1590
原创 vue.js的组件注册
Vue.js的组件注册为什么会有组件注册呢1.vue.js文件中暴露出一个Vue的构造器函数， 这个函数的作用，是用来实例化出来一个实例， 那么这个实例也是一个组件， 我们称之为 ‘根实例’2.我们从vue detools（Vue谷歌调试工具）中我们发现这个实例的表现形式是一个标签2.有时出于需求，我们需要拓展一些方法，又不想写在根实例中，所以Vue.js就给出了一个解决方案，给出了一个方...
2019-04-22 19:16:57
191
原创 Vue.js组件嵌套和template外用
Vue.extend组件的嵌套和template外用组件嵌套分为全局组件嵌套和局部组件嵌套组件嵌套需要将子元素写在父元素内子组件必须在父组件中注册之后才能在父组件的模板中使用全局组件嵌套Vue.component('Father',{ template: '<h3> father <Son></Son> </h3>'//这里要把...
2019-04-20 18:25:00
3608
原创 Vue.extend组件的注册
Vue.js的组件注册为什么会有组件注册呢1.vue.js文件中暴露出一个Vue的构造器函数， 这个函数的作用，是用来实例化出来一个实例， 那么这个实例也是一个组件， 我们称之为 ‘根实例’2.我们从vue detools（Vue谷歌调试工具）中我们发现这个实例的表现形式是一个标签2.有时出于需求，我们需要拓展一些方法，又不想写在根实例中，所以Vue.js就给出了一个解决方案，给出了一个方...
2019-04-20 18:05:11
832
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人