初郁-CSDN博客

原创 vue3 reactive，ref， toRefs

ref() 函数用来根据给定的值创建一个响应式的数据对象，传入的为基本数据类型，例如字符串、数字、boolean 等,返回值是一个对象，这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.valueimport { ref } from 'vue'export function message() { const list = ref<any[]>([]) const loading = ref(false) const noMore = ref

2021-11-17 11:48:42 901

原创 TypeScript

TypeScript 类型声明ts支持与js几乎相同的数据类型，ts的类型声明是其非常重要的一个特点，通过类型声明可以指定ts类型变量的类型，当指定类型后，为变量进行赋值时ts编译器的自动判断机制会自动检测值是否符合类型声明，否则报错。语法let 变量: 类型;let 变量: 类型 | 类型 | 类型; //多个联合类型let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{}数组1.ts有两种方法可以定义数组1. 可以在元素类型后面接上 []

2021-11-11 10:10:01 631

原创 vue 输入框失焦时做本地存储

<van-field v-model="phone" name="phone" type="digit" maxlength="13" input-align="right" placeholder="请输入11位数字" label="手机号" @blur="setLocalStorage" />created () { let data = window.localStorage.getItem('financialData') if (data) {

2021-11-10 18:27:30 1083

原创 vue filters 处理 -将1234转换为ABCD

<div v-for='(item, i) in data' :key="i">{{item.answerId | transNumber}}</div> filters: { transNumber (i) { const dist = { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E' } return dist[i]

2021-11-10 18:14:55 1472

原创常用正则整理

中文: [\u4e00-\u9fa5]英文: [a-zA-Z]数字: [0-9]手机号：^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$身份证：(^\d{15}KaTeX parse error: Undefined control sequence: \d at position 5: )|(^\̲d̲{17}([0-9]|X|x))匹配URL：[a-zA-z]+://[^s]*Email地址1[\w.-][a-zA-Z0

2021-11-10 18:01:20 120

原创 vue input输入时清空默认value=0，取消焦点时恢复0

场景：input框中默认存在value=0，输入时将0清空，当value=’ '时，恢复value=0<van-field v-model="arr[0].value" name="stockInvest" type="digit"maxlength="13" :formatter="zeroFormatter"input-align="right"label-width="50%"@blur="onBlur(0)" /> methods: { zeroForma

2021-11-09 18:56:37 3409

原创 css单位 px em rem vw vh

pxpx（像素）相对长度单位相对于显示屏幕的分辨率而言emem 相对长度单位相对于父元素的font-size，如果父元素字体尺寸未设置，则相对于浏览器默认字体尺寸em的值不固定，em会继承父元素字体大小remrem 相对长度单位相对于html根元素的font-size计算长度单位，如果没有设置，就会以浏览器默认的字体大小，一般是16px优点是只需要设置根目录大小即可把整个页面成比例的调整，vw vhvw 相对视口的宽度长度约等于视口宽度的1/100vh 相对视口的高度长度约等

2021-10-13 11:41:13 217

原创 git commit的提交规范

格式每次提交，Commit message 包括三个部分：Header（标题），Body（内容详情）和 Footer（结尾）。其中 Header是必须的，Body 和 Footer可以省略。<type>(<scope>): <subject>// 空一行<body>// 空一行<footer> Header部分只有一行，包括两个字段：type（必需）和subject（必需）。type用于说明commit的类别，只允许有以

2021-06-16 18:49:59 1390

原创 vue项目总结-stylus封装主题色

下载styluscnpm install stylus stylus-loader --save在css目录下新建一个bgColor.styl的文件$bgColor = red$textColor = #fff在vue文件中写上<style scoped lang='stylus'>@import '../../../assets/css/bgColor.styl'.header{ background:$bgColor; color:$textColor;}..

2021-05-16 11:23:17 200

原创 js数组去重

var arr=[1,2,3,4,5,6,2,3,7,8];var b=fn(arr);console.log(b);单层for循环去重 +（sort+splice）function fn(arr) { arr.sort(); for (var i=0;i<arr.length;i++){ if (arr[i]===arr[i+1]){ arr.splice(i,1); i--; } }r

2021-05-04 22:00:06 124

原创常用的vue属性，方法，指令(787记忆法)

Vue的7种属性el绑定id，用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符data用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中methods放置页面中的业务逻辑，js方法一般都放置在methods中computed定义计算属性的方法template用来设置模板，会替换页面元素，包括占位符watchwatch:function(new,old){ … }监听data中数据的变化，两个参数，一个返回新值，一个返回旧值ren

2021-05-01 11:42:43 459

原创对vue的理解

vue 是一套用于构建用户界面的自底向上增量开发的渐进式的基于MVVM的框架。核心是关注视图层，解决数据绑定的问题。核心思想数据驱动：视图内容根据数据的改变而改变组件化：增加代码复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚，低耦合。个人理解由于vue是基于MVVM思想的双向绑定，让我们可以减少对dom元素的频繁操作，直接在数据层和视图层建立一种联系，方便使用。并且它通过组件化的方式，增加了代码的可复用性，可维护性，提高了开发效率。...

2021-05-01 10:54:03 1622

原创 MVVM思想

MVVM的设计理念是前端工程化的体现，使用数据绑定的架构，主要目的是分离视图和模型，让数据和页面建立联系。可以根据数据的变动，生成或者显示界面，也可以根据界面的操作，去更改数据。尽可能的用数据去驱动，使其从繁琐的DOM操作中解脱出来，将数据的变化直接去体现给用户，而不是先给DOM，再由DOM去操作显示。让后台从视图层脱离出来，专注于去操作逻辑和数据。优点低耦合：视图层独立于数据层的变化和修改，互不干扰。可复用：将一些视图逻辑放到vm里，让许多的view重复使用。独立开发：开发人员可专注于.

2021-05-01 10:21:23 968 1

原创 HTML5 新元素

<canvas> 新元素标签描述 <canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API 新多媒体元素标签描述 <audio> 定义音频内容 <video> 定义视频（video 或者 movie） <source> 定义多媒体资源 <video> 和 <audio> <embed>...

2021-04-05 17:33:43 90

原创 daocloud 一面-二面

一面知道哪几种布局方式flex布局有哪些属性react里的父子组件传值项目的合作模式项目中代码冲突git怎么解决说说简历里项目的功能怎样学前端的二面清除浮动的方式定位的属性值有哪些怎样脱离文档流说一下闭包es6的属性有哪些let，var，const的区别一般用哪些数据结构数组和链表的区别冒泡排序和快速排序是什么数据结构里的mapvue和react有什么区别对vue的理解vue的组件有哪些说一下vue中的watchv-show和v-if的区别-------

2021-04-05 17:27:14 470 2

转载 flex布局常用属性

原文：https://blog.csdn.net/u012620506/article/details/52369653Flex布局父容器属性flex-direction / flex-wrap/flex-flow/justify-content /align-items/align-content1》水平（主轴上）对齐方式：justify-content：flex-start | flex-end | center | space-between | space-around...

2021-04-05 16:32:31 1826

原创罗辑思维--得到App--一面

html相关h5的新增标签属性h5新增了一些语义化的标签，像header，footer，nav，aside，time，section，article，mark等；还有一些表单标签，像email，url，number，data pickers，range，search，color；以及video，audio，embed等媒体标签还有像detail（描述细节），summary（包含 details 元素的标题）之类的其他标签。h5新增了许多属性，比如表单里的placeholder，autofocus，f

2021-04-05 16:13:27 365 1

原创 2020-3-21 周总结

只有在开始刷面经的时候才知道之前落下了好多基础的，细节的东西，平时写代码习惯性网上百度拿来用也不知道底层原理，现在都得一点点捡回来。感觉还差好多知识点没看，这周就没有再投公司面试，之前投过的都得去线下的面试，有时间抓紧再把看过的记一下，等过一遍基础就去马上约面试。感觉大学生活才慢慢的安稳下来，又得离开这里，继续马不停蹄的奔赴下一段新的的人生。学吧。...

2021-03-21 14:36:53 143 4

原创 css之BFC

文档流一般分为定位流，浮动流和普通流。BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。有其规定的渲染规则，决定了子元素如何布局，以及和其他元素之间的关系和作用。MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够

2021-03-21 11:33:46 82

原创 es6 Set Map

迭代器(iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。1)ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费2)原生具备iterator接口的数据(可用for…of遍历)ArrayArgumentsSetMapStringTypedArrayNodeList3)工作原理a)创建一个指针对象，指向当前数据结构的起始位置b)第一次调用对象的next方法，指

2021-03-21 10:48:38 88 2

原创 vue基础

v-text设置标签的文本值◆v-text指令的作用是:设置标签的内容(textContent)◆默认写法会替换全部内容使用差值表达式{}可以替换指定内容◆内部支持表达式<div id="app"><h2 v-text="message"></h2> //程序员<h2 v-text="message+'!'"></h2> //程序员!<h2>{{ message+"!!!" }}你好呀</h2> //程序员!

2021-03-21 10:02:35 300 1

原创 java入门基础-数组

我好像跟java有些不对头，看算法真的特别迷…越着急越乱。java知识在脑海里林林散散，那块好像都不挨着。只有基础的一些循环，判断之类还能用用。为了那两个算法奖，我要重头建java体系了，回到大一刚进小组的状态。总结也不会基础全面，只单纯且功利为做出算法题而已。一维数组定义要使用java语言的数组，一般经过三个步骤：声明数组，创建空间，建数组元素并赋值。int[] x; //声明数组x = new int[10]; //创建空间//合并写法int[] x=new int[10];

2021-03-21 10:02:10 864 3

原创图解http相关笔记

当在浏览器中输入url，根据url从web服务器端获取文件资源等信息，从而显示web页面。通常使用的网络是在TCP/IP协议族的基础上运作的，而http属于其内部的一个子集。TCP/IP协议按照层次分为：应用层，传输层，网络层，数据链路层应用层应用层决定了向用户提供应用服务时通信的活动。TCP/IP协议族内预存了各类通用的应用服务，如FTP（文件传输协议），DNS（域名系统）等。HTTP协议也处于该层。传输层传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据传输。在传输层有两个性质不同

2021-03-18 16:05:14 146

原创 es6 rest参数与扩展运算符

ES6引入rest 参数，用于获取函数的实参，用来代替argumentsES5 获取实参的方式function date(){ console . log( arguments);}date('小明'，'小红'，'小张'); //结果为一个对象es6中rest参数function date(.. .args){console. logfargs);}date('小明'，'小红'，'小张'); //结果为一个数组，此时即可以使用数组api的方法，例如filter，some，ev

2021-03-15 22:20:48 101

原创 es6箭头函数

ES6 允许使用「箭头」 (=>)定义函数。声明一个函数let fn = function(){}letfn=(a,b)=>{return a + b;}调用函数 let result = fn(1, 2);console .log(result);箭头函数的this 是静态的。this 始终指向函数声明时所在作用域下的this 的值function getName( ){console.log( this.name);}let getName2 = () =&g

2021-03-15 21:27:03 115

原创可继承的css属性

继承就是指子节点默认使用父节点的样式属性。简单来说，颜色，光标，声音，文字，字体间距行高对齐方式，和列表的样式可以继承。一、有继承性的属性1、字体系列属性font：组合字体font-family：规定元素的字体系列font-weight：设置字体的粗细font-size：设置字体的尺寸font-style：定义字体的风格font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。font-

2021-03-14 09:14:46 83

原创 JavaScript 中 var let 和 const

let 和 const是es6当中新增的关键字。let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。全局变量在函数外声明的变量作用域是全局的，其在js的任何部分都能访问。var a = "abcdef";//可以在这里使用a变量function myfunction(){ //也可以在这里使用a变量}局部变量在函数内声明的变量作用域是局部的。函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全

2021-03-13 18:04:09 132

原创 css3 - 盒阴影 box-shadow

边框圆角 border-radius盒阴影 box-shadow- 语法：box-shadow: h-shadow v-shadow blur spread color inset;值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小c...

2021-03-13 16:43:13 46

原创 css3新特性

圆角 border-radius阴影 box-shadow边框图片 border-image对文字加特效 text-shadow强制文本换行 word-wrap线性渐变 linear-gradient旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)增加了更多的CSS选择器、多背景、rgba()；在CSS3中唯一引入的伪元素是 ::selection ；媒体查

2021-03-13 10:09:15 47

原创 js数据类型

在JS中一共有六种数据类型* Null 空值* Undefined 未定义* String 字符串* Number 数值* Boolean 布尔值* Object 对象其中String Number Boolean Null Undefined属于基本数据类型而Object属于引用数据类型Null表示一个为空的对象。null表示一个空对象指针，如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。U.

2021-03-12 16:20:41 68

原创 react入门笔记 -- 自定义组件

1.2自定义组件（Component）方式1：工厂函数组件（简单组件）<script type="text/babel"> // 1.定义组件 // 方式1：工厂函数组件（简单组件） function MyComponent() { return <h2>方式1：工厂函数组件（简单组件）</h2> }...

2021-03-11 21:41:49 240

原创 react项目-内存中保存user

新建utils文件夹，用来在内存中保存一些数据的工具模块。建memoryUtils.js文件。export default { user: {} ,//保存当前登录的user}在login跳转之前保存user。login.jsximport memoryUtils from "../../utils/memoryUtils"; //引入 const onFinish = values => { //提交表单且数据验证成功后回调事件 console.log

2021-03-11 21:40:07 297

原创 react项目：js中【object object】取值

JSON.stringify() 是从一个字符串中解析出 json 对象。var data='{"name":"goatling"}'//解析对象JSON.parse(data)name:"goatling"JSON.parse() 是从一个字符串中解析出 json 对象。var data={name:'goatling'}JSON.stringify(data)结果是：'{"name":"goatling"}'12345678更多文...

2021-03-11 21:39:31 1325

原创 java-阶乘

以阶乘为例。1! = 12! = 1*23! = 1*2*34! = 1*2*3*45! = 1*2*3*4*5public static void main(String[] args) { System.out.println(f(3)); } public static int f(int n) { if(n==1) { return 1; }else { return n*f(n-1); } }}理解：当n=1 return 1当n不为1，

2021-03-11 21:37:38 43

原创 linux期末复习

初识linux一、Linux系统的发展1965 bell MIT 合作开发multics（功能非常强大，多而杂，没有实现）----unix1969 肯汤姆森 unix1971 丹尼斯里奇 C语言图灵奖1977，unix BSD1979，AT&T system7版本，明确提出"不可对学生提供源代码"1984 谭宁邦 minix（教学）1994 利纳斯托尔得 linux（10000行）DOS （disk operating system）linux

2021-03-11 21:35:18 982

原创防抖与节流

防抖——触发高频事件后n 秒后函数只会执行一次，如果n 秒内高频事件再次被触发，则重新计算时间；function debounce(fn) { let timeout = null // 创建一个标记用来存放定时器的返回值 return function() { clearTimeout(timeout) // 每当用户输入的时候把前一个setTimeout clear 掉 timeout = setTimeout(() => { // 然后又创建一个新的setTimeout, 这

2021-03-11 21:26:06 52

原创 Object.prototype.toString.call() 、instanceof 、Array.isArray()判断数组

Object.prototype.toString.call()每一个继承 Object 的对象都有toString 方法，如果toString 方法没有重写的话，会返回[Object type]，其中type 为对象的类型。但当除了Object 类型的对象外，其他类型直接使用toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call 或者apply 方法来改变toString 方法的执行上下文。这种方法对于所有基本的数据类型都能进行判断，即使是null 和undefined 。O

2021-03-11 20:42:50 263

原创递归

递归就是自己调用自己利用递归可以用简单的程序来解决一些复杂的问题。它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。递归结构包括两个部分:◆递归头:什么时候不调用自身方法。如果没有头,将陷入死循环。◆递归体:什么时候需要调用自身方法。递归三要素第一要素：明确你这个函数想要干什么例如，定义一个函数// 算 n 的阶乘(假设n不为0

2021-03-11 20:32:13 70

原创 Vue 的双向数据绑定

Model 如何改变View从Model 到View 的映射（Data Binding），这样可以大量节省你人肉来update View的代码View 又是如何改变Model 的从View 到 Model 的事件监听（DOM Listeners），这样你的Model 会随着View触发事件而改变数据双向绑定即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。　　单

2021-03-11 16:20:25 94

原创重绘和回流

1. 浏览器渲染机制浏览器采用流式布局模型（Flow Based Layout）浏览器会把HTML 解析成DOM，把CSS 解析成CSSOM，DOM 和CSSOM 合并就产生了渲染树（Render Tree）。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree 的计算通常只需要遍历一次就可以完成，但table 及其内部元素除外，他们可能需要多次计算，通常要花3 倍于同等元素的时间，这也是为什

2021-03-11 15:32:53 65

空空如也

空空如也