sinat_29304113的博客

原创 React基础

原创 React学习

Create React App 是一个官方提供的工具，它能快速搭建一个简单的 React 开发环境，默认采用客户端渲染（CSR），适合初学者入门学习 React 或者开发小型、简单的单页面应用。Next.js 是一个用于构建 React 应用的 React 框架，提供了如服务器端渲染（SSR）、静态站点生成（SSG）、自动代码分割、路由系统等诸多特性，适合开发大型、复杂的应用，像企业级网站、电子商务平台等。React JS 的英文官网是：https://reactjs.org/。该命令会创建一个基于。

转载 typeScript

后，npm会引导你输入一系列问题，包括项目名称、版本、描述、入口文件、测试命令、git仓库地址、关键词、作者、许可证等。如果你不想逐个回答问题，可以使用。命令，这将直接生成一个包含默认设置的package.json文件‌。9.灵活性高（提供了any类型和as any断言）安装typescript的配置文件 生成。6.引入了泛型和一系列的TS特有的类型。8.轻松编译成js文件 （2-5）5.vscode代码提示更清晰。‌基本使用‌：在命令行中输入。安装typescript 在。7.强大的d.ts声明文件。

原创 Vue3笔记——（五）路由

创建utils/emitter文件。安装：npm i mitt。若父传子，属性值是飞函数。emitter.ts文件。若子传父，属性值是函数。作用：任意组件间通信。作用：祖传孙、孙传祖。$parent子传父。

原创 Vue3笔记——（四）Pinia

2.引入import axios from ‘axios’;创建store文件夹，创建Count.ts。4.getters类似计算属性。5.监听store数据中的变化。2.连续解构赋值+重命名写法。1.生成随机id的库。二、安装nanoid。

原创 Vue3笔记——（三）hooks、路由

1.传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。2.通过点击导航，视觉效果上“消失”了的路由组件，默认是被卸载掉的，需要的时候再去挂载。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。路由组件：考路由的规则渲染出来的 放在pages/views。优点：URL更加美观不带“#”,更接近传统的网站URL。3.制定路由的具体规则(什么路由，对应什么组件)2.传递params参数时，需要提前在规则中占位。2.路由params参数。

原创 Vue3笔记——（二）

挂载 onBeforeMounte、onMounted。更新 onBeforeUpdate、onUpdated。销毁 beforeDestroy、destroyed。创建 beforeCreate、 created。挂载 beforeMounte、mounted。更新 beforeUpdate、updated。生命周期、生命周期函数、生命周期钩子。【时刻】 【调用特定的函数】创建 setup。

原创 Vue3笔记——（一）

对于let name = ref(‘张三’)来说，name 不是响应式的，name.value是响应式的。返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的。2.核心内容：ref、reactive、computed、watch、生命周期…3.常用内容：hooks、自定义ref、路由、pinia、mitt…2.若需要一个响应式对象，层级不深，ref、reactive都可以。3.若需要一个响应式对象，且层级较深，推荐使用reactive。

原创 Cesium第二课

1.Geocoder：位置搜素工具，使相机飞到查询的位置，默认情况下使。8.Timeline：指示当前时间并允许用户使用刷子跳转到特定时间；5.NavigationHelpButton：显示默认的相机控制；7.CreditsDisplay：显示数据归属性，几乎总是需要；4.BaseLayerPicker：选择球上显示的影像和地形；2.HomeButton：使观察器飞回默认的视角；9.FullscreenButton：全屏显示。6.Animation：控制视图动画播放速度；用 Bing Maps；

原创 Cesium第一课

【代码】Cesium第一课。

原创 cesium基于克里金插值实现温度数据渲染

Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。这里主要是基于原生js实现的三维温度渲染效果，通过克里金插值的方式将数据在cesium上进行插值渲染。实现了根据温度值渲染出热力图的效果。

原创 收藏网站【经典】

静态资源库h：ttps://cdn.baomitu.com/

原创 cesium坐标系及坐标转换

cesium坐标系及其转换

原创 openlayers使用

1.安裝vue項目 vue create openlayerProject。2.npm install ol 安装到生产环境。

原创 后端返回文件流 前端进行下载

【代码】后端返回文件流 前端进行下载。

原创 VScode快捷键

