自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(39)
  • 问答 (1)
  • 收藏
  • 关注

原创 antd vue Anchor getContainer属性踩坑

antd Vue Anchor锚点踩坑getContainer属性的坑场景是我一个app1页面要使用app7页面当做组件,app7页面如下![在这里插入图片描述](https://img-blog.csdnimg.cn/de047e0ca84c467e9f781364d51d492c.png)然后app1页面的增加是整个app7页面![在这里插入图片描述](https://img-blog.csdnimg.cn/10c21762983846378c613280f69c3f06.png)当使用getConta

2022-05-09 15:56:52 4606 7

转载 React(Hook介绍)

hook介绍Hook 是 React 16.8 的新增特性。它是完全可选的,并且100%向后兼容。它可以让你使用函数组件的方式,运用类组件以及 react 其他的一些特性,比如管理状态、生命周期钩子等。从概念上讲,React 组件一直更像是函数。而 Hook 则拥抱了函数,同时也没有牺牲 React 的精神原则。流程本质上的运作规则Hook 将组件中相互关联的部分拆分成更小的函数为什么要用?Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 R

2021-07-30 19:53:07 386

原创 React(React优缺点和原理)

学习原因之前呢我们也基本了解了React的基础和安装,以及一些使用方法,但是,我们却不知道它的竞争优势是什么,又为什么有这个竞争优势,下面就来讲解一下介绍react就是一个框架 他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序react相对其他框架优势: 高性能高效率 实现了前端界面的高性能高效率开发,所以说react很擅长处理组件化的页面流程:React快的原因就是使用了虚拟DOM和diff算法,那么什么时diff算法呢?虚拟DOM什么是虚拟DOM 1 var el

2021-07-29 19:51:39 1932 1

原创 React(组件的基本使用,生命周期,非受控组件和受控组件)

组件介绍:官方:作用:组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。你可以参考详细组件 API。用法:组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。个人理解:其实是一张简洁明了的图片,能够非常直观的看到组件和React之间的关系组件流程:1.三种不同的创建组件的方式函数式定义的无状态组件es5原生方式React.createClass

2021-07-27 19:34:39 269 1

原创 React (基础与安装)

介绍:React 是一个用于构建用户界面的 JavaScript 库,是用 JavaScript 构建「快速响应」的大型 Web 应用程序的首选方式。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。在 React 中,可以将页面中每个部分分成每一个独立的小模块,每个小模块就是组建,这些组件可以互相组合和嵌套,就组成每一个页面。相比传统操作 DOM 的前端开发方式,我们「主要要关心的是应用中数

2021-07-26 20:12:19 427 1

原创 uni-app (路由)

介绍:uni-app页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径和页面样式。类似的小程序在app.json中配置页面路由相同。所以uni-app的路由用法与Vue Router不同,如仍希望采用Vue Router方式管理路由,可在插件市场搜索Vue-Router。流程:1.路由路由uni-app有两种页面路由重定向方式:使用导航器组件扩展,调用API重定向。2.页面栈框架以栈的形式管理当前所有页面,当发生路由切换的时候,页面栈的表现如下:路由方式

2021-07-05 14:38:18 2930

原创 uni-app 框架简介和生命周期

介绍:uni-app 使用 vue 的语法 + 小程序的标签和 API。也就是和这些语法同样作用的框架.流程开发规范为了实现多端兼容,综合考虑编译速度,运行性能等因素,uni-app 约定了如下开发规范:页面文件向导 Vue单文件组件(SFC)规范组件标签靠近小程序规范,详见 uni-app 组件规范互连能力(JS API)靠近微信小程序规范,但需要将替换替换 wx 为 uni,详见 uni-app 接口规范数据绑定及事件处理同 Vue.js 规范,同时补充了 App 和页面的生命周期为兼

2021-07-02 11:03:05 1205

原创 uni-app快速上手

介绍:uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/ QQ /钉钉)等多个平台。DCloud公司拥有420万开发者,数十万应用案例,6.5亿手机端月活用户,数十款uni-app插件,70 +微信/ qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。uni-app在手,做啥都不愁。甚至不跨端,也是更好uni-app的小

2021-07-01 17:58:12 397 1

原创 TypeScript 简单基础快速上手

介绍:TypeScript 是一种有微软开发的自由和开源的编程语言,是JavaScript的超集.TypeScript拓展了JavaScript的语法,所以任何现有的JavaScript程序可以直接在TypeScript下工作,TypeScript是为大型应用开发而设计的,生产过程中可以保证安全性和兼容性.总之,就是极大的方便了我们的生产和开发的过程,提升效率.流程:1.安装有两种主要的方式来获取TypeScript工具:通过npm(Node.js包管理器)安装Visual Studio的T

2021-06-30 15:48:32 329

