- 博客(71)
- 收藏
- 关注
RSS订阅原创 windows openssl局域网生成ssl证书
因内网需要进行网络安全防护，需要进行生成内网ssl证书。在此之前也询问了一些第三方厂家发现都会收取费用，最后使用了OpenSSLOpenSSL:一个开源的、用于SSL/TLS协议的加密工具，是互联网加密传输的核心基础组件。它提供了强大的功能，包括数据加解密、数据签名、证书签发和校验等。
2024-07-17 17:41:37
320
原创 Vue3 子组件监听父组件传来异步数据的正确方式
来监听父组件数据，发现没有必要反而造成代码冗余，如果参数一多很难维护。正确方式：直接使用computed监听就好。
2024-06-18 17:25:38
225
原创 微信小程序【WXML】
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。使用import 可以引入其他wxml文件中的模板、也可以使用include(include 引入的模板只能是静态的)WXML 提供模板（template）,可以在模板定义代码片段，然后在不同的地方引用。wx:if 类似于vue中的v-if，hidden 类似于vue中的v-show。wxml中的动态数据全部来自js中的data。
2024-05-27 15:41:56
419
原创 Vue3 实现共享数据三种方式
在vue3中，组件和响应式功能被隔离开了，也就是说在任意一个JavaScript文件中都可以使用响应式功能。在这里遇到了一个问题，就是需要使用createStore方法创建store实例，这样在应用模块的情况下是不生效的。注意：在vue3中，由于没有了this，所以需要使用引入useStore方法，来获取store实例。在vuex@4.x中 创建vuex实例需要使用createStore方法。配置，可以让开发者在高层组件中注入数据，然后在后代组件中使用。考虑到有些数据需要在整个vue应用中使用，
2024-05-20 15:40:00
497
原创 Vue3 学习总结（复述）
● 当使用v-if v-else-if v-else分支的时候，不再需要指定key值，因为vue3会自动给予每个分支一个唯一的key。vue2新旧DOM树对比时是逐层对比，这样会影响效率，而vue3是将把动态节点收集起来， 只对比动态的节点，静态的不进行对比。当编译器遇见大量的静态节点，就不构建createvNode了（影响效率），它会将整体节点形成一个字符串。即便要手工给予key值，也必须给予每个分支唯一的key，不能因为要重用分支而给予相同的 key。，也是作为了vue3或者其他框架的构建工具。
2024-05-19 10:42:51
619
原创 vue3 composition api 开发实践
在实际开发中确保返回给页面的参数全部是ref，这样就可以保证统一，维护起来更便捷。目标：利用composition api 实现动态修改gdp数据。
2024-05-17 17:19:51
139
原创 为什么vue3去掉了Vue构造函数?
但是vue2是通过Vue构造函数引入的插件，这样一来所有的实例都具备这些插件，不利于隔离不同应用。3. vue2没有把组件和应用单独分开，一个构造函数即是vue组件又是应用。vue3把两个概念分开了，通过createApp创建的应用，他内部提供的方法是针对整个应用，而不是特殊的组件。2. 不利于tree shaking, vue2构造函数集成了太多功能，不利于tree shaking,vue3把这些功能当作普通函数导出，充分利用tree shaking优化打包体积。
2024-05-13 11:15:54
237
原创 html系列之video标签设置圆形
解决：配合使用 object-fit，对这些img、video进行保留原始比例的剪切、缩放或者直接进行拉伸等。本认为使用 border-radius:50%可以实现效果，但是效果与想象不符。
2022-12-22 16:05:22
1724
1
原创 设计模式，究竟有着怎样的力量？(初读修言老师设计模式)
每一个模式描述了一个在我们周围不断重复发生的问题，以及该问题的解决方案的核心。这样，你就能一次又一次地使用该方案而不必做重复劳动。设计模式是“拿来主义”在软件领域的贯彻实践。和很多人的主观臆断相反，设计模式不是一堆空空如也、晦涩鸡肋的理论，它是一套现成的工具 —— 就好像你想要做饭的时候，会拿起厨具直接烹饪，而不会自己去铸一口锅、磨一把菜刀一样。用做数学题来打比方，可能大家会更能体会这种概念 —— 我们解题目的时候，往往会用到很多公式/现成的解题方法。
2022-12-09 15:57:32
593
1
原创 TypeScript中的never应用场景
现在就没问题了，因为在穷举完所有类型分支后，info的类型当然就也是 never 啦。很常见的场景就是我们希望，将所有的参数类型都能匹配到，对每个联合类型进行特殊处理。在上面代码中，如果忘记处理了object类型情况，Ts也不会报错。比如一个函数中是一个死循环或异常，这个函数则不会返回任何东西，那么写返回类型的话，写void或者其他的都不合适，那我们就可以使用never。，意味着一个不表示任何类型的类型,never不会是任何值，可能会被推断出来，或者自己定义避免出现逻辑上的异常。
2022-12-02 17:03:00
1953
原创 工作中常用的组件库
animat.css 动画效果validator.js 登录验证mescroll.js 滚动效果vant 开源组件库view UI 基于vue的UI组件库echarts 可视化图表vue-lazyload 懒加载day.js 时间和日期vue-qr 生成二维码
2022-07-09 23:13:19
89
原创 vue正确的姿态使用v-if/v-else
默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的结果。Bad<div v-if="error"> Error: {{ error }}</div><div v-else> {{ results }}</div>Good<div v-if="error" key="se
2022-03-17 18:11:57
814
原创 H5调用手机拨号发短信
<a href="tel://0769-22210105">联系客服</a><a href="geopoint:116.281469,39.866035">我的位置</a><a href="sms:10086?body=message_body">给 10086 发短信</a>
2022-02-25 18:09:04
260
原创 visibility:hidden和display:none区别
一、相同点display:none和visibility:hidden都可以隐藏元素二、不同点display:none将元素从页面隐藏，页面空间不存在visibility:hidden将元素从页面隐藏，页面空间存在三、举例 <p>1</p> <p style="visibility:hidden">2</p> <p>3</p>...
2022-02-22 11:16:57
553
2
原创 移动Web UI库（H5框架）
1、基于vue：https://doc.vux.li/zh-CN/2、中国首个开源 HTML5 跨屏前端框架 http://amazeui.shopxo.net/3、简洁H5UI库 https://h5ui.io/4、接近原生APP体验的高性能前端框架 https://dev.dcloud.net.cn/mui/5、Ant design 移动端框架 https://mobile.ant.design/6、一个轻量级的模块化前端框架，http://www.uikitcss.co.
2022-02-11 14:35:17
8653
原创 js 判断数组的几种方式
第一种//通过原型链判断obj.__proto__ === Array.prototype第二种//通过isArray判断Array.isArray(obj)第三种//通过instanceOf判断obj instanceOf Array第四种//通过Array.prototype.isPrototypeOfArray.prototype.isPrototypeOf(obj)第五种//通过Object.prototype.toString.call()做判断Object.p
2021-12-14 18:41:40
1202
原创 理解vue3响应式机制（学习笔记）
vue用到了哪些响应式有三种方案:object.defineProperty、proxy、value setterobject.definePropertydefineProperty API 作为 Vue 2 实现响应式的原理，它的语法中也有一些缺陷。比如在我们删除数组的时候，无法监听到，这也是为什么在 Vue 2 中，我们需要 $delete 一个专门的函数去删除数据。proxyVue 3 的响应式机制是基于 Proxy 实现的。Proxy 的重要意义在于它解决了 Vue 2 响应式的缺陷
2021-12-12 16:21:28
1224
原创 vue3 结合Composition API拆分代码(学习笔记)
Composition API(vue3) 和Options API（vue2）区别options API由于所有数据都挂载在 this 之上，因而 Options API 的写法对 TypeScript 的类型推导很不友好，并且这样也不好做 Tree-shaking 清理代码。增功能基本都得修改 data、method 等配置，并且代码上 300 行之后，会经常上下反复横跳，开发很痛苦。代码不好复用，Vue 2 的组件很难抽离通用逻辑，只能使用 mixin，还会带来命名冲突的问题。Compo
2021-12-11 15:49:21
1982
1
原创 搭建vue3 工程化（学习笔记）
环境准备我们使用VS Code 写 Vue 3 的代码，直接在 Chrome 浏览器里展示，我们会在这个基础之上逐步添加新的工具。对于 Vue 2，官方推荐用 Vue-cli 创建项目；而对于 Vue 3，我建议你使用 Vite 创建项目，因为 vite 能够提供更好更快的调试体验。在使用 Vite 之前，我们要先安装 Node.j安装 Node.js 的过程是傻瓜式的，直接去Node.js 官网下载安装即可。接下来，在命令行窗口里，我们对 vuejs 目录执行下面的命令，这样就可以创建一个 Vit
2021-12-11 13:59:54
858
原创 flex 布局 space-around且最后一排靠左
.dash_container { margin: 1.333333vw; border-radius: 1.8vw 1.8vw 0vw 0vw; display: flex; background-color: var(--back-whiteColor); justify-content: space-around; flex-wrap: wrap;}/*给元素的的父级伪类设置 如下内容*/.dash_container:after { co
2021-12-07 23:09:08
767
原创 js mvc设计模式
var myapp = {}; // 创建这个应用对象myapp.Model = function() { var val = 0; this.add = function(v) { if (val < 100) val += v; }; this.sub = function(v) { if (val > 0) val -= v; }; this.getVal = function() {
2021-11-25 14:50:59
593
原创 解决IE下不支持TextDecoder
1、首先需要下载模块包，使用npm install iconv-lite2、在项目中引入iconv-liteimport iconv from ‘iconv-lite’;const fileArr = iconv.decode(resUserInfo, 'utf-8')console.log('@', fileArr)
2021-11-04 13:19:21
297
原创 解决深拷贝问题
function deepClone(obj) { let result = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { if (obj[key] && typeof obj[key] === 'object') { result[key] = deepClone(obj[key]); // 递归复制
2021-10-27 11:40:55
211
原创 react useEffect 模拟生命周期
import React,{ useState,useEffect } from "react"export default function FunComp(){ const [ count, setCount ] = useState(0) const [ width, setWidth ] = useState(document.body.clientWidth) const onChange = () => { setWidth(document.body.clie
2021-10-25 12:22:10
874
原创 vscode-setting
{ "extensions.ignoreRecommendations": false, "team.showWelcomeMessage": false, "git.enableSmartCommit": true, "vsicons.dontShowNewVersionMessage": true, "git.autofetch": true, "react.beautify.onSave": true, "files.associations":
2021-09-20 14:43:21
81
原创 Vue核心:插槽
什么是插槽?插槽是一种传递复杂内容的一种方式，它目前取代了slot和slot-scope，插槽内容vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。插槽的用法1.具名插槽通俗来将具名插槽就是slot指定名称，可以用来定义额外的插槽，容易区分。1.1 定义组件，定义插槽 name="icon"Vue.component('todo-item', { template: `<li><span><slot name="ico
2021-08-22 15:08:36
96
原创 insertAdjacentHTML用法
用法var li='<li class="liactive"><span>新选项卡</span></li>'ul.insertAdjacentHTML('beforeend',li);参数说明参数描述beforebeginelement本身之前afterbegin在element第一个孩子之前beforeend在element最后一个孩子之前。afterendelement本身之后。...
2021-07-28 15:10:39
228
原创 react创建组件函数式组件和类组件
react创建无状态函数式组件1.函数定义 无状态函数式组件2.该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。3.当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props” <div id="example">&
2021-07-17 20:35:15
668
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人