永远的净心-CSDN博客

原创 React笔记

React 中有三种构建组件的方式React.createClass()、ES6 class 和无状态函数。react 组件的划分业务组件技术组件根据组件的职责通常把组件分为 UI 组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。两者通过 React-Redux 提供 connect 方法联系起来。flux 思想Flux 的最大特点，就是数据的"单向流动"。用户访问 ViewView 发出用户的 ActionDispatcher 收到 Action，要求 Sto

2022-02-28 11:13:18 566

原创 vue笔记2

自定义指令钩子函数bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

2022-02-28 10:49:11 403

原创 vue笔记

vue组件通讯的方式props、emits都在子组件中.父组件向子组件传递数据通过props传递，子组件传递给父组件通过emits都在子组件中.父组件向子组件传递数据通过props传递，子组件传递给父组件通过emits都在子组件中.父组件向子组件传递数据通过props传递，子组件传递给父组件通过emit触发事件子组件:事件源头@click@click="btnClick(item)" methods: { btnClick(item) { this.$emit("itemcl

2022-02-28 10:39:43 208

原创 redux笔记

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是 view 发出一个 action，派发

2022-02-28 10:18:31 261

原创 react 生命周期函数

初始化阶段：getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount：组件即将被装载、渲染到页面上render:组件在这里生成虚拟的 DOM 节点componentDidMount:组件真正在被装载之后运行中状态：componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新

2022-02-28 10:16:36 82

原创 sass和 less

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出一些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Less也是一种动态样式语言. 对CSS赋予了动态

2022-02-28 10:12:45 229

原创 jQuery笔记

jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$(“p”) 选取 <p> 元素。$(“p.intro”) 选取所有 class=“intro” 的 <p> 元素。$(“p#demo”) 选取所有 id=“demo” 的 <p> 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href=’#’]") 选取所有

2022-02-28 09:57:14 326

原创函数防抖和节流

函数防抖定义:函数防抖一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。场景:防抖经常用在我们搜索框输入搜索，点击提交，防止等.函数节流定义:-函数节流（throttle）是事件被触发后，n秒内只执行一次事件处理函数。场景:-常用于JS动画等频繁触发的事件中，如resize，touchmove，mousemove，scroll等。...

2022-02-28 09:21:20 79

原创 ES6的笔记

call、apply、bind区别apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）；如果使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素.bind（）–也是改变函数体内this的指向;bind会创建一个新函数，称为绑定函数，当调用这个函数的时候，绑定函数会以创建它时传入bind（）方法的第一个参数作为this，传入bind（）方法的第二个及以后的参

2022-02-28 09:20:52 64

原创 ES6笔记2

1.块级作用域const和letlet表示声明变量，而const表示声明常量，两者都为块级作用域2.模板字符串模板字符串 ${name}3.箭头函数箭头函数：左边是参数集合，右边是函数体箭头函数比普通函数语法更简洁箭头函数没有this,普通函数都有自己的this箭头函数不能使用new箭头函数没有arguments参数，可以通过 …arg获取箭头函数没有原型属性6.箭头函数不需要function关键字来创建函数省略return关键字继承当前上下文的this关键字函数的参

2022-02-28 09:20:26 298

原创数组遍历的几个方法

1、forEach：遍历开始以后无法停止，如果要遍历整个数组，那就使用这个方法；2、map：根据当前数组映射出一个新的数组；3、some：遍历整个数组，返回值true就停止循环（返回false继续循环）返回值：如果数组中的有一项回调函数返回true，那么结果为true，否则为false；（或者这样理解：数组别遍历完，那么结果为false，否则为true）4、every：与some相反，返回false就停止循环（返回true就继续循环）5、filter：过滤数组，返回一个新的数组6、reduce：

2022-02-27 19:54:13 1993

原创 ajax笔记

异步加载和延迟加载1.异步加载的方案：动态插入script标签2.通过ajax去获取js代码，然后通过eval执行3.script标签上添加defer或者async属性4.创建并插入iframe，让它异步执行js5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。js延迟加载的方式defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js...

2022-02-27 18:10:00 140

原创多种跨域方案

• 源(域名)：协议 + 域名 + 端口• 同源：相同的协议 && 相同的域名 && 相同的端口• 不同源（跨域）：不同的协议 || 不同的域名 || 不同的端口跨域之1 – 服务器中转请求说明：同源策略只针对浏览器（客户端）跨域之2 – 设置基础域名+iframe说明：前提是基础域名必须一致跨域之3 – window.name+iframewindow.name的特点：每个浏览器窗口都有一个全局变量window(包含iframe框架contentWind

2022-02-27 18:07:23 91

原创 HTTP报文-请求方式

HTTP最大的作用是客户端发生请求，服务器给出响应，客户端向服务器发送请求的方式有很多种。• 8种• GET/POST• OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法• HEAD：返回与GET请求相一致的响应，响应体被返回• PUT：向指定资源位置上传其最新内容（form表单不支持）• DELETE：请求服务器删除Request-URI所标识的资源（form表单不支持）• TRACE：回显服务器收到的请求，主要用于测试或诊断• CONNECT：连接改为管道方式的代理服务器

2022-02-27 16:38:31 2131

原创网络相关笔记

websocket-允许服务器向客户端传递信息，实现服务器和客户端双工通信特点-与http协议有良好的兼容性-建立在TCP协议之上，和http协议同属于应用层-数据格式比较轻量，性能开销小，通信高效-可以发送文本，也可以发送二进制-没有同源限制，可以与任意服务器通信http和websocket的区别-http是短连接，因为请求之后，都会关闭连接，下次请求需要重新打开连接-websocket是长连接，只需要通过一次请求来初始化连接，然后所有连接都是通过TCP连接进行通信HTTP:　　（

2022-02-27 16:37:02 61

原创事件环 Event Loop

进程一CPU正在进行的一个任务的运行过程的调度单位浏览器是一个多进程的应用程序进程是计算机调度的基本单位任务管理器（mac活动监视器）查看chrome的进程情况每一个tab都会开启一个进程浏览器有一个主进程（用户界面）每一个tab各自有独立的渲染进程（浏览器内核Renderer，渲染引擎）、网络进程（网络请求）、GPU进程（动画与3D绘制）、插件进程（devtool）每个进程里包含了多个线程运行进程包含线程，线程在进程中运行渲染进程GUI渲染线程（渲染页面）JS引擎线程GUI渲染

2022-02-27 16:26:07 101

原创 Webpack笔记

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。主要是用来将前端资源打包、压缩、优化。webpack 打包原理：当webpack 处理应用程序时，不会根据 package.json 文件中的devDependencies 或者 Dependencies 的内容对文件进行打包。而是会根据入口文件做查询，加载其所依赖的包模块，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一

2022-02-27 16:18:21 147

原创 window方法

window.location.reload();刷新window.location.href=window.location.href;刷新window.close();关闭窗口，不弹出系统提示，直接关闭　window.close()相当于self属性是当前窗口window.parent.close()是parent属性是当前窗口或框架的框架组window.addEventListener() 方法，事件监听window.removeEventListener()方法，移除事件的监听。win

2022-02-27 10:33:41 1475

原创 axios的笔记

get请求Request Payload数据为输入数据，即传给后台数据。即为get请求中params数据。get请求的返回结果为预览里的数据，如从后台返回的整个表格数据。get请求中的result数据即为整个表格数据。查看预览params 是即将与请求一起发送的 URL 参数import request from '@/utils/request'const url = "https://api.innofund.info"//"http://120.53.122.74:8080"//"http

2022-02-27 10:03:53 387

原创 this.$router.push

路由传值 this.$router.push()（1）想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL（2）当点击时，这个方法会在内部调用，即点击等同于调用 router.push(…)　　a)声明式：　　b)编程式：router.push(…)c)该方法的参数可以是一个字符串路径，或者一个描述地址的对象。// 字符串router.push(‘home’)// 对象ro

2022-02-27 09:30:13 2047

原创 this.$route.query的使用

1、router/index.js {undefined path:'/mtindex', component: mtindex, //添加路由 children:[ {undefined path:':shopid', component:guessdetail } ] },2、传参数this.$router.push({undefined pa

2022-02-16 17:55:08 6572

原创路由的笔记

路由属性route路由对象暴露了以下属性：1.route路由对象暴露了以下属性：1.route路由对象暴露了以下属性：1.route.path字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。2.route.params对象，包含路由中的动态片段和全匹配片段的键值对。3.route.params对象，包含路由中的动态片段和全匹配片段的键值对。3.route.params对象，包含路由中的动态片段和全匹配片段的键值对。3.route.query类型: Objec

2022-02-16 17:50:59 207

原创 vuex的笔记

vuex适用于没有关联的组件之间要使用同一组数据。action中处理异步，mutation不可以mutation做原子操作action可以整合多个mutation的集合mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测) $watch 严格模式下会报错action 异步操作，可以获取数据后调佣 mutation 提交最终数据1、流程顺序“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。2、角色定位基于流程顺序，

2022-02-16 17:06:22 321

原创 localStorage

(1).储存数据localStorage.setItem(‘accessToken’, 'Bearer ’ + response.data.result.accessToken)(2).取出数据localStorage.getItem(‘accessToken’)(3).删除储存数据localStorage.removeItem(‘accessToken’)(4).更改数据localStorage.setItem(‘accessToken’, ‘更改后’ + response.data.res

2022-02-16 16:59:25 172

原创返回控制语法：return

为事件处理函数返回return：false; ,作用在于阻止默认事件行为和取消默认动作，比如，在默认情况下点击一个元素，那么页面就会跳转到元素href属性指定的页，那当你用return false;时，就相当于一个终止符，而return true;相当于一个执行符。<a href="eoh.html" onclick="return add_onclick()">open</a> //return false/true　　　<script>　　　

2022-02-16 16:54:01 306

原创 created mounted

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行

2022-02-16 16:50:44 319

原创 vue笔记

watch比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时

2022-02-16 16:03:12 151

原创 vue的生命周期钩子函数

首先明确的一个前提是：请求是异步的。在Created生命周期里Data才生成，而请求返回的数据需要挂载在data上，所以Created里是可以初始化请求的，但是 Created 的这时候DOM还没有初始化；Mounted生命周期里DOM才初始化渲染完成beforeCreate // 这时候data，methods函数未挂载created // data已挂载、methods函数已挂载beforeMount // 相关的render函数首次被调用,dom未挂载 mounted // dom已渲染挂载

2022-02-16 10:03:54 172

原创 forEach() 和map()

forEach(): 针对每一个元素执行提供的函数。map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。原数组.forEach( 新数组.push)map()适用于你要改变数据值的时候。不仅仅在于它更快，而且

2022-02-16 09:55:44 150

空空如也

空空如也