原创 微信小程序详解(7.自定义组件:Component 和 应用生命周期 页面生命周期)

介绍:首先,我们要明白,自定义组件是什么东西,能干什么,那么.既然是自定义组件,那么当然是自己定义的一个模块封装后,这个模块就叫做自定义组件,我们可以写多个功能不同的自定义组件,当我们需要使用时,只需要把它们引入到我们的项目中就可以直接使用了,极大的方便了我们的项目搭建和功能完善,并且使项目耦合降低,可读性强和维护性成本降低.步骤:1.创建一个自定义的文件夹,这个就不多做描述,直接在文件中和pages同级的位置创建一个自定义的文件,然后保存, 他就自动生成了(注意:这个方式只有在微信小程序中使用时

2021-06-29 19:22:11 3444

原创 微信小程序详解(6.WXS语法:变量,注释,运算符,语句,数据类型,基础类库)

介绍wxs中也是有变量存在的,因为我们也要做各种各样应用和引入,因此变量的存在是必须的,那么什么是WXS变量呢?WXS 中的变量均为值的引用。没有声明的变量直接赋值使用,会被定义为全局变量。如果只声明变量而不赋值,则默认值为 undefined。var表现与javascript一致,会有变量提升。流程1.变量名变量命名必须符合下面两个规则:首字符必须是:字母(a-zA-Z),下划线()剩余字符可以是:字母(a-zA-Z),下划线(), 数字(0-9)保留标识符以下标识符不能作为变量名

2021-06-28 15:10:56 1646 1

转载 微信小程序详解(5 wxml:条件渲染,模板,引用,wxs:模块)

条件渲染介绍:顾名思义,也就是对条件进行渲染,使得条件可以拥有各种各样的功能和样式判断.wx:if在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:<view wx:if="{{condition}}"> True </view>也可以用 wx:elif 和 wx:else 来添加一个 else 块:<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{leng

2021-06-25 19:45:14 768

转载 微信小程序详解(4.运算符和列表渲染)

运算符介绍运算符的意义就不必我多讲了把,主要就是为了简便计算,优化代码,给代码增强了逻辑性,让我们的运算都方便.流程1.基本运算符var a = 10, b = 20;// 加法运算console.log(30 === a + b);// 减法运算console.log(-10 === a - b);// 乘法运算console.log(200 === a * b);// 除法运算console.log(0.5 === a / b);// 取余运算console.log(10

2021-06-24 19:17:48 868 1

原创 微信小程序详解(3 页面配置 ,sitemap配置,数据绑定)

页面配置介绍:我们在对环境进行配置后,还需要对页面进行配置,页面配置可以改变页面的背景色,上拉,下拉,上面显示,下面显示等等功能,因此,我们要对页面进行配置,从而打到梅花界面,优化内容的作用流程:1.每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。(注意:页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。)文件内容为一个 JSON 对象2.页面配置有一下配置配置项3.这些都是我们配置项的功能,以及如何实现功能的属性,大家可以看

2021-06-23 17:50:25 545 1

原创 微信小程序详解(2 小程序全局配置详解)

entryPagePath string 否 小程序默认启动首页 pages string[] 是 页面路径列表 window Object 否 全局的默认窗口表现 tabBar Object 否 底部 tab 栏的表现 networkTimeout Object 否 网络超时时间 debug boolean 否 是否开启 debug 模式,默认关闭 functionalPages boolean 否 是否启用插件功能页,默认关闭 2.1.0subpackages Object[] 否 分包结

2021-06-22 18:00:36 1339

原创 微信小程序详解(1 小程序账号注册和安装小程序开发软件)

介绍微信小程序其实就是微信里的以前的一个应用号,为了迎合市场的需求,能给微信里那些优秀的公众号提供更好的技术,让他们能给粉丝提供更好更优的服务。可以不用下载,不用安装,却能够实现APP的几乎所有功能的一款轻应用产品。流程注册微信小程序号注册小程序1.我们点击右上角的立即注册2.选择小程序跳转(注意:我们绑定的邮箱不能和我们个人微信有过联系,最好使用新的邮箱)3.在注册完成后需要使用我们的绑定的邮箱进行激活,这里我已经绑定过,就不在上图了,最后,完成信息登记后,我们的小程序号就完成了

2021-06-21 15:30:28 1883

原创 git(3)分支与合并

Git分支git分支与合并介绍:git分支,什么是分支呢?字面意思,就是在同一个项目上做修改时有不同的选择,这就叫分支,而选择不同分支,就会有不同的结果,就想打游戏中多个不同的结局一样.(1)举个例子:开发某个网站。为实现某个新的需求,创建一个分支。在这个分支上开展工作,然后,别的人也有不同的分支,你们的任务不一样,修改或者说构建的内容不同,这就是分支.(注意:简单来讲就是同一个项目不同的任务,把项目原本的形态clone下来,然后改不同的地方,就叫做分支)分支的好处:同一个项目可以同时进行

2021-06-11 10:58:17 1087 2

原创 git(2)修改文件和版本穿梭

git 修改文件和版本穿梭git再次介绍:Git概念Git库中由三部分组成Git 仓库就是那个.git 目录,其中存放的是我们所提交的文档索引内容,Git 可基于文档索引内容对其所管理的文档进行内容追踪,从而实现文档的版本控制。.git目录位于工作目录内。1) 工作目录:用户本地的目录;2) Index(索引):将工作目录下所有文件(包含子目录)生成快照,存放到一个临时的存储区域,Git 称该区域为索引。3) 仓库:将索引通过commit命令提交至仓库中,每一次提交都意味着版本在进行一次更新。

