boen-xu-优快云博客

原创 JS API 和 Vue 结合使用

在 MapContainer.vue 地图组件中创建标签作为地图容器，并设置地图容器的 id 属性为 container。调用地图初始化函数：mounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法。key:"", // 申请好的Web端开发者Key，首次调用 load 时必填。this.map = new AMap.Map("container",{ //设置地图容器id。//DOM初始化完成进行地图初始化。

2023-10-24 15:24:52 215

原创 element-ui 表单校验 rules 配置

向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给源对象，以更改该属性的值。（如果该len属性与min和max范围属性结合使用，len则优先。有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。规则属性指示一个正则表达式的值必须匹配，才能通过验证。指示type要使用的验证器。创建新时不会产生异常的的实例或字符串。属性为true是，该字段为必填项。可以为指定的字段自定义异步验证功能。可以为指定字段自定义验证功能。规定最小长度与最大长度。

2023-02-21 11:30:38 1787

原创将Echarts图表导出为图片的三种方式

【代码】将Echarts图表导出为图片的三种方式。

2022-12-30 16:55:49 24775

原创微信小程序-获取设备信息，状态栏/导航栏/内容/tabBar高度设置

微信小程序获取设备信息，状态栏、导航栏、内容、tabBar高度设置。

2022-12-08 16:09:16 3702

原创【git】从clone到push 详细

origin 为远程仓库别名后面http 为远程仓库地址。

2022-10-24 22:10:03 1321

原创 React JSX

React JSX介绍：React 使用 JSX 来替代常规的JavaScript。优点：① JSX执行更快，因为它在编译为 JavaScript代码后进行了优化；② 它是类型安全的，在编译过程中就能发现错误；③ 使用JSX编写模板更加简单拿快速例子：;注意：由于 JSX 就是 JavaScript，一些标识符像class和for不建议作为 XML 属性名。作为替代，React DOM 使用className和htmlFor 来做对应的属性。

2022-10-24 13:10:06 514

原创 useNavigate() may be used only in the context of a ＜Router＞ component.

第一步：将index.js文件React应用包裹到Router中的例子，整个应用都会被Router组件所包裹，之后就可以随时随地的在组件中使用react router所提供的钩子。警告，是因为useNavigate只能在Router上下文中使用useNavigate 钩子。在react项目中配置路由，使用编程式导航。函数用来实现编程导航的跳转时。第二步：在组件中正常使用。

2022-10-11 16:03:12 6772

原创 Vue2父组件和子组件生命周期钩子的执行顺序是什么

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted。父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed。父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated。

2022-10-10 20:16:53 304

原创 Vue3中新的组件有哪几个

在vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中； 2、使用suspense包裹组件，并配置好default和fallback；Teleport是一种能够将我们的组件html结构移动到指定位置的技术。等待异步组件时渲染一些额外的内容，让应用有更好的用户体验；在vue2中，组件必须有一个根标签；好处是减少标签层级，减小内存占用。 1、异步引入组件；

2022-10-10 20:15:47 149

原创 Vue3常用API及作用

reactive：将对象转成响应式对象，如：{name:‘张三’,age:18}toRefs：将对象中的所有属性单独转成响应式对象，并和原来的值关联。toRef：将对象中的某个属性单独转成响应式对象，并和原来的值关联。ref：将单个值转成响应式对象，如：数字0、1，字符串“你好”等。computed：计算属性，返回被计算后的值。

2022-10-10 20:14:43 185

原创 ECharts中setOption的title、tooltip、xAxis、yAxis、series、legend等参数的含义。

ECharts中setOption的title、tooltip、xAxis、yAxis、series、legend等参数的含义。

2022-10-10 20:09:46 1310

原创 React生命周期新vs老

老版本挂载时constructor()componentWillMount()render()componentDidMount()更新时componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()卸载时componentWillUnmount()新版本（16.3开始）挂载时constructor()

2022-10-01 00:07:24 247

原创构建工具的优缺点

构建工具的优缺点。

2022-09-15 09:59:28 233

原创 HTML特效代码

把Demo的图片全都设为表格的背景，表格的大小与图片的大小一样。这样做看起来是一样的，主要是防止鼠标经过图片时会出现另存的按钮。在网页的Head部分加入如下代码，这段代码的主要功能是屏蔽PrintScreen键，不断清空剪贴版，防止图片被用文件——另存为菜单另存。""(其中字体大小可从h1-h5,h1最大，h5最小)其中20为20秒后自动刷新，你可以更改为任意值。.mid你的背景音乐的midi格式文件。"请输入你的登陆密码"

2022-09-01 20:24:47 1034

原创 Vue Router ---导航守卫

重复进入组件守卫 beforeRouterUpdate。进入组件守卫 beforeRouterEnter。离开组件守卫 beforeRouterLeave。全局解析守卫 beforeResolve。路由独享守卫 beforeEnter。全局前置守卫 beforeEach。全局后置守卫 afterEach。

