自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(35)
  • 收藏
  • 关注

原创 vite创建vue3之使用ts router vuex 以及 @ 引入组件

vite创建vue3+ts项目

2022-12-08 16:42:31 384 2

原创 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 297

原创 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 188

原创 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 102

原创 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 2914 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 388 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 744

原创 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 111

原创 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"&gt

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 1164 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'&gt

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 178

原创 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关注的人

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