@码上行动-CSDN博客

原创 vue创建对象

<body> <div class='hehe'> {{name}} //渲染 </div></body><script> new Vue({ //实例化vue对象 el:'.hehe', //指定元素 data:{ //存放数据 name:'你好世界' ...

2019-12-14 10:41:38 5537 1

js13——正则正则表达式概念：一个用于规范字符串的表达式。作用：通过自写的规则从一个杂乱的字符串中找出符合规则的部分，或判断一个字符串是否符合此规则。还可以将一个字符串中符合规则的部分进行替换。语法： /正则表达式主体/修饰符(可选)var reg = new RegExp(); // 构造函数方式var reg = /hello/i; // 字面量方式元字符\d 代表任意一个数字 == [0-9] -----> [1-9]\w 代表任意一个数字、字母、下划线\s 代表一个空

2021-11-17 17:40:04 168

原创 vue循环遍历出来的表单输入框如何做校验？

需求：当有多个参数类型时候，便利显示，并且value的输入框能各自校验。1、表单代码：<el-form-item label="参数类型：" label-width="150px"> <div v-for="(item,index) in form.paramsInfo" :key="index"> <el-form-item label="value" :prop="`paramsInfo.${index}.value`" :ru

2021-09-17 10:19:36 3439

原创 js赋值运算（加、减、乘、除、余）

赋值运算:+= -= *= /= %=赋值符：左边是一个变量，右边是一个值，赋值就是将右边的值给了左边的变量；加法var a = 10;a += 1; // 相当于a = a + 1console.log(a); //a=11 10加3的值减法var a = 10;a -= 1; // 相当于a = a - 1console.log(a); //a=9 10减3的值乘法var a = 10;a *= 3; // 相当于a = a * 3;console.log(

2021-09-16 15:02:48 633

原创 if、else-if、switch的区别

