- 博客(35)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React基础入门(路由传参,NavLink,redux) --第三篇
NavLink的介绍他可以实现路由的高亮,NavLink比Link高级一点,他自身有一个属性点击哪个路由就会自动给点击的那个路由添加一个类名为active的属性,如果不喜欢这个样式,也可自行用activeClassName给他添加一个自定义的类名,注意:这里如果使用bootStrop的情况,因为普通的类权重低,所以样式会被bootstarp覆盖,这里加上! important就ok了.<NavLink activeClassName="atdh" to="/Home">home跳转</
2021-07-30 19:44:47
1189
转载 React基础入门(虚拟DOM，Diff算法和React路由) --第三篇
虚拟DOM本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容Diff算法执行过程初次渲染时，React会根据初始化的state（model），创建一个虚拟DOM对象（树）根据虚拟DOM生成真正的DOM，渲染到页面当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树）与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面代码演示组件rende
2021-07-29 20:19:46
282
原创 React基础入门(JSX与React组件基础,进阶) --第二篇
接着上篇补充一下JSX的剩余基础知识1. JSX 中使用 JavaScript 表达式嵌入 JS 表达式数据存储在JS中语法：{ JavaScript表达式 }注意：语法中是单大括号，不是双大括号！const name = 'Jack'const dv = (<div>你好，我叫：？？？</div>)嵌入 JS 表达式const name = 'Jack'const dv = (<div>你好，我叫：{name}</div>)
2021-07-27 21:13:38
468
1
原创 React基础入门(React 基础与JSX) --第一篇
1.React 基础1.1React 概述1.1.1什么是React?React 是一个用于构建用户界面的 JavaScript 库。用户界面：HTML页面（前端）React 主要用来写HTML页面，或构建Web应用1.1.2React的特点声名式基于组件学习一次，随处使用声明式:你只需要描述 UI（HTML）看起来是什么样，就跟写HTML一样React 负责渲染 UI，并在数据变化时更新 UI代码:const jsx = <div className="app"&g
2021-07-26 20:34:33
306
原创 Vue3.0入门基础教学(一)
1. 认识 Vue31) 了解相关信息Vue.js 3.0 “One Piece” 正式版在今年 9 月份发布2 年多开发, 100+位贡献者, 2600+次提交, 600+次 PRVue3 支持 vue2 的大多数特性更好的支持 Typescript2) 性能提升打包大小减少 41%初次渲染快 55%, 更新渲染快 133%内存减少 54%使用 Proxy 代替 defineProperty 实现数据响应式重写虚拟 DOM 的实现和 Tree-Shaking3) 新增特性
2021-07-02 20:52:34
570
原创 ❤TypeScript新手入门(二)＜面向对象＞完结❤
第二章：面向对象面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说：操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车
2021-07-01 19:10:51
348
原创 ❤TypeScript新手入门(一)❤
第一章 快速入门0、TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同
2021-06-30 19:39:38
242
原创 ❤微信小程序项目(三)❤
7. 商品详情⻚⾯7.1. 效果7.2. 页面逻辑渲染商品详情数据接口1.首先在接口拿到数据,放在组件js文件的data中,从data中拿到数据遍历渲染到页面,使用flex容器布局css,完成之后,还有个大图预览,大图预览是小程序官方中的一个方法, 点击图片之后显示当前点击的图片进行大图预览, 大图预览的参数写在下方:wx.previewImage(Object object)以 Promise 风格 调用：支持小程序插件：支持，需要小程序基础库版本不低于 1.9.6在新页面中全
2021-06-29 21:08:33
265
原创 ❤微信小程序项目(二)❤
6. 商品列表⻚⾯6.1. 效果6.2. 逻辑代码接⼝:商品列表请求接口加载商品列表数据代码如下:这是父组件的代码,里面包含着子组件(serachInput)和(tabs),设置好组件之后使用接口获取到数据,遍历渲染到页面上<!--pages/goods_list/goods_list.wxml--><SearchInput/><tabs tabs="{{tabs}}" bindtabsItemChange="handeleItemChange">
2021-06-28 22:04:31
274
1
原创 ❤微信小程序项目(一)❤
1. 项⽬搭建1.1. 新建⼩程序项⽬填入自己的appid1.2. 搭建⽬录结构⽬录名作⽤styles存放公共样式components存放组件lib存放第三⽅库utils⾃⼰的帮助库request⾃⼰的接⼝帮助库1.3. 搭建项⽬的⻚⾯⻚⾯名称名称⾸⻚index分类⻚⾯category商品列表⻚⾯goods_list商品详情⻚⾯goods_detail购物⻋⻚⾯cart收藏⻚⾯
2021-06-25 20:43:59
321
原创 微信小程序基础(四)
11. ⾃定义组件类似vue中的自定义组件⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。11.1. 创建⾃定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成可以在微信开发者⼯具中快速创建组件的⽂件结构在⽂件夹内 components/header ，创建组件 名为 header11.1.1. 声明组件⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明header.json{ "component": true, //现在的版本一创建就会
2021-06-24 20:09:32
278
1
原创 微信小程序基础(三)
10.4. swiper微信内置轮播图组件10.4.1. swiper滑块视图容器。具体属性官网链接:swiper详细使用官方网址10.4.2. swiper-item滑块仅可放置在swiper组件中，宽高自动设置为100%。10.5. navigator导航组件 类似超链接标签属性类型默认值必填说明最低版本targetstringself否在哪个目标上发生跳转，默认当前小程序2.0.7urlstring否当前小程序内的跳转链接1.
2021-06-23 20:06:15
771
3
原创 微信小程序基础(二)
7. 模板语法WXML（WeiXin Markup Language）是框架设计的一套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。7.1. 数据绑定7.1.1. 普通写法<view> {{ message }} </view>Page({ data: { message: 'Hello MINA!' }})7.1.2.组件属性<view id="item-{{id}}"> </view>Page({ dat
2021-06-22 20:23:45
595
1
原创 微信小程序基础(一)
1. 微信小程序介绍微信⼩程序，简称⼩程序，英⽂名 MiniMini ProgramProgram ，是一种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫一扫或搜一下即可打开应⽤1.1. 为什么是微信小程序 ？微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；推⼴app 或公众号的成本太⾼。开发适配成本低。容易⼩规模试错，然后快速迭代。跨平台。1.2. 微信⼩程序历史2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读了微信的四⼤价值观
2021-06-21 21:15:30
193
原创 (二)webpack的热更新及提取css为单独文件
接上一个文档我们接着往下讲3.5 打包其他资源(只要不属于html,js,sass,css,less的)创建文件修改配置文件const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { filename: 'built.js', path
2021-06-10 20:18:03
238
原创 (一)Webpack介绍小白入门四种打包方式
Webpack第 1 章：webpack 简介1.1webpack是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在weboack看来前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理.它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2 webpack 五个核心概念Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打 包，分析构建内部依赖
2021-06-09 21:19:51
1238
原创 Git的原理及GitHub的基本操作(创建远程库,邀请新成员)
1. Git 基本原理1.1哈希 哈希是一个系列的加密算法，各个不同的哈希算法虽然加密强度不同，但是有以下几个共同点：①不管输入数据的数据量有多大，输入同一个哈希算法，得到的加密结果长度固定。②哈希算法确定，输入数据确定，输出数据能够保证不变③哈希算法确定，输入数据有变化，输出数据一定有变化，而且通常变化很大④哈希算法不可逆Git 底层采用的是 SHA-1 算法。哈希算法可以被用来验证文件。原理如下图所示：1.2Git 保存版本的机制1.2.1 集中式版本控制工具的文件管理机制以文件
2021-06-09 20:09:34
556
原创 Git的介绍和基本的命令
1. Git&&GitHub1.Git简介:Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。2.什么是版本控制?如果你用Microsoft Word写过长篇大论，那你一定有这样的经历：想删除一个段落，又怕将来想恢复找不回来怎么办？有办法，先把当前文件“另存为……”一个新的Word文件，再接着改，改到一定程度，再“另存为……”一个新文件
2021-06-09 19:44:52
231
原创 Promise回调地狱
Promise 是抽象的异步处理对象 语法 它本身就是一个类,也可以说是构造函数 构造函数需要一个 函数作为参数. 这个函数叫做"执行器函数". 1)执行器函数在创建Promise对象时立即执行. 2)Promise对象有状态和值a.pending undefinedb.resolved/fulfilled ‘哈哈’ 表示成工c.rejected ‘呜呜’ 表示失败
2021-06-03 13:58:05
220
1
原创 深拷贝与浅拷贝的区别
深拷贝 把里面的内容一个一个的复制出来,开一个新内存放进去,内存地址不一样,互不影响如下面这种为深拷贝 var a = 123; var b = a; console.log(a) //123 console.log(b) //123 a=456 console.log(b) //123深拷贝遍历数组var arr1 = [11,22,33] var arr2=[]
2021-06-03 13:48:16
215
1
原创 Js的六种遍历数据方法及Es6新增的数组方法
①forEach()遍历数组 //遍历数组 arr.forEach(function(value,index,arr){ // 参数1 数组里面对应的每个值 // 参数2 数组里面的索引 // 参数3 原数组 // console.log(value) // console.log(index) console.log(arr)
2021-06-03 09:55:58
432
原创 Cookie、session和localStorage、以及sessionStorage之间的区别
本篇文章主要是文字介绍一、Cookie、session和localStorage的区别cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些c
2021-06-03 09:46:15
302
原创 Js中的作用域和生命周期
作用域 : 变量在哪个范围区间内 可以使用生命周期 : 变量从创建后, 什么时候被销毁掉局部变量函数内部定义的变量, 只能在函数内部使用, 所以称作局部变量. 一般情况,函数执行结束,局部变量会被销毁.<script> function test(){ let a = 100 } test() alert(a) // Uncaught ReferenceError: a is not defined /
2021-05-28 09:49:46
374
1
原创 js中的箭头函数以及它的this指向
箭头函数的5种形式没有返回值的,没参数的 function a (){ console.log(111) } var a = () => console.log(111); a()没有返回值的,有参数的 function a (name){ console.log(name) } var a = (name) => co
2021-05-27 18:54:48
668
1
原创 移动web开发之流式布局介绍
流式布局目标:能够知道移动web的开发现状能够写出标准的viewport 视口能够使用移动web的调试方法能够说出移动端常见的布局方案能够描述流式布局能够独立完成移动端页面1.移动端基础1.1浏览器现状pc端常见浏览器:360,谷歌,火狐,qq,百度,搜狗,IE移动端常见浏览器:uc,qq,欧朋,百度手机,360安全,谷歌,搜狗手机,猎豹国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过了的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改
2021-05-27 10:16:59
207
原创 Vuex中的getter和modules
Getter介绍①从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法②会返回一个新数据,不会影响到state里面的老数据③store中的数据发生变化.getter的数据也会跟着变化举例:const store = new Vuex.store({ state:{ count:0 },getters:{ userId1:function(state){ return state.count * 2 }}})它的使用方法:第一种使用方式 thi
2021-05-24 19:15:28
1457
原创 Vuex中的mutaion,action
Mutation用于变更Store中的数据提交更新数据的方法,必须是同步的(如果需要异步使用action)1.只能通过mutation变更store数据,不可以直接操作Store中的数据2.通过这个方式虽然操作起来稍微繁琐一些,但是可以集中监听所有数据的变化注意:里面不要执行异步操作//定义mutationconst store = new Vuex.Store({ state:{ count:0 }, mutations:{ //第一个参数是state对象 add(state)
2021-05-21 19:37:49
468
1
原创 vuex状态管理库中的State公共数据源
Vuex状态管理模式vuex是什么?是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享好处:①能够在vuex中,集中管理共享的数据,易于开发和后期维护②能够高效地实现组件之间的数据共享,提高开发效率③存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步安装: npm install vuex --save使用:src里面创建store文件夹创建index.js配置vuex 如图:在index.js文件中引入:import Vue from "vu
2021-05-21 19:25:12
365
原创 vue项目中的路由传参,更新
路由query传参首先我们先把写好的接口引入到当前文件中,方便后续使用,如图所示:我们这里先不看 {getProperty, getMenus} 这两个后端写的方法,这里我们先用{getClassify}第一步我们要请求数据,那什么时候请求呢? 肯定是在他挂载之后把数据请求过来.所以这里的代码我们这样写:这里是我们组件中data存放的数据????data() { return { classify: [], //数据库请求过来的数据 用它渲染的值 classify
2021-05-21 09:06:57
576
原创 项目中遇到的小知识点
Vue项目中遇到的小知识点今天来给大家说一下项目中遇到的几个小知识点1…js中的!!js中的一个!一般为取反作用,一般取反获得true的有如:null , ’ ’ , 0 , undefined 在js中隐式转换都是fals,通过!可以将它转为true!null=true!''=true!0=true!undefined=true!! 就是把任意数据类型的数据强制转换为Boolean类型 ,正常判断对象a不为空的代码if(a!=null&&typeof(a)!=un
2021-05-19 11:16:58
140
原创 DOM简介及选取元素(新手入门)
DOM 文档对象模型JavaScript 通过 DOM (Document Object Model) 对浏览器中打开的网页文档进行修改.document 对象浏览器窗口中的 网页文档, 被看成 DOM 模型的一个实例对象. document 对象它属于 window 对象的 子对象DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点 都是一个dom节点对象。选取DOM节点遗留DOM 早期
2020-11-05 09:00:23
2298
1
原创 BOM 对象模型(全,适合萌新,通俗易懂)
BOM 浏览器对象模型JavaScript 通过 BOM (Browser Object Model) 操作浏览器.window 对象浏览器打开的每一个窗口, 被看成 BOM 的一个实例对象. window 对象window 对象中的 子对象:document 对象 包含当前窗口所显示页面文档的所有内容, 是学习的重点.location对象 操作地址栏history对象 访问历史记录screen对象 查看屏幕信息navigator对象 查看浏览器特性（版本、厂商、
2020-11-04 09:13:49
819
2
原创 JavaScript变量及数据类型(萌新必看)
变量用处1.让代码可以重复使用 (重用性)2.修改代码方便,灵活 (灵活性)<script> document.write('i love you <br>') document.write('i love you <br>') document.write('i love you <br>') document.write('i love you <br>')</script>上面 ‘i love
2020-11-03 19:03:56
206
原创 原生AJAX操作及跨域问题
原生AJAX Ajax全称“Async Javascript And XML”即：异步的javascript和XML。它是一种称谓，并不指代某项具体的技术，准确来说是一系列技术的集合.现在，所有的无刷新操作都被称为“Ajax”. 使用ajax避免了整页数据的刷新，也减少了请求等待的时间，提高了用户体验xhr 对象用一个对象发送HTTP请求var xhr = new XMLHttpRequest();XHR 对象的属性和方法属性readyState 准备阶段response
2020-11-03 08:13:01
1825
1
原创 JavaScript入门萌新须知
JavaScript 多数情况下,被用作 浏览器端 表单数据验证, 操作改变网页元素内容从而实现网页特效,以及根据用户的一些操作信息,如鼠标单击,移动操作等 做出相应的反馈, 从而实现与用户的交互.因此, JavaScript 早期被定位为 浏览器端脚本语言.通过对Chrome V8引擎的再封装, 有了最近广泛使用的 Node.js, 将它的触角延伸到服务器端的后台服务, 配合 MongoDB 实现完全的后台功能, 这样 JS 的功能得到极大的拓展. 现在通过第三方提供的打包工具，JS被用于混合环境
2020-11-01 19:39:02
1981
12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人