中文设置:按快捷键“Ctrl+Shift+P”。在“vscode”顶部会出现一个搜索框。输入“configure language”，然后回车。“vscode”里面就会打开一个语言配置文件。 将“en-us”修改成“zh-cn”。 按“Ctrl+S”保存设置。关闭“vscode”，再次打开就可以看到中文界面了。禁用自动更新文件 > 首选项 > 设置（macOS：代码 > 首选项 > 设置，搜索update mode并将设置更改为none。对于行的操作快捷键重开一

原创 移动端问题

1.<meta content="no" name="apple-mobile-web-app-capable">删除默认的苹果工具栏和菜单栏需要显示工具栏和菜单栏时，不需要添加，默认值为no，即正常显示。如果content设置为yes，Web应用会以全屏模式运行，可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。2.<meta name=”apple-mobile-web-app-status-bar-style” content=b

原创 node\node-sass\sass-loader对应版本

node版本：v14.18.3node-sass版本：4.7.2sass-loader版本：7.3.1node版本：16.13.1node-sass版本：6.0.1sass-loader版本：10.0.1

原创 JavaScript Cookie

安装npm i js-cookie使用Cookies.set('foo', 'bar') 创建一个在整个网站上有效的 cookieCookies.set('name', 'value', { expires: 7 })创建一个从现在起 7 天后过期的 cookie，在整个站点中有效Cookies.set('name', 'value', { expires: 7, path: '' })创建一个过期cookie，对当前页面的路径有效Cookies.get('name') // =>

原创 ES6-let和const命令

声明变量：var letlet作用： let只在代码块内有效。(防止覆盖外层变量、循环遍历泄露为全局变量)案例{ let a = 10; var b = 1;}console.log(a);//a is not definedconsole.log(b);//1使用场景计数器 var a = []; for(let i=0;i<10;i++){ a[i] = function(){ console.log(i); }

原创 Vue3 ref函数

作用定义一个响应式的数据。语法const xx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）JS中操作数据：xxx.value模板中读取数据：不需要.value，直接<div>{{xxxx}}</div>备注接收的数据可以是：基本类型，也可以是对象类型基本类型的数据：响应式依然是Object.defineProperty()的get与set完成的。对象类型的数据：内部“求助”了Vue3.0中的

原创 Vue3 setup

理解A.Vue3.0中一个新的配置项，值为一个函数B.setup是所有Composition API（组合API）“表演的舞台”。C.组件中所用到的：数据、方法等等，均要配置在setup中。D.setup函数的两种返回值：（1）若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注！）<template> <div>一个人的信息</div> <h2>姓名：{{ name }}</h2> <h

原创 浏览器渲染原理

什么是进程Process、线程Thread栈内存（一个环境）堆内存示意图原理图浏览器渲染页面的机制和原理解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生成渲染树（Render Tree）Layout(回流)：根据生成的渲染树，计算他们在设备视口（Viewport）内的确切位置和大小，这个计算的阶段就是回流Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素。Dispaly:将像素发送给GPU展示在页面上性能优化

原创 Vue3官网使用及简介

Vue3带来了什么性能的提升打包大小减少41%初次渲染快55%，更新渲染快133%内存减少54%…源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Sharking…拥抱TypeScriptVue3可以更好的支持TypeScript新的特性Composition API（组合API） setup配置 ref与reactive watch与watchEffect provide与inject

原创 Vue2 Vue UI组件库

移动端常用UI组件库Vant https://youzan.github.io/vant/#/zh-CN/homeCube UI https://didi.github.io/cube-ui/#/zh-CN/Mint UI http://mint-ui.github.io/#!/zh-cnPc端常用UI组件库Element UI https://element.eleme.io/#/zh-CNIView UI https://www.iviewui.com/...

原创 Vue2路由vue-router

vue-router定义：vue的一个插件库，专门用来实现SPA应用。对SPA应用的理解单页Web应用整个应用只有一个完整的页面（index.html）点击页面中的导航链接不会刷新页面，只会做页面的局部更新数据需要通过对ajax请求获取什么是路由一个路由就是一组映射关系，多个路由需要路由器（router）进行管理key为路径，value可能是fuction或compnent路由的分类前端路由：（1）理解：value是component，用于展示页面内容（2）工作过程：当浏

原创 Vue2Vuex

Vuex是什么？概念：专门在vue中实现集中状态（数据）管理的一个vue插件，对vue应用中多个组价的共享状态进行集中式的管理（读/写），也是一种组件通信的方式，且适用于任意组件通信。什么时候使用Vuex多个组件依赖于同一状态来自不同组件的行为需要变更同一状态工作原理图搭建Vuex环境安装npm i vuex引入Vuex import Vuex from 'vuex' Vue.use(vuex)引入后就存在了$store属性import Vuex from 'vuex'Vue

