gavincz-CSDN博客

原创循环中请谨慎使用逻辑判断：在for循环中立个flag！并在if...else...语句中小心处理或且非

这两天，在项目中遇到一个实际问题，因为自己的逻辑判断没处理好，花费了我2天的时间处理这个 bug ，因此，在这里记录下，以免以后在犯这样的傻问题：问题描述：业务场景：在一个for循环的表格中，每一行都有一个 select 的下拉框，而这些下拉框 options 的数据，是异步从后端获取的同一份数据，且这份数据有且只有一份（这是重点，即共用一份 options 数据），业务要求是：1.每...

2019-11-27 15:03:50 1468

原创再谈 Vue 中使用 keep-alive ：结合 activated & include & vuex & 路由的 beforeEach 动态缓存

上次写了一篇关于Vue中使用 keep-alive 的文章，现在看来，只能说是一篇针对 keep-alive 最简单用法的介绍，但往往，这样的用法不能满足实际的需求，因此，结合这次项目开发，我们再来谈谈如何利用 keep-alive 做到动态缓存：项目需求：在项目的众多页面中，有一个 a 页面，同时 a 页面，包含 b、c、d 三个子页面，需求是：1.当且仅当用户从 e 页面导航到 ...

2019-12-17 11:51:04 811

原创 Vue keep-alive的使用

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。结合router，缓存部分...

2019-11-09 10:35:25 282

原创 javascript面向对象编程

本文将用一个例子来演示：启动和停止一个动画，用以说明面向对象的概念：传统编程：//定义函数/方法,然后调用function startAnimation(){ ...}function stopAnimation(){ ...}startAnimation()stopAnimation()这么做很简单，但你无法创建可以保存状态并且具有一些仅对其内部状...

2019-10-28 13:38:17 162

转载 vue 动态循环出的多个select 不能重复选择相同的数据（转）

转自https://blog.csdn.net/qq_43526066/article/details/92810962先看效果图：代码如下：<template> <div class="program" v-for="(parItem,index) in parArr" :key="parItem.guid"> <Select v-mo...

2019-10-16 14:39:26 2864 2

原创玩 Lin UI 搞小程序之：用步骤条组件做个时间简史

先说引入：考虑到小程序的大小限制，我是按需引的，操作如下：直接通过git下载 Lin UI 源代码，并将 dist 目录（Lin-UI 组件库）拷贝到自己的项目中。git clone https://github.com/TaleLin/lin-ui.git...

2019-07-19 17:19:59 2266

原创你必须记住的Javascript知识：数组截取之 slice() 方法

slice() 方法：slice() 方法，能够基于当前数组中的一或多个项创建一个新数组。slice() 方法接受一或两个参数：即要返回项的起始和结束位置。当只有一个参数时，slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项；如果有两个参数，该方法返回起始和结束位置之间的项，但，不包括结束位置的项；slice() 方法不会影响原始数组。var color...

2019-07-09 18:40:24 1909

原创你必须记住的Javascript知识：巧用数组的length属性

数组的 length 属性数组的 length 属性很有特点——它不只是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或者向数组中添加新项。先来看一个列子：var colors = ['red','blue','green'];colors.length = 2;alert(colors[2]); //undefined如上，如果将其 length 属性设置为数组...

2019-07-08 19:14:38 1258

原创你必须记住的Javascript知识：布尔操作符之——逻辑与

布尔操作符：布尔操作符一共有3个：非(NOT)、与(AND)、或(OR)。1.逻辑与：逻辑与操作符由2个和号 ( && ) 表示，有两个操作数，如下图所示：第一个操作数第二个操作数结果 true true true true false false false true false fal...

2019-05-29 19:23:12 358

原创你必须记住的Javascript知识：布尔操作符之——逻辑非

布尔操作符：布尔操作符一共有3个：非(NOT)、与(AND)、或(OR)。1.逻辑非：逻辑非操作符由一个叹号( ! )表示，可以应用于 ECMAScript 中的任何值。无论这个值是什么数据类型，这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值，然后再对其求反！即，它遵循以下规则：如果操作数是一个对象，返回 false ；如果操作数是一个空字...

2019-05-28 19:49:49 816

原创你必须记住的Javascript知识：一元操作符之——递增和递减操作符的适用原则

