Darryl、-优快云博客

原创 React 组件传值简单易懂版

React 组件传值 1.兄弟传值 1.兄弟1： giveProps(msg){ this.props.msg("给兄弟的值") } <div onClick={this.giveProps.bind(this)}></div>

2021-01-07 16:40:05 222

1、Vuex是什么： Vuex是专门对于vue.js应用程序开发的状态管理模式其采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式法相变化。人话：将多个组件共享的变量全部储存在一个对象里面，然后将这个对象放在顶层Vue实例中，让其他组件可以使用，共享这个对象中的所有变量属性。一句话：状态管理模式 2、哪种情况下使用：大型开发，多个状态，在多个界面存在共享问题用户登录状态，用户名称，头像，地理位置等共存信息商城类项目中：购物车，收藏商品 3、具体使用Vuex.

2020-10-16 11:02:30 180

原创前端必知——前端渲染/前端路由与后端渲染/后端路由

后端渲染：网页发展初期，使用的都是后端渲染。由于以前开发是基于JSP(java server page)/PHP/C#等技术编写，我们访问一个网站，通过输入url网址，服务器获取到地址后，后台通过jsp技术，渲染页面，在jsp代码中包括：html+css+java代码，所以请求数据不是通过ajax请求，而是java后台直接请求，通过java来在后台直接动态渲染页面，传回服务器的只有：html+css代码，以及渲染好的页面，返回客户端直接加载页面，页面也就只包括：html+css代码。这就是：“后端渲染”

2020-08-11 11:17:30 654

原创前端知识储备（三）Webpack

Webpack 模块化开发打包认识webpack webpack的安装 webpack的起步 webpack的配置 loader的使用 webpack中的Vue plugin的使用搭建本地服务器 1.认识webpack 官网解释：从本质上讲，webpack就是一个现代的JavaScript应用的静态模块打包工具。可以理解为：模块和打包。 2.webpack的安装步骤 3.webpack的起步基本使用：首先需要一个页面：index.html，然后分别开发js文件，我们暂且起名：ma

2020-07-31 11:34:17 238

原创搜索结果会将搜索框输入的内容高光效果

msg是搜索结果的内容；highLightStr是搜索框输入的内容。 highLight(item, highLight) { return this.highLightTableMsg(item, highLight) }, highLightTableMsg(msg, highLightStr) { if (msg == null) { msg = '' } if (highLightStr == null) { highLightStr = ''

2020-07-29 15:21:42 250

原创 Vue：插槽 slot

为保持组件化开发能满足一个组件布局的多种类展示，使用slot插槽即可解决。方法如下：  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script

2020-07-24 10:22:24 156

原创 Vue：计算属性Computed

1.计算属性的写法 2.计算属性与methods函数的比较区别：methods每次都会调用，但是computed有缓存机制，会直接去缓存，不会重新计算一次，提高效率。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/

2020-07-23 13:44:40 155

原创 Vue基础：组件

组件的构成组件模块化是Vue的渐进式框架的特点，了解组件的构成是迈开模块化开发的第一步，组件分为全局组件和局部组件。全局组件： <body> <div id="app"> <cpn></cpn> </div> </body> `//全局组件 const cpn1 = Vue.extend({ template:`<div> <h1>我是全局标题1</h1>

2020-07-23 13:39:02 229

原创 JQ奇偶选择

$("table tr:even").click(function(){ console.log("选择奇数行") //表示获取一个table 所有的索引为偶数的行，其中索引index 从0开始算起， 0算偶数！ }) $("table tr:odd").click(function(){ console.log("选择偶数行") //表示获取一个table 所有的索引为奇数的行，其中索引index 从0开始算起， 0算奇数！ }) ...

2020-06-28 11:27:06 667

原创 SVG渐变动画实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Deom SVG!</title> </head> <style> #pink{ width: 582px; height: 383px; position: absolute; left: 8px; background: url(https:/

2020-06-19 09:01:52 1489

原创前端知识储备（二）闭包

1.什么是闭包？函数执行，形成一个私有的执行上下文，保护里边的私有变量不受外界的干扰，除了保护私有变量外，还可以保存一些内容，这样的模式叫做闭包。. 2.闭包的作用闭包的作用有两个，保护和保存。 2.1保护团队开发时，每个开发者把自己的代码放在一个私有的作用域中，防止相互之间的变量命名冲突；把需要提供给别人的方法，通过 return 或window.xxx 的方式暴露在全局下。 jQuery 的源码中也是利用了这种保护机制。封装私有变量。 2.2保护选项卡闭包的解决方案。 // 事件绑

2020-06-01 17:17:39 246

原创前端知识储备（一）“this”

this 知识线什么是 this(对象) => 不同情况下的 this 指向（4 种） => 如何改变 this 指针（3 种） => 三者的共同点与不同点（传参、执行） => call、apply、bind 源码实现 1.什么是 this 指针? 答： this 就是一个对象。不同情况下 this 指向的不同，有以下几种情况。 2.各种情况下的 this 指向问题：答：对象调用， this 指向该对象（前边谁调用 this 就指向谁）。 var obj = { na

2020-06-01 10:48:41 247

原创 Json排序

对json按某个键的值进行排序 $(document).ready(function () { //对json进行降序排序函数 var colId="age" var desc = function(x,y) { return (x[colId] < y[colId]) ? 1 : -1 } //对json进行升序排序函数 var asc = function(x,y) { return (x[colId]

2020-05-21 13:56:01 927

原创移动端H5页面总是取到缓存的问题

页面获取不到最新页面（总从缓存抓取）修改Html的header块 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> <META HTTP-EQ

2020-05-18 17:27:18 1596

原创区别安卓和ios的手机系统方法

区别安卓和ios的手机系统方法 var u = navigator.userAgent, app = navigator.appVersion var isAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 ...

2020-05-13 16:29:21 292

原创 HTTP状态码的含义

HTTP状态码2**,3**,4**,5** 代表的含义 1开头：（被接受，需要继续处理。）这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。 2开头（请求成功）这一类型的状态码，代表请求已成功被服务器接收、理解、并接受 3开头（请求被重定向）这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重...

2020-05-13 14:31:06 282

原创安卓图片按压出现白色边框解决办法

安卓图片按压出现白色边框解决办法（设置css）-webkit-tap-higlight-color:transparent;

2020-01-03 16:27:09 715

weixin_43805971的博客