心。晴-优快云博客

原创【正则表达式】以字母或下划线开头，包含字母、数字、以及下划线

要求输入一个参数，以字母或下划线开头，包含字母、数字、以及下划线；同时不能与某些参数同名。<el-input placeholder="请输入" v-model="parameterkey" @blur="regtest" clearable ></el-input>blur() 方法用于移除文本域的焦点。regtest(){ if(this.parameterkey!==''){ var reg = /^[a-zA-Z_]([a-zA-Z0-9_]+)?$/

2021-03-15 11:53:06 10308

原创防止表格中的单行按钮被频繁点击，前端实例讲解~

在网页开发过程中，经常遇到按钮被频繁点击造成请求重复的问题，可以采用一个策略：设置定时器setTimeout，点击一次后让按钮灰掉（disable），暂时不可以用，一段时间后再启用。如果只有单个按钮，直接设置定时器即可，若是存在于表格中的多个按钮，需要一一进行处理。1、给表格中的每个对象都设置disabled属性，默认为falsethis.tableData.forEach(v=>{ this.$set(v, 'disabled', false)})2、对按钮的disabled参数进行

2021-03-01 10:20:32 653

原创 Echarts文字大小自适应，案例详解

用echarts做可视化大屏的时候，图表大小可以自适应，但是图表里面文字的大小不能自适应。有一种解决方法就是采用rem为单位，根据屏幕的宽度调整html的font-size。<div id="qualres" style="width:100%; height:100%; padding:1rem"></div>先定义一个函数fontSize()，用来获取屏幕宽度并计算比例，在需要设置字体的地方调用这个函数即可。getEcharts(){ //获取屏幕宽度并计算比例 f

2021-02-24 14:37:42 13405 15

原创三种方法实现轮播图配置，史上最简方法~

<div class="conscroll"> <div class="caroubtn" @click="toleft"><</div> <ul><li class="single" v-for="item in list" :key="item.id"> <h4 class="sub_title"><i :class="item.iconName" style="margin-righ

2021-02-24 11:42:33 1060

原创 CSS的@media与@media screen，媒体查询

在网站自适应设计中，@media与@media screen是经常会用到的css代码，其功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。@media与@media screen区别@media与@media screen两者在电脑&手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，就用@media；否则，就用@media screen。不过这只是笼统的做法，其实如

2021-02-20 15:53:11 3676

原创 highlight.js 语法高亮，让你的页面更美观~

在网页开发过程中，经常会用到代码的展示，而不同颜色的代码，可以让页面看起来更直观，也更美观。highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，比较实用，而且用起来炒鸡简单！先来看看highlight.js的使用效果吧~1、获取highlight.js库官网地址：https://highlightjs.org/点击Get version按钮进入语言选择，勾选你常用的语言，在

2021-02-09 17:37:52 26358 2

原创在VUE项目中使用SCSS，从安装步骤到语法说明，带你快速入门！！

最近在做VUE项目时用到了SCSS ，在这里总结一下SCSS在项目中是如何使用的。首先要了解什么是SCSS？SCSS是一种CSS预处理语言，定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS。SCSS和SASS 有什么区别？sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，

2020-09-08 21:19:51 2141

原创【前端笔试算法题】之小偷分赃题

有五个人偷了一堆苹果，准备在第二天分赃。晚上，有一个人出来，把所有苹果分成5份，但是多了一个，他顺手把这个苹果扔给树上的猴子，自己先拿了1/5藏了起来。结果其他四个人也都是这么想的，都如第一个人一样把苹果分成了5份，把多的那一个扔给了猴子，并且偷走了1/5。第二天，大家分赃，也是分成5份多一个扔给了猴子，最后每人分了一份。问：共有多少个苹果？// 声明苹果的个数let s = 1;while(true){ // 第一次均分时多出来一个苹果 s++; // 第一个人偷走的苹

2020-09-03 16:33:59 413

原创【Vue】一个案例带你搞懂methods、watch及computed的使用规则

本文我们通过案例来介绍一下vue中 watch 和 computed 的使用规则，案例效果如下：以上案例就是实现一个简单的名称拼接处理。实现的方式有很多，本文我们将采用以下三种方式来实现。1、DOM对象操作我们可以通过普通的dom对象操作来实现这个效果：首先给三个 input 输入框和 vm实例做双向绑定，然后给前两个输入框分别绑定 keyup 事件，并且在 vm 实例的 methods 中定义拼接名称的方法即可。<!DOCTYPE html><html lang="e

2020-09-03 13:57:19 267

原创【Vue】路由Router嵌套的实现及经典案例

Vue 中路由在使用的时候嵌套使用是非常频繁的，所以本文我们就来通过案例介绍一下嵌套路由的使用。Vue路由嵌套先来准备一个普通的路由案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/li

2020-09-03 11:50:34 3571

原创【Vue】路由Router传参的两种方式（详解）

本文我们来介绍一下Vue中的路由传参问题，首先我们来准备一个基本路由的页面，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">&

2020-09-03 10:36:17 1933

原创【vue】路由Router基础详解，带你快速入门~

什么是路由后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。前端路由：对于单页面应用程序来说，主要通过改变URL中的 hash(#) 来实现不同页面之间的切换。hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现。Vue路由基本使用1、引入vue-router我们需要引入 vue-router.js 文件，而且必须是在 vue.js 文件之后引入。<script src="htt

2020-09-02 20:38:02 1052

原创【Vue实例四】利用Vue组件实现添加评论的功能

前面学到了Vue的组件功能，本文我们通过一个评论列表的案例来巩固下组件的内容，具体效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"&

2020-09-01 18:53:31 3249 4

原创【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）

父组件传值给子组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti

2020-08-31 20:46:54 308

原创【Vue案例三】使用v-if指令 / component标签实现组件的切换

前面介绍了Vue中组件的创建方式和data及methods属性，本文我们来做一个Vue组件的切换案例，效果如下：这个效果相信大家都能搞定，本文希望通过这个案例来加深一下对组件的使用。我们通过前面介绍的 v-if 指令和 component 标签两种方式来实现这种效果。通过v-if控制实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name

2020-08-31 19:22:37 2681

原创【Vue】组件的创建以及 data & methods 属性的使用

本文我们来介绍下Vue中的组件，组件是可复用的 Vue 实例，且带有一个名字。组件的创建extend方式首先通过 Vue.extend 方法来定义一个全局组件。template 就是组件将来要展示的HTML内容。然后通过 Vue.component 来添加我们的组件。（注意：组件的名称如果采用的是驼峰命名法，那么在使用组件的时候，大写必须改为小写，而且要用 “-”连接。）<div id="app"> <my-com></my-com></div

2020-08-28 17:42:44 1279

原创【Vue】实例对象的生命周期（方法详解）

通过前面的学习，我们知道使用Vue的时候必须创建一个Vue实例对象：var vm = new Vue({...})，那么这个Vue实例的生命周期是怎么样的呢？本文我们就来详细的介绍下。上图是Vue官方给出的生命周期的流程图，可先大概浏览一下，看不懂没关系，下面将为大家介绍生命周期中各个方法的具体作用。1、beforeCreate生命周期的第一个方法，表示实例被创建出来之前被调用。此时，此时Vue实例中的 data 和 methods的内容都还没有被加载。<div id="app">&l

2020-08-28 15:39:31 800

原创【Vue】自定义指令（全局定义 & 局部定义）

前面已经介绍了几个系统提供的指令，比如 “v-text”、“v-bind”、“v-on” 等等，本文我们来介绍下自定义指令的实现。自定义全局指令我们想创建一个自动获取焦点的指令，该功能其实可以通过 document.getElementById('search').focus() 来实现，但此处我们专门来介绍下自定义指令的实现方式。效果实现定义全局指令：v-focusVue.directive("focus",{ bind:function(el){ }, inser

2020-08-28 14:34:25 599

原创【Vue】全局过滤器和局部过滤器

Vue.js 允许自定义过滤器，可用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式，被添加在 JavaScript 表达式的尾部，由管道符 (" | ") 指示。过滤器分为全局过滤器和局部过滤器(私有过滤器)。全局过滤器过滤器的声明：Vue.filter("过滤器名称","回调函数")简单过滤器的使用<!DOCTYPE html><html lang="en"><head> <meta charse

2020-08-28 11:32:45 1681

原创【Vue案例二】实现对表单数据的添加、删除以及关键字查询操作

本文我们通过一个小案例来巩固一下前面学到的内容，即实现对表单数据的添加，删除和关键字查询的操作，具体案例效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <script src="https://cdn.bootcdn.

2020-08-27 21:36:34 1281

原创【Vue案例一】实现跑马灯效果

在Vue学习笔记（一）中我们已经学过了 v-on 这个指令，可以用来实现事件的绑定，本文我们利用 v-on 来实现一个简单的跑马灯效果，就是如下这种效果：第一步：导入Vue包<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>第二步：创建一个要控制的区域<div id="app"> <button>开始</button>

2020-08-27 17:40:11 1014

原创【Vue】class & style：Vue中的两种样式处理方法

class属性1、基本的class使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .red { color: red; } .big { font-weig

2020-08-27 13:38:42 1088

原创【Vue】v-if 、v-show、v-for指令，最基础的流程控制和循环处理

本文我们来学习一下v-if，v-show和v-for指令，也就是最基础的流程控制和循环处理。v-if 和 v-showv-if 和 v-show 的作用有点类似，都是进行条件判断，我们一起来看一下，案例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="ht

2020-08-26 20:45:02 642

原创【Vue】v-bind & v-model指令的使用（实现计算器效果）

在Vue学习笔记（一）中我们已经了解了Vue中的基本指令，比如 v-text，v-html，v-bind，v-on 等指令的使用，并且介绍了 MVVM 模式，那么怎么实现动态的在M和V之间数据传递呢？本文我们就来介绍下 v-model 这个非常有用的指令。v-bind指令v-bind 可以获取vue对象中的数据，但是这个指令只能实现 M 到 V 的数据传递，反过来实现不了。<!DOCTYPE html><html lang="en"><head> &lt

2020-08-26 19:03:37 488

原创【Vue】五个最常用的事件修饰符

事件修饰符概览修饰符说明.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self只当事件在该元素本身(比如不是子元素)触发时触发回调.once事件只触发一次.stop.stop用来防止冒泡，我们先来看看冒泡的场景。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2020-08-26 13:41:18 5913

原创什么是Vue？为什么要学习Vue？如何使用Vue？

Vue基础介绍什么是Vue.jsVue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。它是一个构建数据驱动的 web 界面的库，目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它是基于 mvvm 模式的框架，只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。MVC与MVVM有什么区别M

2020-08-25 20:54:01 2080

原创 CSS清除浮动的五种常用方法

清除浮动是每一个 web前台设计师必须掌握的技能。浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width、height 属性。以下面的场景为例，给大家展示一下不清除浮动引发的“车祸现场”。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

2020-08-25 14:27:15 1030

原创【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。

CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局， flex 盒子布局、float 浮动布局、position 定位布局，grid 网格布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识。已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。对于上面这道题，我们分别使用这几种布局方式来实现如下图所示的效果。table 布局<!DOCTYPE html><html lang="en"&gt

2020-08-25 13:03:36 374

原创三分钟让你掌握JavaScript中值传递和引用传递的区别

值传递：传递的是实际参数的一个副本。基本数据类型Undefined，Null，Boolean，Number、String都是值传递。引用传递：传递的是实际参数的地址。引用数据类型Object，Array，Date， Function等都是引用传递。var a = 10function add(num){ num+=10 return num}add(a)console.log(a) //10console.log(add(a)) //20对于以上代码，a与函数内部的num互不

2020-08-24 20:47:21 1035

原创 JavaScript运算符的优先级（案例讲解）

今天遇到了一道题。。。下边代码输出的结果是（）var val = 'smtg';console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');A: Value is SomethingB: Value is NothingC: NaND: other

2020-08-24 20:13:03 1343

原创【ES6】模块功能的实现--export / import 命令

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

2020-08-23 18:05:26 410

原创【HTML5】Web存储、通信、地理位置

Web存储cookiecookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie。一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie。（cookie的存储容量比较小，只有4k）//引入js-cookie库<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.js"></script>// 创建一个cookie，7天后过期

2020-08-23 17:11:27 575

原创【ES6】什么是Promise？解析Promise的基本用法

Promise介绍Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。有了Promise对象，就可以将异步操作以同步操作的流程

2020-08-21 17:49:25 417

空空如也

空空如也