适用原则：无论是前置型还是后置型递增/递减操作符，对任何值都适用，即它们不仅适用于整数，还可以用于字符串、布尔值、浮点数值和对象！在应用于不同的值时，它们遵循以下规则：1、在应用于一个包含有效数字字符的字符串时，先将其转换为数字值，再执行加减1的操作。字符串变量转变成数值变量。如：var str1 = '120';var str2 = '-120';str1++;s...

2019-05-28 18:40:06 155

原创你必须记住的Javascript知识：一元操作符之——递增和递减操作符

一元操作符只能操作一个值的操作符叫做一元操作符。1.1递增和递减操作符递增和递减操作符直接借鉴自C，有两个版本：前置型和后置型。前置型：位于要操作的变量之前；后置型：位于要操作的变量之后；前置型：我们先来看一个例子：var age = 30;++age; //前置型递增操作符alert(age); //31它等同于：var age = 30;...

2019-05-22 23:11:56 515

原创你必须记住的Javascript知识：转换为字符串之——toString()方法

toString()方法：除了 null 和 undefined 这两个值以外，数值、布尔值、对象和字符串都有 toString() 方法。没错，每个字符串也都有一个toString()方法，该方法返回字符串的一个副本。多数情况下，调用toString()方法不必传递参数。但是，在调用数值的toString()方法时，可以传递一个参数：输出数值的基数。如：var num ...

2019-05-20 22:54:14 1226

原创你必须记住的javascript知识：转型函数——Boolean()