2021-06-10 10:03:08 229

原创 git基础(1)安装,创建仓库,和提交本地

GitGit介绍:分布式版本控制工具 VS 集中式版本控制工具.Git是分布式版本控制系统,它就没有中央服务器的,每个人的电脑就是一个完整的版本库,因此我们就不需要联网了,因为版本都是在自己的电脑上...

2021-06-09 19:40:29 211

原创 webpack(2.loader基础讲解)

loader在webpack中有两个常用的插件,分别是loader(装载机)和plugin(插件).loader是什么,为什么要学?介绍:在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,泵且webpack会自动处理js之间相关的依赖.但是,在开发中为我们不仅仅有js代码处理,我们也需要加载css,图片,和一些高级的将es6转陈es5代码,将scss,less转成css,将.jsx,vue文件转成js为五年间等等对于wewbpack本身的能力来书,对于这些转化是不支持的,这

2021-06-08 16:57:48 154

原创 Webpack(1. 基础认知)

什么是webpack?webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具这是官方给出的回答,在我个人看来可以从两个地方理解1.用于现代 JavaScript 应用程序既然是用于JavaScript那么是不是可以理解成,在不进行特殊处理时,webpack能处理javascript,也只能处理javascript呢?2.静态模块打包工具什么是打包工具?打包工具能干嘛?在我们需要将多个静态模块在同一模板上使用时,多个文件分开加载要比在一起一个文件加载要大得多,这时候我

2021-06-07 19:23:06 197

原创 最全最详细的 component组件 详解

