web前端
关注
分享
扫一扫
文章平均质量分 60
前端学习交流
卡卡西Sensei
这个作者很懒，什么都没留下…
展开
-
JS 函数中arguments的使用
目录写在前面1.什么是arguments2.arguments的使用3.举例说明4.总结写在前面在函数中，我们的参数分为形参和实参，在函数调用的时候传递实参，函数接收参数的时候，形参和实参我们尽量匹配上。但有的时候，我们也不确定有多少个参数传递过来啊，用户到底有多少个实参传递过来，那形参就很难写啊？写少了吧，结果不对，写多了吧，又是多余！！！????这个时候怎么办呢？？1.什么是arguments那在JavaScript中提供了一个解决的办法，就是可以使用argument原创 2021-05-04 11:13:07 · 1790 阅读 · 2 评论 -
JS 逻辑中断(二)
接上一篇JS逻辑中断(一)本篇介绍逻辑中断或(短路运算)1.逻辑中断或如果表达式1 结果为真，则返回表达式1 如果表达式1 结果为假，则返回表达式2举例1console.log(387 || 618)根据上面的规则特性，387||618 结果应该是387,运行一下看看结果如何，不出意外，控制台打印是387哈哈，果然是387，和预期的一样，如果表达式1 结果为真，则返回表达式1举例2复制下上面的，再后面加上其他的表达式看看结果如何呢？？？ 不出意外肯定还是3...原创 2021-04-19 14:49:41 · 606 阅读 · 0 评论 -
vue 表单验证 支持6位小写字母和数字组合，必须包含2位字母
rules: [ { required: true, message: "XXX不能为空", trigger: "blur" }, { max: 6, message: "最大长度为6位字符", trigger: "blur" }, { pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母 // /^(?=.*[a-z]{2})[a-z0-9]...原创 2021-03-29 17:18:31 · 2140 阅读 · 0 评论 -
VSCode 添加代码块
在iOS开发中，我们经常使用Xcode里面的代码块，来提高开发效率。把平时经常使用到的方法，或者是代码比较多的方法，弄个代码块，就不需要一个一个字符去敲了，非常方便。那么在使用VSCode的时候，我们也想和使用Xcode一样，设置代码块，方便平时开发调用，改如何去设置呢？？？前往下看????1.打开VSCode设置找到设置里面的“User Snippets”（用户代码片段）2.选择代码块文件或者创建代码块这里列出了比较常用的文件类型，HTML、JavaScript 、Vue等后原创 2021-04-02 16:56:57 · 3110 阅读 · 0 评论 -
JS 逻辑中断(一)
通常我们平时的布尔运算的逻辑运算，都是布尔值之间的运算，true&&false == false那如果是 231 && 789 的这种值的运算，或者是表达式参与逻辑运算的呢？？？那结果是231 还是789呢？？？在逻辑运算中，有一个非常重要的特点：我们叫作短路运算或者叫逻辑中断的短路运算的原理：当有多个表达式（值）时候，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值比如在公司，工位一排的电脑连着电在工作，突然其中一台电脑的线路短路了，其...原创 2021-04-16 17:33:42 · 828 阅读 · 0 评论 -
:visible.sync 的作用
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，特别是在使用ElementUI的时候， 里面有个弹窗el-dialog组件的时候会有用到:visible.sync<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" :visible.sy...原创 2021-02-23 15:45:15 · 65986 阅读 · 10 评论 -
前端 refs通信
目录1.ref 放在标签上2.ref放在组件上3.总结：组件之间的的通信，除了props, 事件总线，事件机制( $on(eventName),$emit(eventName) )，还有Ref例如，一个输入框input，我们要拿到它的值，有几种方法呢？最简单的就是v-model，数据双向绑定，这里就不具体展开说了，着重讲一讲ref,那么这个ref该怎么使用呢？1.ref 放在标签上<div id="app"> <input type="te...原创 2021-01-28 11:23:06 · 1682 阅读 · 0 评论 -
CSS按钮动画(五)
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题，加上transform设置X和Y的百分比就可以了废话就不多说，咱们直接上代码，干就完了！！！html代码<body> <div class="abc"> <div> <button class="btn bt..原创 2021-01-18 09:10:57 · 687 阅读 · 0 评论 -
CSS按钮动画(四)
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题，起始位置在按钮的最左边废话就不多说，咱们直接上代码，干就完了！！！html代码<body> <div class="abc"> <div> <button class="btn btn-1 btn...原创 2021-01-14 09:11:33 · 722 阅读 · 0 评论 -
CSS按钮动画(三)
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？简单分析一下，无非就是，鼠标移入和移出的时候，改变下白色的一个“遮罩”的宽度和透明度的问题废话就不多说，咱们直接上代码，干就完了！！！html代码<body> <div class="abc"> <div> <button class="btn btn-1 btn-1d">hello ...原创 2021-01-11 09:11:27 · 1241 阅读 · 0 评论 -
CSS按钮动画(二)
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？简单分析一下，无非就是鼠标????移入和移出的时候，改变“遮罩”的高度，“遮罩”的起始位置在按钮的顶部 废话就不多说，咱们直接上代码，干就完了！！！html代码<body> <div class="abc"> <div> <button class="btn btn-1 btn-1b"&g...原创 2021-01-08 08:56:42 · 1439 阅读 · 0 评论 -
CSS按钮动画(一)
在前端的开发中，我们都会用到很多种动画，按钮动画就是最基础和最简单的一种了。 例如像下面这种按钮的动画效果该怎么实现呢？ 我们分析一下，其实无非就是鼠标移入和鼠标移走的CSS的样式废话不多说，咱们直接上代码就完了html代码<body> <div class="abc"> <div> <button class="btn btn-1 btn-1a">hello world</button>...原创 2021-01-07 15:57:39 · 3892 阅读 · 0 评论 -
Vue 过滤器filters
1、什么是过滤器？ 说到过滤，我们生活中也经常有过滤的操作，洗菜用筛子过滤掉水，实验室做化学实验过滤掉杂质。 而开发中的过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。2.过滤器的定义过滤器分为局部和全局过滤器局部过滤器new Vue({ filters: { '过滤器名称': function (value1[,value2,...] ) { ...原创 2021-01-04 15:08:03 · 677 阅读 · 0 评论 -
vue js删除数组中指定索引的元素
在前端开发中，我们经常需要对数组进行操作，增删改是经常的事情，那我们js中该如何删除指定的下标元素呢？？？？我们用splice来操作1.定义和用法splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。数组中添加新元素：var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2,0,"Lemon","Kiwi");fruits输出结果：Banana,Orange,Le.原创 2020-12-31 11:11:57 · 14495 阅读 · 0 评论 -
Vue 当中的计算属性computed
目录1.普通写法举例2.计算属性写法举例3. computed vs methods4. computed setter 和getter5.总结计算属性关键词: computed计算属性在处理一些复杂逻辑时是很有用的。1.普通写法举例可以看下以下反转字符串的例子：<div id="app"> <h2>{{ name.split('').reverse().join('') }}</h2></div><d原创 2020-12-16 11:03:55 · 756 阅读 · 0 评论 -
Vue指令之v-bind
Vue指令之v-bindv-bind指令是专门操作属性的指令，什么是属性？例如设置图片是src，设置鼠标悬停的文本是title，还有类class等。其实元素的属性有很多中，都是写在元素的内部。那该如何设置属性呢，v-bind改如何使用呢？1.如何使用v-bind指令语法是v-bind:属性名=表达式固定写法：<img src="图片地址"/>那要设置属性就是这么写(v-bind写法)，图片的src属性的值就是...原创 2020-12-11 13:40:17 · 1164 阅读 · 0 评论 -
Vue指令之v-on
Vue指令之v-on目录Vue指令之v-on1.v-on怎么使用？2.事件名到底写什么呢？3.方法名在哪里定义呢？4.v-on的简写5.访问data中的数据,通过this关键字6.总结v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需..原创 2020-12-07 15:15:19 · 11196 阅读 · 0 评论 -
Vue指令之v-html
Vue指令之v-htmlv-html指令是设置innerHTML1.v-html该怎么使用呢？？？我们先在被vue实例挂载的标签div中，放入一个p标签，在p标签内部写入v-html指令，<p v-html="name"></p> ，那么name的值哪里来呢？这就需要在data中去定义了，对于普通的文本和v-text没有什么差异，但是对于html结构就不一样了，它就会被解析出来，如下代码：2.普通文本：...原创 2020-12-01 16:29:26 · 56567 阅读 · 0 评论 -
Vue指令v-show和v-if的区别
v-if和v-show是在前端开发中是比较常用的Vue指令，经常用来判断渲染部分代码块原创 2020-11-27 10:49:23 · 40337 阅读 · 5 评论 -
Vue指令之v-text
Vue指令之v-text目录1.v-text该怎么使用呢？？？2.插值表达式3.总结：v-text 指令一看就是和文本有关系，没错其实就是设置标签的文本值（textContent）。1.v-text该怎么使用呢？？？我们先在被vue实例挂载的标签div中，放入一个h3标签，在h3标签内部写入v-text指令，<h3 v-text="name"></h3> ，那么name的值哪里来呢？...原创 2020-11-30 13:59:30 · 5935 阅读 · 0 评论 -
Vue指令之v-if
Vue指令之v-ifv-if指令根据表达式的值的真假，切换元素的显示和隐藏，其实是在操作dom元素;v-if和js里的if差不多，也会有v-else-if和v-else，js里的if判断是用于在js语法里面的判断，v-if在vue中是对于代码块的判断； 如 <p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>当指令的判断isShow为true时，p标签则会生成，进而在页面中显示出来，反之在编...原创 2020-11-23 14:21:47 · 23075 阅读 · 0 评论 -
Vue指令之v-show
Vue指令之v-showv-show指令，根据表达式的真假来显示元素和隐藏，是响应式的v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。1.html、js 代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="...原创 2020-11-19 15:50:58 · 3230 阅读 · 0 评论