- 博客(35)
- 收藏
- 关注
RSS订阅原创 React----react-router(一)基础讲解
这里写目录标题一. 路由简介1. 什么是路由:2. React Router二. 路由组件与一般组件区别:三. React Router 基本使用四. react-router-dom相关API1. BrowserRouter 和 HashRouter区别:2.NavLink:3.Redirect:4. Switch:五. 路由:1. 嵌套路由:2.路由传参:总结:一. 路由简介1. 什么是路由:路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程.一个路由就是一个映射关系
2021-07-30 21:30:32
260
1
原创 React基础知识结尾(组件通信,PureComponent,innerHTML,Hooks)
目录一. 组件通信:父组件向子组件子组件传递给父组件:context二. React.PureComponent 与 React.Component三. children四.dangerouslySetInnerHTML一. 组件通信:父组件向子组件父级向子级通信 把数据添加子组件的属性中,然后子组件中从props属性中，获取父级传递过来的数例如:父组件App.js:import React,{ Component } from "react";import Sub from "./SubCo
2021-07-28 20:39:20
301
原创 React知识（面向组件编程，事件处理，受控与非受控组件以及生命周期）详解
目录:一. 面向组件编程:函数式组件:类式组件:组件的三大核心:1.state:2.props:3.refs二.对于事件的处理:三.受控组件与非受控组件:四. 生命周期:重要的勾子总结:一. 面向组件编程:注意:1.组件名必须首字母大写2.虚拟DOM元素只能有一个根元素3.虚拟DOM元素必须有结束标签渲染类组件标签的基本流程:1.React内部会创建组件实例对象2.调用render()得到虚拟DOM, 并解析为真实DOM3.插入到指定的页面元素内部函数式组件: <script
2021-07-27 20:59:39
189
原创 React基础讲解
一. 简介:(一). 官网:1.英文官网: https://reactjs.org/2.中文官网: https://react.docschina.org/(二). 介绍:React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架.一个用于构建用户界面的 JavaScript 库.(三). 特点:1.声明式编码2.组件化编码3.React Native 编写原生应用4.高效（优秀的Diffing算法）二.基础使用:(一). 引入re
2021-07-26 20:24:16
136
原创 TypeScript 完结篇 之 面向对象, 接口 and 泛型
一. 面向对象:面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。在程序中一切皆是对象。(一). 类要想面向对象，操作对象，首先便要拥有对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。class 类名 {
2021-07-02 20:57:46
111
原创 TypeScript 基础笔记(二)
(一). 编译选项1.自动编译文件使用命令:tsc xxx.ts -w2.自动编译整个项目如果直接使用 tsc 指令，则可以自动将当前项目下的所有ts文件编译为 js 文件。但是能直接使用 tsc 命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json注: tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译(1) 配置选项：include:指定那些文件需要被编译示例：//**代表任意目录//*代表
2021-07-01 20:03:21
106
原创 TypeScript 基础内容
TypeScript:一.简介:TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。二. TypeScript与JavaScript区别:TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，T
2021-06-30 21:15:17
104
原创 uni-app 介绍 及 项目搭建环境
一. 什么是uni-app:是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台.二. uni-app好处:开发者/案例数量更多平台能力不受限性能体验优秀,加载新页面速度更快、自动diff更新数据。周边生态丰富学习成本低开发成本低三.环境搭建:(一).HBuilderX注:可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，
2021-06-29 21:22:48
686
原创 微信小程序 本地存储 和 页面传参
微信小程序:前言:在微信小程序开发过程中,还会遇到很多知识运用:一.本地存储:在开发的过程中,常常会用到本地存储.数据存储生命周期与小程序生命周期一致好处:有了本地缓存，你的小程序可以做到：离线应用（已测试在无网络的情况下，可以操作缓存数据）流畅的用户体验减少网络请求,节省服务器资源(一).数据支持:原生类型、Date、及能够通过JSON.stringify序列化的对象(二).方法:1.同步（1）wx.setStorageSync(); 存储值wx.setStorageSync
2021-06-28 21:08:58
513
2
原创 小程序组件深入了解
前言:前面我们对组件进行基本了解,今天我们了解一下其他组件使用一.表单组件 /form表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。属性类型默认值说明report-submitbooleanfalse是否返回 formId
2021-06-25 20:44:35
360
1
原创 微信小程序 网络请求接口 及 生命周期
前言:前期我们对微信小程序有些基本了解,像标签,样式,组件....等.今天我们继前期进行继续的了解一. 网络请求HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后Web服务
2021-06-24 21:30:33
2915
1
原创 小程序 基础事件 组件以及插槽讲解
一. 基础认知:(一). 事件:1.表单事件: bindinput = ‘自定义名称’获取事件源对象 自定义事件中的第一个参数 例如:e.detail.value把输入框的值赋值: 注意:不能直接赋值this.setDate({ num:e.detail.value})2.点击事件: bindtap=“自定义事件1”注意:不能直接传参,通过自定义属性的方式<button bindtap="add" data-operation="{{1}}" ><button
2021-06-23 21:11:36
389
1
原创 小程序 文件配置 及 简单基础使用
一.小程序文件配置(一).全局配置文件:App.json1.page字段: 配置小程序页面路径里面的路径相当于vue的路由,谁在最上面显示谁{ "pages":[ "pages/index/index" //路径 ]}2.window:配置顶部导航栏 { "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black",
2021-06-22 20:52:09
358
原创 微信小程序的表层了解
一.什么是小程序？微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验"触手可及,即用即走"，无需下载安装,不用关心安装过多应用；整个小程序所有分包大小不超过 8M单个分包/主包大小不能超过 2M二.小程序优点平台封闭，上手简单跨平台运行使用方便开发适配成本低注:也有其他的小程序,例如:支付宝小程序,百度小程序,QQ小程序等三.环境准备(一).注册账号1.进入官网 官方文档点击介绍 => mp.weixin.qq.
2021-06-21 20:36:09
147
原创 WebpackDevServer 和 Hot Module Replacement(热更新)
一.WebpackDevServer每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，我们可以通过安装 webpackDevServer 来改善这方面的体验.1.安装:npm install --save-dev webpack-dev-server
2021-06-21 19:36:10
1964
原创 Webpack中 loader和plugins 配置
前言:前面我们说了webpack有很多详细的配置以及功能,今天我们就来了解一下webpack中loader和plugins的配置.一.loaderloader 用于对模块的源代码进行转换,loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。(一)使用:其实loader的使用很简单,基本步骤为:1.在webpack.config.js中指定loader2.安装指定的loader配置注:一些资源转换会用到多个load
2021-06-10 21:22:38
745
原创 webpack 基础了解
一.webpack是什么官方网站: https://webpack.js.org/中文网站: https://www.webpackjs.com/webpack 是一个用于现代JavaScript应用程序的静态模块打包工具.将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求.二.为什要使用Webpack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代
2021-06-09 20:54:53
144
原创 git 和 gitHub 协同操作
前言 ：在了解git和gitHub协同操作之前，我们先了解gitHub是什么以及如何注册一.gitHub:(一).gitHub是什么:gitHub是一个面向开源及私有软件项目的托管平台,git的一个远程仓库.是一个国外的网站,国内访问时会很慢.当然我们国内代码库gitee(码云),两者使用相似.今天我们主要了解gitHub(二).注册gitHub1.进入官网:百度搜索github,点击进入2.点击按钮注册:3.填写必要信息:昵称,邮箱地址(最好是常用的),密码点击按钮提交4.若
2021-06-08 21:15:52
112
原创 Git 前期操作及命令
文章目录一、版本控制:二、Git(一).Git是什么(二).历史(三).环境配置1.安装2.启动Git3.设置4.创建仓库5.常用的命令三、总结注:学习git之前需要先明白一个概念 版本控制一、版本控制:版本控制(Revision control)是一种在开发的过程中用于管理我们对文件,目录或工程等内容的修改历史,方便查看更改历史记录,备份以便恢复以前的版本的软件工程技术.简单说:就是用于管理多人协同开发项目的技术常见的版本控制工具:CVSSVNGit…版本控制产品非常多,我们今天.
2021-06-07 21:13:06
97
1
原创 了解一下最浅层的vue 路由(router)的使用
Vue Router 是 Vue.js 官方的路由管理器，或者说是SPA（单页应用）的路径管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。实现原理:SPA(single page application):单一页面
2021-06-04 20:15:11
171
1
原创 Vue 过滤器filter 的使用
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。过滤器也分为全局过滤和局部过滤(一):全局过滤器:通过 Vue.filter(‘名称’, 函数) 注册<div id="box"> <p v-for='i in data'>{{i|upw}}</p> {{age|xxoo}} //使用方法,在{{ }}内通过"管道符" | {{name|pin|xxoo}
2021-06-03 20:23:05
247
2
原创 带你起飞 了解 自定义指令(directive) 基础使用
作用:开发人员根据实际情况自定义指令，它的作用价值在于当开发人员在某些场下需要对普通DOM元素进行操作的时候。注册方式:Vue自定义指令和组件一样存在着全局注册和局部注册两种方式.(1)全局注册:通过 Vue.directive( ‘指令名称’ { } )注册 <div id="box"> <input type="text" v-xxoo:title='name' v-model='a'> </div> <script&g
2021-06-03 19:32:59
136
原创 简单了解 公交事件总线实现的原理(bus)
公交事件总线:指的是一个空的Vue实例,bus=new Vue({}),用于组件之间的 简单通信.过程:1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量2.通过这个对象调用.$emit('消息名','值')发布消息3.使用.$on('消息名',处理函数) 用来监听4. .$off('消息名') 销毁实例: <div id="box"> <laoduan></laoduan> <jiaxin v-if='flag
2021-06-03 10:08:42
535
原创 带你了解 vue 的生命 (生命周期)
一.什么是生命周期:vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期二.生命周期分类: 一共有八个时期:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed三.执行顺序:(上图)1.beforeCreate (创建前)在beforeCreate阶段vue实例的挂载元素el和数据对象data
2021-05-28 10:32:01
1557
原创 come on man!! (*^▽^*) 了解一下vue插槽(slot)
插槽:插槽主要分为三类:普通插槽,具名插槽,动态插槽.插槽供组件传对应的模板代码进去,让组件变得更加灵活,在父组件的子组件标签内定义内容不会被渲染,使用插槽就可以解决.(一)普通插槽:1.子组件内定义slot标签2.父组件的子组件标签内使用<template></template>标签插入内容 <div id="box"> <aa></aa> </div> <template id="my1">
2021-05-27 20:20:14
102
原创 深刻了解 组件Component基本使用
组件:组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树：(一)全局组件:通过vue.component('组件名称',{ })注册 <div id="box"> {{name}} <xxoo></xxoo> //通过组件名称调用 </div> <
2021-05-27 10:45:52
1165
1
原创 vue transitiontransition-group
过渡Vue 在插入,更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。语法格式: <div id="box"> <button @click='flag = !flag'>切换</button> <transition name='xxoo'> //name 指定动画名称 <p v-if='flag' key='1'>
2021-05-27 09:34:43
308
原创 vue修饰符
(一)事件修饰符:名称作用.stop阻止冒泡.prevent阻止默认行为.capture捕获,如果里面有冒泡的事件,谁加上他就先触发谁.self只有当target是当前元素才会被触发,冒泡和捕获的都不能触发.once被他修饰的事件只会触发一次.passive不阻止默认行为(不要和prevent一起使用,否则的话prevent就是失效) <div @click='alert(111)' class="a" > &
2021-05-23 18:31:59
31
原创 js中getBoundingClientRect()
js中getBoundingClientRect():getBoundingClientRect()获取元素位置，没有参数getBoundingClientRect()用于获得页面中某个元素的上下左右分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离(一)基本使用:可用于瀑布流页面数据加载时 document.getElementById('demo').onclick=function (){ if (documen
2021-05-22 17:58:26
288
原创 vue中 methods computed和watch方法
(一)methods 普通方法表示一个具体的操作,每次计算后都会把变量回收，再次访问的时候会重新计算。{{}}调用要写() {{aa()}}事件触发 @click='aa' 可以有()也可以没有如果需要传参,加上() 把$event这个特殊参数传进去可以获取事件对象 (二)computed 计算属性{{}}调用时不用加()计算属性有缓存,内容与上次一样时,直接从缓存获取,当所依赖的属性发生变化时,会重新计算调用计算属性时自动触发get方法,修改计算属性时自动触发set方法 comp
2021-05-22 17:42:14
179
原创 vue指令
vue指令vue将以v-开头特殊属性叫指令文章目录vue指令使用1.v-html & v-text2.v-on3.v-bind4.v-clock5.v-if / v-show6.v-model7.v-for提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考使用1.v-html & v-text区别:v-html 可以
2021-05-22 16:41:03
73
原创 vue基础入门
vue基础入门:官网: https://cn.vuejs.org/v2/guide/vue是一个渐进式的框架,是一个轻量级的 MVVM（Model-View-ViewModel,实现数据的双向绑定好处:不用直接操作DOM就能改变里面的数据使用:(一) 引入: 1.script直接引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 2.下载vue.js引入(二)实例化vue对象: <d
2021-05-22 14:50:11
91
原创 JavaScript数据类型(8种):
数据类型:基本数据类型:1.字符串(string):使用单引号或者双引号定义的; new String()声明字符串对象
2020-11-10 13:48:21
1101
原创 JavaScript基础及变量使用
JS:基本使用:1.引入外部js文件(引入外部文件的script标签内不能再写其他js内容)2.标签内的:<a href = "JavaScript:alert(标签内的)">标签内</a>3.基于事件的:<p onclick = "alert('基于事件的')">基于事件</p>4.写在script标签内的常用的输出方式1.alert() 警告框2.console.log() 控制台输出3.window.document.write()
2020-11-03 10:51:40
126
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人