文章目录一、if 和 if-else分支单分支语法双分支语法多分支二、switch多路一、if 和 if-else分支单分支语法if(条件表达式){ 当条件表达式的结果为true的时候要执行的代码}双分支语法if(条件表达式){ 当条件表示式的结果为true的时候要执行的代码}else{ 当条件表达式的结果为false的时候要执行的代码}多分支if(条件表达式1){ 当条件表达式1的结果为true的时候，要执行的代码}else if(条件表达式2){

2021-09-16 14:58:44 476

原创 a标签锚点实现超链接

锚点demo什么是锚点：1、实现效果：2、代码展示：总结什么是锚点：就是当页面内元素过长时，能快速定位到指定元素位置需要目标元素的name或id属性和a标签的href相对应即可；注：href="#目标元素的name或id名"1、实现效果：锚点这里是顶站的锚第1任第2任第3任第4任第5任第6任美国历任总统● 第1任(1789-1797)姓名：乔治·华盛顿George Washington生卒：1732-1799政党：联邦● 第2任(1797-1801)

2021-09-10 10:29:54 497 1

原创 Promise的基本用法以及作用

这里写目录标题1- 初识Promise2- 回调地狱的引发3- Promise （承诺）的用法4- async 异步5- await6- 使用 async 解决回调地狱问题1- 初识Promisepromise是一个 es6 的语法在介绍promise前，先来了解一下什么是回调函数 callback把一个函数当作参数传递到另一个函数里面,在另一个函数里面通过参数的形式来调用 function a() {} //函数a function b(cb) { // cb 形参接受的是

2021-07-06 16:05:45 1676

原创 vue watch和computed的用法和区别

文章目录对比1对比2对比3对比1<template> <div> <el-input v-model="demo"></el-input> {{value}} </div></template><script> export default { name: 'index', data() { return { demo: '',

2021-07-06 16:03:45 322

原创原型、原型链、原型继承的区别

原型？原型链？原型继承？JS中的原型和原型链讲原型的时候，我们应该先要记住以下几个要点，这几个要点是理解原型的关键：1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）。2、所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型，它是一个普通的对象)。3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象)。4、所有引用类型，它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。5、当试图得到

2021-07-06 16:02:37 325

原创 js两个等号和三个等号的区别

js两个等号和三个等号的区别== 用于一般比较，在比较的时候可以转换数据类型，再比较转换后的值是否相等=== 用于严格比较，只要类型不匹配就返回flase。对于string,number等基础类型之间的比较，== 和 === 是有区别的（两等类型不同是转换再比较，三等类型不同直接返回false）对于Array,Object等高级类型之间的比较，== 和 ===是没有区别的基础类型与高级类型之间的比较，== 和 === 是有区别的对于==，将高级转化为基础类型，进行“值”比较，因

2021-07-06 16:02:17 648

原创 MVC 和 MVVM的区别

MVC 和 MVVM 的区别一、MVC（Model View Controllor）Model 一般就是本地数据和数据库中的数据View 就是用户看到的视图Controllor 控制器传统的 MVC 架构通常是使用控制器更新模型，视图从模型中获取数据去渲染。当用户有输入时，会通过控制器去更新模型，并且通知视图进行更新。MVC 缺陷：控制器承担的责任太大了，随着项目愈加复杂，控制器中的代码会越来越臃肿，导致出现不利于维护的情况。二、MVVM（Model View Vie

2021-07-06 16:01:45 84

原创 vue 的中单向数据流的理解

vue 的中单向数据流的理解数据从父级组件传递给子组件,只能单向绑定，子组件不能直接修改从父级传递过来的数据数据,只能从一个方向来修改状态, 如果父组件给 N 个子组件进行了数据传递。那么某一个子组件中修改了这个数据，那么就会导致其他组件的数据也会发生改变。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。因此数据只能从一个方向来修改状态...

2021-07-06 15:59:48 124

原创什么是动态组件，如何使用，以及 keep-alive 的作用

动态组件：让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件通过保留元素，动态的绑定它的 is 特性，可以实现动态组件keep-alive:包裹动态组件(组件)时，会缓存不活动的组件实例,而不是销毁它们组件，切换调用的时候本身会被销毁掉的，只要加上keep-alive 进行包裹，就不会被销毁，而是被缓存起来,下一次使用的时候直接从缓存中调用是一个抽象组件：它自身不会渲染一个 DOM 元素常用的一些属性：include:类型：字符串或者正则表达式解释：只有名称匹配的组件会被缓存ex

2021-07-06 15:58:36 3249

原创 vue 的生命周期

1、beforeCreate()组件实例刚刚被创建 (el 和 data 并未初始化)2、created()组件创建完成,属性已绑定,但 DOM 还未生成,$el 属性还不存在(完成 data 数据的初始化)3、beforeMount()模板编译/挂载之前(完成了 el 和 data 初始化)4、Mounted()模板编译/挂载之后(完成挂载-生成dom) 5、beforeUpdate()组件更新之前6、updated()组件更新之后7、beforedestroy()组

2021-06-29 17:51:49 43

原创 vue 中自定义指令如何使用

Vue.directive(): 参数 1：指令名称参数 2：指令实现的函数，在回调函数中：参数一是指令绑定的元素，参数二是一个对象,其中对象中有 value 属性代表的是表达式返回的结果，还有 modifiers 属性是指令的修饰符...

2021-06-29 17:51:07 47

原创 vue 中的过滤器如何使用

Vue.filter() 参数 1：过滤器名称参数 2：过滤器实现的方法该方法中有 2 个参数：参数 1 为需要过滤的数据，参数 2 为过滤器传递的参数

2021-06-29 17:50:21 49

原创 vue 中组件创建的方式有哪些

全局组件和局部组件1.全局组件 Vue.component(); 参数 1：组件名称参数 2：组件的配置项 //创建组件 let component = Vue.extend({ template:'<div><h1>轮播图</h1></div>' }) //注册组件 Vue.component('hehe',component)2.局部组件 new Vue({components:{key:val}key 值为组件名称

2021-06-28 09:34:00 125

原创 methods、computed、watch 三者的区别三者之间的共同点

参考：https://www.cnblogs.com/widgetbox/p/8954162.html共同点methods,watch 和 computed 都是以函数为基础的computed 与 watch 都是以 Vue 的依赖为基础，当所依赖的数据发生变化的时候会（自动（自动执行））触发相关的函数去实现数据的变动methods 里面是用来定义函数的，需要手动才能执行不同点computed:computed 是一个计算属性，computed 所依赖的属性发生变化时，计算属性才会重新计算,并

2021-06-23 09:33:02 347 1

原创 v-show 与 v-if 的区别

v-show操作的是元素的 display 属性–有更高的初始渲染开销v-if操作的是元素的创建和插入–有更高的切换开销如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好使用的场景：v-show:前台数据的展示v-if:管理系统权限列表的展示v-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。所以总的来说 v

2021-06-23 09:32:42 66

原创箭头函数和普通函数的区别

{}=>箭头函数和 function（）{}的区别一、写法不同//function function fn(a, b){ return a + b; }//arrow function var foo = (a, b)=>{ return a + b }; 将返回值用一个变量接收起来二、this 指向使用function定义的函数，this的指向随着调用环境的变化而变化，而箭头函数中的this指向是固定不变的，一直指向定义函数的环境。//使用functi

2021-06-22 15:59:51 122

原创 js基础语法

文章目录Js基础一、输出方式二、定义变量三、变量类型四、数字类型1、整数2、小数3、对象4、运算拓展总结Js基础一、输出方式 alert('Hello Woorld'); //以弹窗的形式显示 document.write('亮亮'); //以文本的形式显示 prompt(12345) //可输入内容的弹窗 confirm(666666666) //可判断的弹框 console.log(88888); //调试工具中输出 console.log(typeof("亮亮")); //类型检测

2021-06-22 15:59:28 168

原创 js基本用法

文章目录Js概述1、js概念2、应用场景3、js的组成4、编写Js及如何运行JS总结Js概述1、js概念概念：支持面向对象的跨平台脚本语言。理解： 1. 脚本语言：依赖别的语言才能运行 html必须在浏览器中才能运行，js嵌套在html中才能运行 2. 跨平台：可以在不同的平台上运行 windows、linux、安卓。。。 3. 支持面向对象使用面向对象的思想编程 2、应用场景 1. 表单验证：规范用户输入数据，和后台数据进行交互 2. 网页特效：给页

2021-06-21 11:33:09 1109

原创进制转换总结

文章目录进制转换（1）十进制转其他进制（2）其他进制转十进制（3）二进制转8进制（4）二进制转16进制补充：（1）十进制转二进制（2）二进制转十进制（3）二进制转八进制（4）八进制转成二进制（5）二进制转十六进制（6）十六进制转二进制（7）十进制转八进制或者十六进制有两种方法（8）八进制或者十六进制转成十进制（9）八进制与十六进制之间的转换有两种方法总结进制转换（1）十进制转其他进制将十进制数除以进制数依次取余，直到商数为0结束然后将所得余数反序得到结果八进制前面加 0 十六进制

2021-06-21 11:32:26 436 1

原创 css标准盒模型

文章目录标准盒模型一、padding（内边距）二、margin（外边距）总结标准盒模型标准盒模型盒子的实际大小盒子的总宽度 = width + 左右的padding + 左右的border盒子的总高度 = height + 上下的padding + 上下的border一、padding（内边距）控制内容与盒子边框的关系（又叫内填充）填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白；用法：1）用来调整内容在容器中的位置关系 2）paddin

2021-06-21 11:31:35 141 1

原创 CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？

CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？1、选择符2、继承3、优先级总结CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？1、选择符基本选择器：标签选择器 div,h1,p{} 多个标签时为群组选择器 id选择器 #mydiv{} 类名选择器 .mydiv{} 通配符选择器 *{}层次选择器：后代选择器 parent n{} 选中parent元素

2021-06-18 18:37:12 1471

原创移动端像素

移动端1、移动端媒体查询结合rem （流式布局、100%）vw结合rem （等比缩放布局）2、dpr 设备像素比物理像素（PS测量的像素）逻辑像素（css设置或者屏幕显示的像素）3、dpr =物理像素/逻辑像素640px （5/4） dpr2750px （6/7/8） dpr21080px dpr34、单位：绝对定位 px、pt相对单位 100%em（父元素的fontsize值）rem（根元素html的fontsize值）5、禁止网页缩放：@media al

2021-06-18 18:36:53 98 1

原创 css多列

css多列1、columncount:列数; 分割成几列2、column-gap:50px; 列之间的距离3、column-rule:2px solid red; 列之间的分隔线4、column-fill:auto/balance; 内容排列的高度 auto: 前面填满、空白留在最后一列； balance: 空白平分在每一列；5、column-span：none/all; all: 标题跨所有的列（text-align居中）6、colum

2021-06-18 18:36:10 54

原创 css三种盒模型总结

文章目录一，标准盒模型二，怪异盒模型三，弹性盒模型（1）设置主轴的方向：（2）设置内容换行（默认元素会自动挤压、不换行）（3）设置主轴的排列方式（4）设置侧轴的排列方式（5）设置多行内容排列（6）alignself属性（单个定义时用）（7）给灵活元素设置的样式（8）flexgrow属性（9）flexshrink属性（10）flexbasis=width属性（11）flex属性总结一，标准盒模型点击查看标准盒模型介绍box-sizing：content-box;（标准盒模型）盒子的总宽度

2021-06-17 09:07:14 930

原创 CSS3新增属性

文章目录CSS3新增属性1、文字阴影2、盒子阴影3、圆角边框4、换行5、背景裁切（背景颜色）6、背景原点（背景图片）7、背景尺寸8、边框属性9、多重背景属性总结CSS3新增属性1、文字阴影text-shadow:2px 3px 4px red; 水平阴影位置垂直阴影位置阴影模糊距离阴影颜色注：水平阴影和垂直阴影可以设负值（-左+右）2、盒子阴影box-shadow:2px 3px 4px 5px blue inset;inset:是否设置内阴影、放在最后（默认外阴影）

2021-06-17 09:06:44 54

原创 H5新增表单元素和验证

文章目录一，智能表单的type二、属性三、标签四、属性选择器五、伪类选择器1、动态伪类2、UI元素状态伪类（主要针对form元素）3、CSS的结构伪类选择器4、:target 选择器可用于选取当前活动的目标元素。5、否定选择器（:not）6、:root 选择文档的根元素总结一，智能表单的type无兼容性：type="email" 邮箱type="url " 验证有没有网址格式type="range" 滑动条（min、max/step）type="number" 数字条（min、max/step

2021-06-09 09:51:22 271 2

原创 HTML5基础标签

文章目录HTML51）section2）article3）aside4）header5）footer6）nav7）figure8）embed9）mark10）音频和视频11）datalist选项列表（通过id与input连接）12）output14）hgroup总结HTML5 1. 内容类型：< !DOCTYPE html> 2. 指定字符集编码：< meta charset=”utf8”> 3. 不允许写结束标记的标签：br、col、embed、hr、img、inp

2021-06-09 09:50:57 214 1

原创 CSS文档统筹

1、CSS文档统筹1）整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可。 2）网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件。2、网页自身优化（如何让网站被搜索引擎搜索到）1）页面主题优化实事求是的写下自己网站的名字，网站的名字要合理，最好包含网站的主要内容。2）页面头部优化页面头部指的是代码中部分，具体一点就是中的“Description（描述）”和“Keywords（关键字）”两部分：1、“描述”部分应该用近乎描述的语言写下一段介绍你网

2021-06-09 09:50:35 57

原创表格标签及属性高级

表格标签及属性高级1、单元格间距：(给table{ }加)border-spacing:5px;2、合并相邻单元格边框：(给table{ }加)border-collapse:separate/collapse;separate：默认边框分开 collapse：边框合并3、无内容时单元格的设置：(给table{ } 加)empty-cells:show/hide;show：显示 hide：隐藏4、单元格的宽高：(给table{ }加)table-layout:auto/fixed;

2021-06-08 16:03:51 120

原创 BFC概念和应用场景

BFC概念和应用场景BFC(Block formatting context),直译为”块级格式化上下文”。它是一个独立的渲染区域，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。1、哪些元素会生成BFC?（只要元素满足下面任一条件即可触发 BFC ） 1. 根元素 html 2. float属性不为none 3. position为absolute或fixed 4. display为inline-bl

2021-06-08 16:02:43 192

原创表单标签及属性高级

表单标签及属性高级1、表单的组成：表单域：< form name="" method="get/post" action="">< /form>表单控件：<input type="text/password/submit/reset/button" value="">2、表单字段集(可嵌套)<fieldset disabled="disabled"> </fieldset>disabled定义空间禁制可用；3、字段级标题<

2021-06-07 11:40:43 62

原创如何让元素在浏览器窗口水平垂直居中

元素在浏览器窗口水平垂直居中元素设置固定定位 position:fixed;方法1：给子元素设置属性： left: 50%; top: 50%; margin-left: -50px;（margin回退为子元素自身宽度的一半） margin-top: -50px;（margin回退为子元素自身高度的一半）方法2：给子元素设置属性： left: 0; top:0; right: 0; bottom:0; margin:auto;拓展：如何让子元素在父元素中水平垂直居中？总

2021-06-07 11:40:17 585

原创 CSS层叠和继承

1、继承继承：子元素继承父元素的属性不可继承的属性：display、margin、border、padding、height、min-height、max- height、min-width、max-width、background、overflow，position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align所有元素可继承的属性visibilitycursor内联元素可继承：let

2021-06-04 15:19:36 95

原创常见的css浏览器兼容问题

常见的CSSbug和CSShack先简单的介绍下五大浏览器的内核和代表作Trident：IE MaxThon(遨游) 、腾讯、 Theword(世界之窗) 、 360浏览器 Gecko：Mozilla Firefox Presto：Opera Webkit：Safair 、Chrome 、遨游浏览器3 Blink： Opera Software、Google 国产双内核：Blink、Trident1、图片边框bug:当a包裹图片的时候，在IE10或以下浏览器会自带边框；解

2021-06-04 15:18:48 1608

原创前端css伪对象选择符

伪对象选择符:after 与content属性一起使用，定义在对象后的内容:before 与content属性一起使用，定义在对象前的内容:first-letter 定义对象内第一个字符的样式，注：该伪元素只能用于块元素:first-line 定义对象内第一行的样式，注：该伪元素只能用于块元素，ie6以下版本浏览器不支持伪对象选择符::selection 选中之后的样式只支持这background color属性总结以上是对伪对象选择符的小总结，后期将继续更新html基础知识点文

2021-06-04 15:18:21 69

原创前端如何解决高度塌陷问题

高度塌陷出现原因：如果父元素不设置高度或者父元素设置最小高度，一旦内容浮动，内容不占位父元素识别不了子元素的高度，就会出现高度塌陷解决方法：方法1：给父元素加overflow:hidden(overflow:hidden可以触发BFC，BFC是一个独立的渲染区域，布局规则：浮动的元素也参与高度计算)缺点:超出父元素范围的内容会隐藏方法2：给所有浮动元素的最下方写一个空盒子，给空盒子设置clear：both，让盒子在所有浮动元素的下方显示，就可以把父元素的高度撑起来缺点:无

2021-06-01 19:14:57 680

空空如也

输入框和文本框的光标，不能通过键盘左右键控制移动

遇到一道sql语句查询的题，有看到会的帮解答一下

uniapp中input 怎么限制只能输入一个小数点 . ，并且最多保留两位小数

element-UI中的输入框怎么实现只能输入纯数字并可输入两位小数