2022-08-31 20:56:13 278

原创 Vue Router 导航守卫---导航解析流程

调用beforeRouterLeave传给next的回调函数，把创建的组件实例作为回调函数的参数传入；在激活的组件中调用beforeRouterEnter守卫；在重用的组件中调用beforeRouterUpdate；在失活的组件中调用beforeRouterLeave；在路由配置中调用beforeEnter守卫；调用全局解析beforeResolve守卫；调用全局前置beforeEacth守卫；调用全局后置afterEach钩子；...

2022-08-31 20:54:21 289

原创微信小程序登录流程

② 后台利用appId、appSecret 和code , 发送给微信官方服务器进行校验, 通过官方文档可以得出调用 auth.code2Session 接口，换取用户唯一标识 OpenID 、用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号）和会话密钥 session_key。获取到code，并将该code发送到后台, 这里我选择的是java后台, 当然也可以是node甚至云开。③ 后台返回给前端一个jwt生成的token。④ 小程序保存token。...

2022-08-31 20:50:42 395

原创前端路由两种模式的区别

浏览器的前进后退会触发window.onpopstate事件，通过绑定 popstate事件，就可以根据当前url地址中的查询内容让对应的菜单执行ajax载入，实现ajax的前进和后退效果。当浏览器地址栏url的hash值发生变化时，就会触发onhashchange事件，这时需要通过window.location.hash可以拿到当前浏览器的url的hash值，此时的hash值是带有#的。hash是指url中#后面的部门，这部分在服务器会被自动忽略，但是在浏览器中可以通过location.hash来获取。.

2022-08-31 20:48:40 211

原创前端路由和后端路由的区别

特点：向服务器发送请求，会刷新页面，前后端不能分离在浏览器的地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器根据不同的响应不同的数据，浏览器接收到数据后再进行渲染，所以后端路由会刷新页面，如果网速慢的话，就会看到一个空白页面等待服务端返回数据，后台路由最大的问题就是不能前后端分离。...

2022-08-31 20:46:33 403

原创 vue 生命周期

表示实例完全被创建出来之前，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

2022-08-31 20:44:59 109

原创微信小程序基础学习笔记

app.json文件app.json 是当前小程序的，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。项目里面的app.json配置① 用来记录当前小程序所有页面的路径；里面的路径默认排在第一位的路径是首页② ：全局定义小程序所有的页面的背景色，文字颜色等；③ ：全局定义小程序组件所使用的样式版本④ sitemapLocation:用来指明sitemap.json的位置WXML(WeXin Markup Language) 是小程序框架设计的一套，其作用类似于网页开发中的HTML。① 标签名

2022-07-08 19:53:21 381

原创 HTML 与 CSS学习笔记（全）

HTML基本标签HTML注释和特殊符号特殊符号字符实体示例空格&nbsp；百度 |新浪大于 >&gt；如果时间>;晚上6点，就坐车回家小于 <&lt；如果时间

2022-07-08 19:49:13 663

原创 flex布局

brief introduction :Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。块级元素行内元素容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction 排列方向flex-wrap 换行justify-content 水平align-items 垂直a

2022-07-08 19:47:05 126

原创 ES6笔记

var 有变量提升const与let 没有变量提升[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0Oud2fE-1657280554681)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220509204906927.png)]ES5只有全局作用域、函数作用域。ES6有了块级作用域，块级就是{ }，花括号内就是块级作用域的范围① 值类型：简单数据类型/基本数据类型，在存储时变量中存

2022-07-08 19:44:10 313

原创 JavaScript

创始人：布兰登.艾奇（1961~）在1995年用10天完成JavaScript设计。网景公司最初命名为LiveScriptalert(msg) ：浏览器弹出警示框用来展示给用户看的console.log(msg):浏览器控制台输出信息prompt(info):浏览器弹出输入框，用户可以输入用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。（变量就是一个装东西的盒子）1.2 赋值1.3 变量的初始化声明一个变量并赋值，我们称之为变量的初始化。一个

2022-07-08 19:39:01 1683

原创 webpack.config.js文件结构

参数为一个路径地址，webpack将从这个路径获取entry和loader编译打包代码的入口文件指明打包使用的环境配置：‘none’ | ‘development’ | ‘production’ 。默认production配置打包之后的文件的输出路径以及输出方式配置项目对不同模块的处理方式配置如何解析模块webpack打包时使用的插件开发模式下的配置参数webpack可以针对多种环境进行编译打包......

2022-07-08 19:25:35 316

原创 webpack loader与Plugin区别

loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译，压缩等，最终一起打包到指定的文件中。file-loader：文件加载。url-loader：文件加载，可以设置阈值，小于时把文件 base64 编码。image-loader：加载并压缩图片。babel-loader： ES 6+ 转成 ES 5。css-loader：处理 @import 和 url 这样的外部资源。style-loader：在 head 创建 style 标签把样式插入。vue-loader：加载 vue

2022-07-08 19:24:11 335

慢慢manman的博客