原创 Vue2插槽

总结作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。分类：默认插槽、具名插槽、作用域插槽使用方式：默认插槽父组件<Catogary title="苹果"> <img src="./assets/logo.png" /></Catogary><Catogary title="香蕉"> <ul> <li>123</li>

原创 Vue2解决跨越配置代理

发送请求方式：xhrjQuery $.get $.postaxios (体积小) npm i axiosaxios.get("http://localhost:5000/students").then( (response) => { console.log("请求成功了", response.data); }, (error) => { console.log("请求失败了", error.message);

原创 Vue2动画效果

总结：作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。图示：写法：(1)准备好样式：元素进入样式：v-enter：进入的起点 v-enter-active：进入的过程中 v-enter-to：进入的终点单个元素过渡<template> <div> <button @click="show = !show">这是一个按钮</button> <!-- 过渡 :appear="true" 简写成 a

原创 webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）浏览器通过Window.sessionStorage和Window.localStorage属性实现本地存储机制。相关API:(1)xxxxStorage.setItem('key','value);该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。(2)xxxxStorage.getItem('person');该方法接受一个键名作为参数，返回键名对应的值。(3)xxxxStorage.removeIt.

原创 TodoList案例

App.vue<template> <div id="app"> <MyHeader :addArr="addArrFn" /> <MyList :dataArr="dataArr" :deleteArrFn="deleteArrFn" /> <MyFooter v-if="dataArr.length" :dataArr="dataArr" :checkAllDataFn="checkA

原创 VScode插件、快捷方式及三方库

Live Server在本机开了台服务器，将项目目录当做本服务器的根资源

原创 Vue2插件及scoped样式

插件功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。定义插件：对象.install = function(Vue,options){//1.添加全局过滤器Vue.filter(...)//2.添加全局指令Vue.directive(...)//3.配置全局混入（合）Vue.mixin(...)//4.添加实例方法Vue.prototype.$myMethd = function(){}Vue.p

原创 Vue2mixin(混入)

mixin(混入)功能：可以把多个组件共用的配置提取到一个混入对象使用方式：第一步定义混入，例如：{ data(){......}, methods:{......} ......}第二步使用混入，例如：(1)全局混入：在main.js中引入mixin.js 调用Vue.mixin(xxx)(2)局部混入：mixins:[‘xxx’]实例：School.vue<template> <div>{{x}}</div></templa

原创 Vue2组件间通信

ref属性被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式：打标识：<h1 ref="xxx">... ...</h1> 或<School ref="xxx">... ...</School>获取：this.$refs.xxx...

原创 Vue2脚手架vue-cli

vue-cli官方地址： https://cli.vuejs.org/zh/（command line interface）安装：第一步：（仅第一次执行）全局安装@vue/cli命令：npm install -g @vue/cli备注：如果出现下载缓慢请配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org第二步：切换到你要创建项目的目录，然后使用命令创建项目vue create xxx目录介绍：入口文件

原创 Vue2组件

组件目前存在问题：1.依赖关系混乱，不好维护；2.代码复用率不高。定义： 实现应用中局部功能代码和资源的集合（css\js\html mp3\mp4\字体…）作用： 复用编码、简化项目编码、提高运行效率种类：(1)非单文件组件：一个文件中含有n个组件。(2)单文件组件：一个文件中含有1个组件。Vue中使用组件的三大步骤：一. 定义组件（创建组件）二. 注册组件三. 使用组件（写组件标签）一、如何定义一个组件？使用Vue.extend(options)创建，其中options和ne

原创 Vue2生命周期

生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子。是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数的this指向vm或组件实例对象。常用的生命周期钩子：mounted:Vue完成模板的解析并把初始化真实DOM元素放入页面后，挂载完毕，调用mounted。发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【

原创 Vue2指令

指令v-bind: 单向绑定解析表达式，可简写为 :xxxxv-model: 双向数据绑定v-for: 遍历数组/对象/字符串v-on: 绑定事件监听，可简写为@v-if: 条件渲染（动态控制节点是否存在）v-else: 条件渲染（动态控制节点是否存在）v-show: 条件渲染（动态控制节点是否展示）v-text: 向其所在的节点中渲染文本内容，与插值语法的区别：v-text会替换节点中的内容，{{xxx}}则不会。v-html: 安全性问题...