全局组件使用 Vue.component('组件名',{ template:`<div>模板</div>`, data(){ return:{ name:"张三' } }, methods:{ }})使用 <组件名></组件名>局部组件使用 Vue.component('组件名',{ template:`<div>模板</div>`, data(){ return:{ name:

2021-06-03 09:56:13 4088

原创 公交事件总线bus

公交事件总线:1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量2.通过这个对象调用.emit(′消息名′,′值′)发布消息3.使用.emit('消息名','值')发布消息3.使用.emit(′消息名′,′值′)发布消息3.使用.on(‘消息名’,处理函数) 用来监听4. .$off(‘消息名’) 销毁*1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量2发布 bus.$emit3监听var bus = new Vue() Vue.component('wxa

2021-06-03 09:47:34 293

原创 vue filter过滤器

全局过滤器Vue.filter('ming',function(da){})全局过滤器 Vue.filter('ming',function(da){}) 可以在任何地方使用 //如何使用过滤器 使用 {{属性|过滤器名字}}可以在任何地方使用//如何使用过滤器 使用 {{属性|过滤器名字}}局部过滤器在组件或vue实例里面使用 filters:{ 过滤器名(){}}定义的是局部过滤器,只能在自己的组件内部使用案例:<div id="box"&g

2021-06-03 09:44:02 114

原创 作用域(全局,函数,块级)

什么是作用域?作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说:作用域决定了代码区块中变量和其他资源的可见性.举个例子function outFun2() { var inVariable = "内层变量2";}outFun2();//要先执行这个函数,否则根本不知道里面是啥console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined从上面的例子可以体会到作用域

2021-06-03 08:50:03 224

原创 在Vue组件中如何获取Vuex状态(简单例子)

由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:// 创建一个 Counter 组件const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return store.state.count } }}每当 store.state.count 变化的时候,

2021-05-27 08:49:51 1802 1

原创 vueX的简单使用

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让

2021-05-27 08:45:27 83

转载 vueX的使用

初始化store下index.js中的内容import Vue from 'vue'import Vuex from 'vuex'//挂载VuexVue.use(Vuex)//创建VueX对象const store = new Vuex.Store({ state:{ //存放的键值对就是所要管理的状态 name:'helloVueX' }})export default store将store挂载到当前项目的Vue实例当中去 打开m

2021-05-27 08:40:34 88

原创 vuex安装

什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单来说vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.如何安装Vuex?直接下载/CDN引用.下载地址:https://unpkg.com/vuex

2021-05-27 08:35:56 254

原创 ES6复习重点摘要

ES6解构赋值1.可以同时给多个变量赋值2.不使用第三个变量的前提下也能交换两个变量的值3.函数可以使用解构赋值的方式返回值同时可以给多个变量赋值4.函数传参 function aa({name=“王五”,age}){} aa({age:“18”,name:“张三”})可以不用考虑顺序问题了模板字符串 ``可以换行定义,可以解析变量,空格回车会输出出来letlet 声明变量注意不能被定义过,变量不能被重复定义使用let关键字声明的变量没有提升,使用var关键字声明的变量,有变量提升块级

2021-05-20 13:22:52 115

原创 复习整理知识点重点 Bootstrap

Bootstrap移动设备优先为了确保适当的绘制和触屏缩放,需要在 之中添加viewport元数据标签。<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,maximum-scale=1,user-scalable=no">W

2021-05-20 13:19:28 277

原创 分页器的属性和使用

在写页面的时候数据多的时候,一个页面能显示的数据是有限的.其他数据想显示就需要分页器放到其他页面从而来放到页面上.分页器的属性一般为:@size-change=“handleSizeChange” 绑定的是 pagesize 改变的事件@current-change=“handleCurrentChange” 绑定的是 页码值 改变的事件:current-page=“queryinfo.pagenum” 代表当前显示第几页 这里动态的获取 data 里的 条数:page-size=“queryi

2021-05-19 19:51:09 704

原创 一个next()能造成多大的危害?亲身经历

本人在最近写的一个页面中遇到的一个问题我的首页基本已经写完了.然而在写路由守卫时,不知道遇到什么bug导致整个页面全部空白这是错误的路由守卫代码router.beforeEach(async(to,form,next)=>{ const token = localStorage.getItem('token'); // console.log(token) const isLogin= !!token; // console.log(isLogin)

2021-05-17 20:14:45 164

原创 js数据的强制转换和!!是什么

一、其他数据类型转换为string类型方法1.调用被转换类型的toString()方法(该方法不会影响到原变量,他会将转换的结果返回。)但是注意:null和undefined这两个值没有toString方法let a = 123;// 转换成stringlet b = a.toString();方法2:调用String()函数,并将被转换的数据作为参数传递给函数。注意:使用String()函数做强制类型转换时,对于Number和Boolean实际上就是调用的toString()方法,但是对

2021-05-17 18:44:44 98

原创 多功能轮播图(可自动,上下页,按钮跳转)

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"> div.lunbo { width: 600px; height: 399px; border:5px solid #ccc; margin:100px auto 20px; overflow: hid

2020-11-05 19:45:00 395

原创 面向对象以及特点

历史汇编语言,C语言 对象过程化C++,Java,javaScript,Python,PHP 面向对象编程思想三大特征1、抽象(封装)抽象是指强调实体的本质、内在的属性。在系统开发中,抽象指的是在决定如何实现对象之前的对象的意义和行为。使用抽象可以尽可能避免过早考虑一些细节。2、继承继承性是子类自动共享父类数据结构和方法的机制,这是类之间的一种关系。在定义和实现一个类的时候,可以在一个已经存在的类的基础之上来进行,把这个已经存在的类所定义的内容作为自己的内容,并加入若干新的内容。3、多态多

2020-11-04 08:57:30 365 5

原创 日期函数以及简单运用

日期函数 var d = new Date() //创建日期对象,默认会存放当前系统时间 // console.log(d) 3-2.html:12 Mon Nov 02 2020 17:54:05 GMT+0800 (中国标准时间) // var a = d.getDate() //日期 // var a = d.getTime() //时间戳1604302501572 // var a = d.getDay() //周几 // var a =

2020-11-03 09:31:20 178

原创 用js写盒子移动(按钮点击移动)

方块和按钮<button id="btn1">块1向右移动</button><button id="btn2">块1向左移动</button><button id="btn3">块2向右移动</button><button id="btn4">块2向左移动</button><hr><div class="c1"></div><div class="c2"&g

2020-11-02 09:14:31 3884

原创 关于js和jQuery的区别和各自的优点

js和jQuery的区别和各自的优点一 js和jQuery的本质区别js是一种开发语言类似于 java,而jQuery则是以js封装为基本框架的前端框架.JQuery是一个优秀的Javascript框架。其宗旨是写更少的代码,做更多的事情。它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器,使用户能更方便地处理HTML document、event、实现动画效果,并且方便地为网站提供AJAX交互。二 js和jQuery各自的优点js的优点:<1>.ja

2020-11-01 19:52:08 1803 1

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除