IT技术
IT技术
vue的动态组件 keep-alive
1. 什么是动态组件 动态组件指的是 动态切换组件的显示与隐藏 2. 如何实现动态组件渲染 vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。 作用：组件的占位符 is的值表示要渲染的组件 示例代码如下： Left.vue的代码 <template> <div class="box">这是左边的组件</div> </template> <script> export default {
阅读更多2023 年的 10 个前端趋势
元框架群雄并起 渲染模式精益求精 Edge Serverless 数据库复兴，Serverless 数据库 JavaScript 运行时(Node.js、Deno、Bun、Cloudflare Workers)避免重蹈浏览器的覆辙，成立 WinterCG Monorepo 使用率增长 CSS 实用至上，Styled Components、Emotion 一直是 CSS in JS 的主流库，不过在 SSR 场景下，性能至上。CSS in JS 方案不仅增加包体积(SC 12.7 kb、Emot
阅读更多iOS开发 image背景图片拉伸问题
前言（如果是imageView的图片拉伸问题，可直接看文章结尾，OC和Swift） 在开发中聊天、按钮等背景图片，UI设计师可以仅设计其边框样式，然后通过代码就行处理，以适应聊天文字的大小或按钮的大小。这样不仅可以使安装包更轻巧而且可以更灵活的使用图片； 运行图片.png 方法一： 即将弃用方法 这个函数是UIImage的一个实例函数，它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数，第一个是左边不拉伸区域的宽度，第二个参数是上面不拉伸的高度。 根据设置的宽度和高度，将
阅读更多HTML5的离线应用
一，离线应用 什么是离线应用呢？ 就是你现在正在页面上浏览网页或者填写信息，正在这时，你家的wifi突然断了，那么这时你重新连接页面会发现之前的页面都重新加载了，之前填写的相关信息也得从头开始写。那么如果你的web应用支持离线功能，那么就不会用这种经历了。 什么时候考虑使用离线呢 并不是所有网页都要设置为离线，而是那种交互性和有状态的网页（动用很多js代码维护信息的）适用于离线 二，如何创建离线应用 离线应用的技术就是缓存，即下载文件并在计算机或者移动端上保存一份
阅读更多彻底搞懂盒子模型
一、简述 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：Margin外边距，Border边框，Padding内边距，和Content实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 盒子模型.png 二、思考 下面我们来看下这个例子，给出下面的HTML代码，将他放到Chrome浏览器中运
阅读更多vue导出pdf（大数量可能有问题）
1.首先创建js文件exportPdf.js,且需要安装html2canvas和jspdf两个插件； 然后将在你需要导出的页面中执行方法， this.getPdf("html", "报表"); //参数一：导出范围的id //参数二：导出pdf文件的名称 下面是导出的主要代码；我在网上查找了大量的代码才写出了这个，其他的代码都是很浅显，虽然也可以导出，但是一旦数据量过大，页面较长导出的pdf文件便会白屏；此文件解决了此问题，但是因为导出的pdf做了分页，而pdf又是由图片转换而来，所以分页中会
阅读更多新一代前端工具链rome
Rome是最新一代的JavaScript和TypeScript的Linter。 但 Rome 不只是 Linter ， 它还是给 JavaScript，TypeScript，HTML， JSON，Markdown，CSS 使用的工具。 它不仅包含编译器，还包含打包工具，测试执行工具等等。它的目标是统一前端开发工具链。 image.png Rome 是一个单一的完整的工具链，它和之前前端各自为营的工具不一样，它是一整套工具集合。 Rome 的目标就是取代 Babel，ESLint，we
阅读更多redux
1.先创建count和person两个组件 2.创建count的store相关的文件夹。 store/modules/count 1.constant.js 2.createActions.js 3.index.js 4.reducer.js index.js import { legacy_createStore as createStore } from "redux"; import countReducer from "./reducer.js"; const countStore
阅读更多Flutter && Dart
/// Dart 弱类型（var、object、dynamic） /// Dart中没有=== 运算符。 /// 简介写法： /// 三元运算符??: t ?? 'test'是t!=null ? t : 'test'的缩写。 /// 级联操作符(依次进行调用)，允许对同一对象或函数进行一系列操作，testObj.add('t')..delete('d')..show(); 类： 命名构造函数 class Dog{ String color; Dog.red(){this.colo
阅读更多CSS基础-13-垂直导航栏（详细创建过程）
@[toc] 前言 一步一步做出一个完整的导航栏 1. 最简导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px;
阅读更多