- 博客(41)
- 资源 (11)
- 收藏
- 关注
RSS订阅原创 Cesium第二课
1.Geocoder：位置搜素工具，使相机飞到查询的位置，默认情况下使。8.Timeline：指示当前时间并允许用户使用刷子跳转到特定时间；5.NavigationHelpButton：显示默认的相机控制；7.CreditsDisplay：显示数据归属性，几乎总是需要；4.BaseLayerPicker：选择球上显示的影像和地形；2.HomeButton：使观察器飞回默认的视角；9.FullscreenButton：全屏显示。6.Animation：控制视图动画播放速度；用 Bing Maps；
2024-04-07 10:25:43
384
原创 cesium基于克里金插值实现温度数据渲染
Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。这里主要是基于原生js实现的三维温度渲染效果，通过克里金插值的方式将数据在cesium上进行插值渲染。实现了根据温度值渲染出热力图的效果。
2024-02-04 17:29:15
271
原创 openlayers使用
1.安裝vue項目 vue create openlayerProject。2.npm install ol 安装到生产环境。
2022-12-27 14:11:34
223
原创 VScode快捷键
中文设置:按快捷键“Ctrl+Shift+P”。在“vscode”顶部会出现一个搜索框。输入“configure language”，然后回车。“vscode”里面就会打开一个语言配置文件。 将“en-us”修改成“zh-cn”。 按“Ctrl+S”保存设置。关闭“vscode”，再次打开就可以看到中文界面了。禁用自动更新文件 > 首选项 > 设置（macOS：代码 > 首选项 > 设置，搜索update mode并将设置更改为none。对于行的操作快捷键重开一
2022-04-28 09:42:12
548
原创 移动端问题
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
2022-02-22 10:39:31
2037
原创 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
2022-02-18 10:34:47
16319
7
原创 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') // =>
2022-01-24 11:02:05
466
原创 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); }
2021-12-24 15:07:53
242
原创 Vue3 ref函数
作用定义一个响应式的数据。语法const xx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）JS中操作数据：xxx.value模板中读取数据：不需要.value，直接<div>{{xxxx}}</div>备注接收的数据可以是：基本类型，也可以是对象类型基本类型的数据：响应式依然是Object.defineProperty()的get与set完成的。对象类型的数据：内部“求助”了Vue3.0中的
2021-12-21 14:48:17
202
原创 Vue3 setup
理解A.Vue3.0中一个新的配置项，值为一个函数B.setup是所有Composition API（组合API）“表演的舞台”。C.组件中所用到的：数据、方法等等，均要配置在setup中。D.setup函数的两种返回值：（1）若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注！）<template> <div>一个人的信息</div> <h2>姓名：{{ name }}</h2> <h
2021-12-20 16:58:50
87
原创 浏览器渲染原理
什么是进程Process、线程Thread栈内存（一个环境）堆内存示意图原理图浏览器渲染页面的机制和原理解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生成渲染树（Render Tree）Layout(回流)：根据生成的渲染树，计算他们在设备视口（Viewport）内的确切位置和大小，这个计算的阶段就是回流Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素。Dispaly:将像素发送给GPU展示在页面上性能优化
2021-12-20 14:27:03
93
原创 Vue3官网使用及简介
Vue3带来了什么性能的提升打包大小减少41%初次渲染快55%，更新渲染快133%内存减少54%…源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Sharking…拥抱TypeScriptVue3可以更好的支持TypeScript新的特性Composition API（组合API） setup配置 ref与reactive watch与watchEffect provide与inject
2021-12-16 16:41:05
10572
原创 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/...
2021-12-14 16:16:16
1503
原创 Vue2路由vue-router
vue-router定义：vue的一个插件库，专门用来实现SPA应用。对SPA应用的理解单页Web应用整个应用只有一个完整的页面（index.html）点击页面中的导航链接不会刷新页面，只会做页面的局部更新数据需要通过对ajax请求获取什么是路由一个路由就是一组映射关系，多个路由需要路由器（router）进行管理key为路径，value可能是fuction或compnent路由的分类前端路由：（1）理解：value是component，用于展示页面内容（2）工作过程：当浏
2021-12-14 15:49:47
1390
原创 Vue2Vuex
Vuex是什么？概念：专门在vue中实现集中状态（数据）管理的一个vue插件，对vue应用中多个组价的共享状态进行集中式的管理（读/写），也是一种组件通信的方式，且适用于任意组件通信。什么时候使用Vuex多个组件依赖于同一状态来自不同组件的行为需要变更同一状态工作原理图搭建Vuex环境安装npm i vuex引入Vuex import Vuex from 'vuex' Vue.use(vuex)引入后就存在了$store属性import Vuex from 'vuex'Vue
2021-12-13 11:49:58
659
原创 Vue2插槽
总结作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。分类：默认插槽、具名插槽、作用域插槽使用方式：默认插槽父组件<Catogary title="苹果"> <img src="./assets/logo.png" /></Catogary><Catogary title="香蕉"> <ul> <li>123</li>
2021-12-10 17:03:17
766
原创 Vue2解决跨越配置代理
发送请求方式：xhrjQuery $.get $.postaxios (体积小) npm i axiosaxios.get("http://localhost:5000/students").then( (response) => { console.log("请求成功了", response.data); }, (error) => { console.log("请求失败了", error.message);
2021-12-10 11:50:50
2535
原创 Vue2动画效果
总结：作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。图示：写法：(1)准备好样式：元素进入样式：v-enter：进入的起点 v-enter-active：进入的过程中 v-enter-to：进入的终点单个元素过渡<template> <div> <button @click="show = !show">这是一个按钮</button> <!-- 过渡 :appear="true" 简写成 a
2021-12-10 10:29:32
660
原创 webStorage
存储内容大小一般支持5MB左右（不同浏览器可能还不一样）浏览器通过Window.sessionStorage和Window.localStorage属性实现本地存储机制。相关API:(1)xxxxStorage.setItem('key','value);该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。(2)xxxxStorage.getItem('person');该方法接受一个键名作为参数，返回键名对应的值。(3)xxxxStorage.removeIt.
2021-12-09 11:39:42
165
原创 TodoList案例
App.vue<template> <div id="app"> <MyHeader :addArr="addArrFn" /> <MyList :dataArr="dataArr" :deleteArrFn="deleteArrFn" /> <MyFooter v-if="dataArr.length" :dataArr="dataArr" :checkAllDataFn="checkA
2021-12-09 11:12:26
61
原创 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
2021-12-08 17:40:37
160
原创 Vue2mixin(混入)
mixin(混入)功能：可以把多个组件共用的配置提取到一个混入对象使用方式：第一步定义混入，例如：{ data(){......}, methods:{......} ......}第二步使用混入，例如：(1)全局混入：在main.js中引入mixin.js 调用Vue.mixin(xxx)(2)局部混入：mixins:[‘xxx’]实例：School.vue<template> <div>{{x}}</div></templa
2021-12-08 17:05:02
349
原创 Vue2组件间通信
ref属性被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式：打标识：<h1 ref="xxx">... ...</h1> 或<School ref="xxx">... ...</School>获取：this.$refs.xxx...
2021-12-08 16:05:56
239
原创 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目录介绍：入口文件
2021-12-08 15:53:16
169
原创 Vue2组件
组件目前存在问题：1.依赖关系混乱，不好维护；2.代码复用率不高。定义： 实现应用中局部功能代码和资源的集合（css\js\html mp3\mp4\字体…）作用： 复用编码、简化项目编码、提高运行效率种类：(1)非单文件组件：一个文件中含有n个组件。(2)单文件组件：一个文件中含有1个组件。Vue中使用组件的三大步骤：一. 定义组件（创建组件）二. 注册组件三. 使用组件（写组件标签）一、如何定义一个组件？使用Vue.extend(options)创建，其中options和ne
2021-12-08 11:01:58
502
原创 Vue2生命周期
生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子。是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数的this指向vm或组件实例对象。常用的生命周期钩子：mounted:Vue完成模板的解析并把初始化真实DOM元素放入页面后，挂载完毕，调用mounted。发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【
2021-12-07 16:40:24
116
原创 Vue2指令
指令v-bind: 单向绑定解析表达式，可简写为 :xxxxv-model: 双向数据绑定v-for: 遍历数组/对象/字符串v-on: 绑定事件监听，可简写为@v-if: 条件渲染（动态控制节点是否存在）v-else: 条件渲染（动态控制节点是否存在）v-show: 条件渲染（动态控制节点是否展示）v-text: 向其所在的节点中渲染文本内容，与插值语法的区别：v-text会替换节点中的内容，{{xxx}}则不会。v-html: 安全性问题...
2021-12-07 11:36:07
611
原创 Vue2过滤器
过滤器定义： 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：注册过滤器：Vue.filter(name,callback)或new Vue(filters:{})使用过滤器：{{xxxx|过滤器名}}或v-bind:属性 = “xxxx|过滤器名”备注：过滤器也可以接收额外参数，多个过滤器也可以串联并没有改变原来的数据，是产生新的对应的数据 <div id="root"> <div> 时间：{{ time }}
2021-12-06 17:46:03
58
原创 Vue2收集表单数据
收集表单数据若<input type="text"/>,则v-model收集的是value的值，用户输入的就是value的值。若<input type="radio"/>，则v-model收集的是value的值，且要给标签配置value的值。若<input type="checkbox"/>，没有配置input的value的值，那么收集的就是checkbox(勾选or未勾选，是布尔值)配置input的value属性：（1）v-model的初始值是非数组，那么
2021-12-06 17:02:10
125
原创 Vue2列表渲染
v-for指令用户展示列表数据语法：v-for="(item,index) in xxx" :key=“yyy” [或v-of]可遍历：数组、对象、字符串（用的很少）、具体数值（用的很少）
2021-12-06 15:15:58
465
原创 Vue2条件渲染
条件渲染：控制显示与隐藏可以用两种方法1. v-if写法：(1)v-if=“表单式”（2）v-else-if=“表单式”（3）v-else=“表达式”适用于：切换频率低的场景特点：不展示DOM元素直接被移除。注意：v-if可以和：v-else-if、v-else 一起使用，但要求结构不能被打断。template:两个即两个以上的div需要同一个元素控制的时候，用template。在使用template时，v-show将失去作用。因为v-show是设置显示与隐藏，而template是没有实际东
2021-12-05 20:42:07
133
原创 Vue2class与style绑定
class用法绑定class样式–字符串写法，适用于：样式类名不确定，需要动态指定 <div id="root"> <div class="basic" :class="className">这是个样式</div> <button @click="changeStyle">改变样式</button> </div> <script> const vm = new
2021-12-02 17:49:52
97
原创 Vue2计算属性与监视
计算属性：定义：要用的属性不存在，要通过已有属性计算得来。原理：底层借助Object.defineproperty方法提供的getter和setterget函数什么时候执行？(1)初次读取时会执行一次(2)当依赖的数据发生改变时会被再次调用优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。备注：(1)计算属性最终会出现在vm上，直接读取使用即可。(2)如果计算属性要被修改，那必须写set函数相应修改，且set中要引起计算时依赖的数据发生<div id=
2021-12-02 15:10:56
226
原创 Vue2键盘事件
Vue常用的按键别名：回车=>enter删除=>delete(捕获“删除”和“空格”键)退出=>esc空格=>space换行=>tab (特殊：必须配合keydown使用)上=>up下=>down左=>left右=>right<div id="root"> <!-- 别名 --> <input @keyup.right="showInfo"/> </div> &l
2021-12-02 14:21:54
270
原创 Vue2事件修饰符
Vue中的事件修饰符：prevent:阻止默认事件（常用）<div id="root"> <!-- 阻止默认事件 --> <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a> </div> <script> const vm = new Vue({ el:"#r
2021-12-02 13:35:26
224
dayjs.min.js
2021-12-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人