转型函数：Boolean( )在ECMAScript中，所有类型的值都有与布尔类型（Boolean）的两个值等价的值。要将一个值转换为其对应的Boolean值，可以调用转型函数Boolean( )。如：var message = 'Hello World!';var messageAsBoolean = Boolean(message); alert(messageAsBo...

2019-05-19 18:20:30 332

原创 CSS：好玩的‘伪类’系列之——(:read-write与:read-only)

:read-write定义：当一个元素（例如可输入文本的 input元素）可以被用户编辑时，修改样式。触发条件：当一个元素是可编辑元素时，可以修改其样式兼容：IE不支持:read-only定义：当一个可编辑元素（例如可输入文本的 input元素）不可被用户编辑，即只读时（具有readonly属性时），修改样式。触发条件：只针对当一个可编辑元素被赋予readonly（只读）属...

2019-04-30 17:21:45 420

原创 CSS：好玩的‘伪类’系列之——(:optional)

:optional定义：指任意没有required属性的 <input>，<select> 或 <textarea> 元素，修改其样式。触发条件：只针对没有required属性的 <input>，<select> 或 <textarea> 元素，修改样式兼容：IE10以下、Opera10以下不支持举个栗子...

2019-04-30 16:17:52 483

原创 CSS：好玩的‘伪类’系列之——(:only-child与:only-of-type)

:only-child官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式:only-of-type官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式注意：在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...

2019-04-30 15:23:05 1140 2

原创 CSS：好玩的‘伪类’系列之——(:nth-last-child与:nth-last-of-type)

之前写系列时漏掉了，这个很简单，容易理解，话不多说，直接看吧:nth-last-child定义：匹配当前元素及与之相同的所有兄弟元素（从后往前），修改其样式。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处。触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇...

2019-04-30 13:49:49 901

原创 CSS：好玩的‘伪类’系列之——(:nth-of-type()、:first-of-type和:last-of-type)

:nth-of-type()定义：在拥有同一父元素的情况下（前提），匹配一组相同的兄弟元素，修改其样式触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式兼容：IE8及8以下不支持Opera9.5以下不支...

2019-04-30 11:59:27 1217

原创 CSS：好玩的‘伪类’系列之——(:nth‐child()、:first‐child和:last‐child)

:nth‐child()定义：匹配当前元素及与之相同的所有兄弟元素，修改其样式触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式兼容：IE8及8以下不支持Opera9.5以下不支持:first‐ch...

2019-04-30 10:52:58 242

原创 CSS：好玩的‘伪类’系列之——(:required)

:required定义：指选择器在表单元素是必填项时设置指定样式。只适用于表单元素: input, select 和 textarea。触发条件：当设置表单元素为必填项时，修改样式兼容:IE10、Opera10以下不支持举个栗子html代码：<form> <label for="url_input">非必填项:</label> ...

2019-04-29 17:13:36 791

原创 CSS：好玩的‘伪类’系列之——(:valid和:invalid)

:valid定义：针对任意内容通过验证的 <input> 或其他 <form> 元素，修改样式触发条件：当用户输入的值通过验证（有效）时，修改其样式兼容：IE11以下不支持Edge12以下不支持:invalid定义：针对任意内容未通过验证的 <input> 或其他 <form> 元素，修改样式触发条件：当用户输入的值未通过验...

2019-04-29 16:17:26 2636

原创 CSS：好玩的‘伪类’系列之——(:empty)

:empty定义：只针对没有子元素的元素进行样式修改。(子元素可以是元素节点或文本、空格；注释或处理指令都不会产生影响)。触发条件：当当前元素不存在任何子元素（DOM节点）及空格时，可以使用:empty修改其自身样式。兼容：IE8及8以下不支持Opera9.5以下不支持举个栗子html代码： <div></div><!-- 我没有子节点（...

2019-04-29 14:23:45 933

原创 CSS：好玩的‘伪类’系列之——(:target)

:target定义：指一个唯一的页面元素(目标元素)，其id与当前URL片段匹配。一般结合锚点链接使用触发条件：当当前页面存在被指定的目标元素时，可修改目标元素的样式兼容：IE8及8以下不支持、Opera9.5以下不支持举个栗子html代码： <div style='width:50%;margin:0 auto'> <h3>目录<...

2019-04-29 11:29:28 1284 1

原创 CSS：好玩的‘伪类’系列之——(:in-range与:out-of-range)

:in-range定义：针对一个 <input> 元素type=number，如果其当前值处于属性min 和max 限定的范围之内，修改样式.触发条件：只有在该元素指定了取值范围，并且元素值处于指定范围内时才有效兼容：IE不支持:out-of-range定义：针对一个 <input> 元素type=number，如果其当前值超出属性min 和max 限定...

2019-04-29 10:42:25 477

原创 CSS：好玩的‘伪类’系列之——(:enabled)

:enabled定义：用来修改任何处于启用状态的元素的样式。触发条件：如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。一般用在input元素的radio、checkbox属性和select元素下的option子元素以及button元素中。兼容：Opera8及8以下 IE8及8以下不支持举个栗子html代码： <p>启用...

2019-04-29 09:52:57 428

原创 CSS：好玩的‘伪类’系列之——(:disabled)

:disabled定义：用来修改任何被禁用的元素的样式。触发条件：如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。一般用在input元素的radio、checkbox属性和select元素下的option子元素以及button元素中。兼容：Opera8及8以下 IE8及8以下不支持举个栗子html代码： <p> ...

2019-04-26 17:07:24 1414

原创 CSS：好玩的‘伪类’系列之——(:checked)

:checked定义：用来修改任何处于选中状态的HTML元素的样式，一般用在input元素的radio、checkbox属性和select元素下的option子元素中触发条件：当元素的可选项中存在已被选中的情况，修改这些被选中的样式兼容：基本全兼容举个栗子html代码：...

2019-04-26 14:58:34 1274

原创 CSS：好玩的‘伪类’系列之——(:link、:visited、:hover、:active )

:link定义：用来选中所有尚未访问的链接添加样式。触发条件：用来规定当连接未被选中时（初始状态）的样式兼容：全部兼容:visited定义：用来选中所有已被访问的链接添加样式。触发条件：当链接已被访问时（最终状态）的样式兼容：全部兼容:hover定义：当鼠标悬停在当前元素上时需要添加的样式触发条件：当鼠标悬停在当前链接上时（浮于元素上方）的样式兼容...

2019-04-26 12:20:40 526

原创 CSS：好玩的‘伪类’系列之——(:focus)

:focus定义：获得焦点的元素，一般用于表单（input、textarea）；触发条件：当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发兼容：Opera7以下及 IE8以下不兼容举个栗子：html代码： <p><input type="text" name=""></p> <p><input...

2019-04-26 11:01:05 1150

原创 commonjs规范

commonjs即模块化，需要理解的有2个主要的地方：1.module.exports2.require()我们一般用module.exports开放模块，在需要引入的地方用require()引入这个模块。举例说明：新建dog.js文件，并写入以下代码：let dog = { name:'大黄', id:9527, dosomething:f...

2019-04-03 12:05:13 189

原创 vuex--学习笔记（三）模板获取Mutations及mapMutations传参

前言：本文主要用于帮助笔者和新人理解vuex的使用，因个人能力有限，有什么建议可以留言一起探讨。接上文：vuex--学习笔记（二）在组件中如何获取vuex的state对象中的属性我们知道，在vuex中mutations是专门用来修改state中属性状态的方法集合（对象），同时，我们也了解到，在组件中可以使用$store.commit(‘方法名’，传参)来提交修改请求。这种方法比较简单。下面我们再看...

2018-07-15 13:37:02 30756 4

原创 vuex--学习笔记（二）在组件中如何获取vuex的state对象中的属性

前言：本文主要用于帮助笔者和新人理解vuex的使用，因个人能力有限，有什么建议可以留言一起探讨。这里，我首先想说明的是：一切都是语法糖，如果在实际应用中，你有什么地方不太了解，那只是对某个语法糖不太了解而已！因此，要多看，多学，最重要的，是多实践！自己多敲几遍代码，也就熟悉了。接上文：vuex--学习笔记（一）初识在上文中，我们实际上已经接触过一种在组件中获取vuex的state对象中属性的方法，...

2018-07-15 01:33:44 86578 5

原创 vuex--学习笔记（一）初识

vuex就是一个前端的公共仓库（状态管理工具），用于平行组件间的通信（传值，双向数据绑定），使用方法如下：安装：根目录下命令窗口输入： npm install vuex --save在src下新建文件夹store（也有用vuex的，名字随便起，只要你知道是这个文件夹是干什么的就行），在store文件夹下新建index.js文件（也有在vuex文件夹下新建store.js的，这个同上，你喜欢就好），...

2018-07-14 23:40:09 4717 2

原创 vue父子传值之props

单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。以上文字来自 Vue官网今天总结了下Vue实例中props属性的一些常用方法，主要是帮助自己和新人梳理思路，以便在项目和工作中更好的应用这个属性，因能力有限，有什么到不到的地方，...

2018-07-13 23:30:53 35078

原创学习笔记-webpack安装及环境搭建

最好基于[email protected]以上版本安装：使用webpack的优点：webpack使用commonJS标准编写的模块可以直接打包运行在浏览器上browerwebpack安装：window+r --> cmdnpm install webpack-cli -gnpm install webpack -gcd到项目目录：npm install webpack -D或者npm install --...

2018-04-19 23:57:06 214

原创关于用window操作系统使用nodeJS安装gulp时出现失败及报错的问题解决方法

作为一名前端，在工作中不免会安装使用gulp,大家都知道，要使用gulp，必须依赖于nodeJS环境。因此，在此之前，首先要安装nodeJS。一般来说，正常安装（尤其是新装nodeJS）是不会出现报错的（当然由于众所周知的原因，npm在国内不太稳定，但是大家可以安装cnpm，这个很简单，网上的教程/资源也很多，这里不再赘述）。情况描述：本人电脑是一台操作系统为win-7-64位的笔记本问题：gul...

2018-03-28 20:12:56 2626

原创学习笔记--gulp安装及配置

安装nodejs：说明：gulp是基于nodeJS，理所当然需要安装nodeJS; 安装：打开nodeJS官网https://nodejs.org/cn/，点击硕大的绿色下载按钮，它会根据系统信息选择对应版本（.msi文件）。第一步：配置环境变量：注：安装完成之后注意将其配置到环境变量（系统变量路径中），这样你就可以在全局范围内去使用它了我的路径是在c：\ Program Files ...

2018-03-27 09:59:27 810

原创学习笔记--SASS编程基础（四）—Partials @import

CSS 本身包含一个指令@import，但是 CSS 中的@import 每次执行都会发送一次新的请求，都会消耗一定的资源SASS 中扩展了这个指令，会将包含的编译成一个 css 文件，切割成小的部分（Partials）包含进来进行处理（类似JavaScript 的 “回调函数”）。Partials 是用来定义公共样式或者组件的样式的，专门用于被其他的 scss 文件 import进行使用的。Pa...

2018-03-26 21:02:42 645

原创学习笔记--SASS编程基础（三）继承扩展—extend

在 SASS 中，通过继承/扩展—@extend来减少重复代码，可以让一个选择器去继承另一个选择中所有的样式。继承某个样式的同时，也会继承样式的扩展。sass中编译：css样式：...

2018-03-26 20:49:40 160

空空如也

空空如也