- 博客(62)
- 收藏
- 关注
RSS订阅
原创 动态添加class属性，给其增加css样式
<div class="cag-dialogBox" :class="{active: item === choosenItem}" @click="clickAffirm(item)" v-for="item of dataList" :key="item.agentId">active为class名，，冒号后面为判断条件。.active { border-color: #b620e0; }
2022-01-22 11:27:31
1785
原创 Vue中的生命周期
Vue的8个生命周期：beforeCreated 创建前c r e a t e d 创建后beforeMount 加载前mounted 加载后beforeUpdate 更新前Updated 更新后beforeDestory 销毁前destroyed 销毁后什么是 Vue 生命周期？Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过
2021-01-21 15:02:20
94
原创 如何完整的搭建一个项目的开发环境？
本章节主要说的是如何完整的搭建一个项目的开发环境一、安装vue脚手架首先创建一个文件夹并且在本文件夹的黑窗口(cmd命令进入)安装Vue的脚手架，使用：cnpm i -g @vue/cli 命令进行安装检查是否安装成功 ：vue --version 命令二、前端vue项目创建创建前端项目文件夹 vue create 项目名例如：vue create kigo-web三、后端...
2020-12-28 22:32:06
1177
1
原创 初始入门，从下载Node.js到修改npm全局安装路径
一、下载Node.js#**1.在浏览器地址栏输入http://nodejs.cn/ 进入node.js中文网，或者在搜索框内输入Node中文网，点击进入即可。2.点击下载按钮。3.如下图：(选择与自己电脑匹配的类型，红色箭头部分是答主自己的电脑类型)。4.如果下载之后浏览器在左下角会提醒“此类型文件可能会损害您的计算机。您仍然要保留…吗？ 点击保留即可”。如下图：5.在安装node.js中，一直点击next即可(但是记得更改默认存储路径，一般情况下，我们安装Node.js环境，程序会自动把N
2020-12-14 20:02:43
1323
5
原创 记录：如果更改外层加了class名，但是样式没有更新到页面中是什么原因?
在这里 style中不要加leng=“sass”，然后将/deep放到最前面<style scoped>/deep/ .tabPane .el-tabs__item.is-active{ color: #b417d4;}/deep/ .tabPane .el-tabs__item:hover{ color: #b417d4;}/deep/ .tabPane .el-tabs__active-bar{ background-color: #b417d4;}&l
2022-01-24 17:48:11
796
原创 elementui开始时间结束时间选择器，如何将开始时间及结束时间传递给后台
<el-form-item label="任务时间" prop="timeRange" style="margin-bottom: 15px"> <el-date-picker v-model="formData.timeRange" size="small" type="datetimerange" format="yyyy-MM-dd HH:mm" value...
2022-01-21 16:53:15
1524
原创 window.location传参方式
goeValuate(evaluateStatus){ if(evaluateStatus === 1){ //todo 更换成正确浏览器地址 window.location.replace(`${window.location.protocol}//${window.location.host}${process.env.VUE_APP_DOMAIN}/taskManage.html?evaluateId=${this.evaluateId}&o...
2022-01-21 16:12:09
1942
原创 父组件如何调用子组件中的方法？
父组件代码，假如父组件要关闭弹窗时候，需要做一系列操作，例如关闭弹窗时需要将子组件中的内容恢复成原来的样子，那么该如何调用呢？1、首先应该在子组件上面加一个ref，例如：ref=“child”， <el-dialog title="【细菌列表】" :visible.sync="bacteriaDialog" element-loading-text="正在加载" @closed="closedDialog" &g
2021-09-27 10:03:30
16592
3
原创 去除两个数组相同项
let arr = [{ id: 1, name: ‘zs’ }, { id: 2, name: ‘ls’ }, { id: 3, name: ‘ww’ }, { id: 4, name: ‘xm’ }, { id: 5, name: ‘xh’ },]let sum = [3, 4, 5]let date = arr.filter(item => sum.indexOf(item.id) > -1)console.log(‘date’, date)// 0: {id: 3, name:
2021-08-12 08:51:21
504
转载 js中|| 和&&。
1、&&和||属于逻辑运算符。关于&&和||的表达式的运算规则是这样的：表达式1 || 表达式2，只要任意表达式为true，则整个表达式的运算结果为true。表达式1 && 表达式2，只有所有表达式都为true，则整个表达式的运算结果才为true。根据集合的补集的思想，只要任意表达式为false，则整个表达式的运算结果为false。2、&&和||的短路运算，是指如果在进行前面的表达式的运算过程，通过判断已经明确的知道整个表达式的结果，那么
2021-07-06 09:40:34
406
原创 同一个表单中，如何可以让其中一个输入框的值自动计算等于其他输入框值之和？
实际场景：需要用到vue中computed计算属性首先在data中声明三个变量分别代表输入框中的这几个数据1、【 这是data中声明的变量 totalPopulation: undefined, // 总人口 placementShift: '', // 水深小于等于0.5m及非淹没区就地安置人口 placementMax: '', // 水深大于0.5m就地安置人口 placementSmall: ''// 水深大于0.5m转移
2021-07-02 10:12:32
1630
原创 如果Git克隆代码的时候出现错误该如何处理？可能是没有设置用户名和邮箱导致（个人记录）
1.用户名和邮箱地址的作用用户名和邮箱地址是本地git客户端的一个变量，不随git库而改变。每次commit都会用用户名和邮箱纪录。github的contributions统计就是按邮箱来统计的。修改密码git config --global credential.helper store (输入这个命令后,以后只要在输入一次用户名密码)查看用户名和邮箱地址：$ git config user.name$ git config user.email修改用户名和邮箱地址：$ git co
2021-06-08 14:37:04
353
原创 vue中父子组件的传值(父传子、子传父)
首先需要给两个页面配置路由，配置结束后如下： { path: '/', name: 'Father', component:()=>import('@/views/admin/Father.vue'), }, { path: '/son', name: 'Son', component:()=>import('@/views/admin/Son.vue'), },父组件：<template> <div&
2021-05-31 22:17:59
130
原创 forEach遍历数组的两种用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title></head><body> <script>
2021-05-25 18:04:33
535
原创 页面间跳转时的路由传参（可观察url地址栏变化）
页面跳转时，携带参数传递过去，让被跳转的页面能获取到传参页面所传递的数据。传参页面：跳转时通过query发送数据datasend(){ this.$router.push(path:"/跳转的路由地址",query:{data:发送的数据})}send()是一个方法，例如是一个click方法，点击时通过this.$router.push进行跳转，其中path表示的是跳转的路由地址，query中则是需要携带的数据。接收页面：接收传参页面，跳转过来之后query里的数据data。getQue
2021-05-25 15:40:29
474
原创 element-ui Dialog 对话框组件 :visible.sync 的作用
//这个是element-ui组件库提供的对话框插件。:visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。原文链接：h
2021-05-12 20:15:20
4815
原创 后端返回来数据，如何让最后一个盒子没有下边框？
v-for="(item,index) in newmyTask :class="index===newmyTask.length-1&&'noline'".noline{ border-bottom:none;}newmyTask是后端返回来的数据数组，noline表示样式问题。
2021-05-11 21:45:05
423
原创 几个样式的时候，如何使用三元(目)运算符嵌套实现？
嵌套如下t.str == "1" ? "11" : (t.str == "22" ? "22" : "33"); 案例如下
2021-05-11 21:00:17
247
转载 div禁用，不可点击。
div禁用——添加样式style={pointer-events: none;}1、根据当前项目的场景，在特定条件下时，该div禁用，不可点击，先在HTML内给此标签新加一个类名2、写好不可点击的样式3、在特定逻辑下，加入新类名$(".原类名").addClass(“新类名”);...
2021-05-11 20:45:42
1884
原创 实现效果：一个组件中三个相同的盒子，要点击其中一个盒子改变其背景色，点击另一个盒子改变另一个盒子背景色
非常笨的一种方法哈，大家如果有好的方法，叫一下博主，我也去学习。<template> <div> <div class="one" @click="changeColorOne"></div> <div class="two" @click="changeColorTwo"></div> <div class="three" @click="changeColorThree"></div&
2021-05-08 18:26:16
1214
原创 同一组件中 两个单选radio控制一个div显示与隐藏 代码实现
实现功能如下，点击否显示div，点击是切换div代码如下：<template> <!-- 实现点击是隐藏div 点击否显示div效果 --> <div> <!-- 给两个单选按钮加上change改变事件 --> <el-radio v-model="radio" label="1" @change="changeColor">是</el-radio> <el-radio v-model="
2021-05-08 17:47:44
934
原创 动态计算长度宽度值
用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 “+”, “-”, “*”, “/” 运算；calc()函数使用标准的数学运算优先级规则；height:calc(100% - 424rpx)...
2021-04-27 13:56:14
206
原创 css中position定位有哪些属性，分别代表什么意思？
CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。◆position:static 无定位该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。◆position:absolute 绝对定位使用position:absolute，能够很准确的将元素移动到你想要的位置，◆posi
2021-04-19 17:49:00
1225
原创 img元素的alt和title有什么异同，选出正确的说法？
alt和title同时设置的时候，alt作为图片的替代文字出现，title是悬停在图片上的解释文字。
2021-04-19 17:47:20
1064
原创 css属性overflow属性定义溢出元素内容区的内容会如何处理，有哪些参数？分别代表什么？
css属性overflow属性定义溢出元素内容区的内容会如何处理，有哪些参数？分别代表什么？参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。...
2021-04-19 17:45:46
623
原创 看同事代码，他是引入的element组件，但是如果需要更改一部分样式的时候，怎么做？
引入组件需要更改样式 找到其有clsss名（不是element给的名字）的父级，然后使用其名字，加/deep/ 加上element的名字，来更改样式，例如：.three /deep/ .el-tabs-_item{ 样式代码 }，样式代码例如（margin-top:5px）如果有其他地方也用到同样的样式，但是这里不需要修改，那么可以给其他的地方的div增加一个class名字(例如为four)，然后使用.four /deep/ .el-tabs-_item{ margin-top:5px !important
2021-04-13 19:02:21
207
原创 error compiling template但编辑器内未报错，处理步骤。
1.首先寻找自己所引入的组件当中，例如用到了某个方法，而自己没有把方法写上。2.寻找自己所引入的代码当中是否有重复的代码，可能是复制的时候多复制一行而导致的3.寻找是否有空格所导致的error compiling template 报错，可能是多了空格。...
2021-04-13 10:41:15
928
原创 如果需要第一个div是高度自适应，第二个div随着第一个div的高度增加而自己也增加的做法。
假如第一个div要高度自适应，随着元素的增加而变高，第二个div也随之变高，我们首先应该将第二个div的高度赋值给第一个div，例如：document.getElementById(‘myTask’).style.height = document.getElementById(‘medi’).clientHeight 在这需要注意一个问题，假如元素的.style.height获取不到或者是underfined可以使用client.height或者offsetHeight来获取他的高度。将高度赋值完之后，
2021-04-12 09:52:48
635
原创 如果后端返回来的数据与你要在页面上展示的数据（例如echarts的数据）不一样，转换后即可赋值。
假设后端返回来的数据是与你想展示的数据不一致，那就将返回来额的数据按照echarts的可以展示的value值来转换。
2021-04-08 17:56:41
430
原创 项目中如何引入element-ui与vant-ui以及如何将axios进行全局注册？
在vue的main.js文件中这样配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'//这里是引入vantimport Vant from 'vant';import 'vant/lib/index.css';//这里是引入的element-uiimport ElementUI from 'element-ui';import
2021-03-17 19:48:10
134
原创 描述 Vue 组件生命周期
挂载阶段:beforeCreate:此阶段为实例初始化之后,此时数据观察和事件机制还没有形成,不能获取到dom节点；created：此阶段的vue实例已经创建,仍不能获取DOM 节点.把vue 的一个实例给初始化了，只是存在于 js 内存的一个变量而已，这个时候并没有开始渲染；beforeMount:在这一阶段,我们虽然还不能获取到具体 DOM 元素,但 vue 挂载的根节点已经创建,下面 vue 对DOM 的操作将围绕这个根元素继续进行,beforeMount 这个阶段是过渡性的,一般一个项目只能用到
2021-03-08 21:43:50
252
原创 computer与watch的区别？
Computed 本质是一个具备缓存的 watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。Watch 没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开 deep：true 选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用 unWatch 手动注销哦。
2021-03-02 22:29:44
1637
原创 接口请求一般放在哪个生命周期中？
接口请求一般放在 mounted 中，但需要注意的是服务端渲染时不支持 mounted，需要放到 created 中。本文转载于Boss直聘 陈大鱼头
2021-03-02 22:26:32
1998
原创 说一说vue的生命周期？
beforeCreate 是 new Vue()之后触发的第一个钩子，在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。created 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发 updated 函数。可以做一些初始数据的获取，在当前阶段无法与 Dom 进行交互，如果非要想，可以通过 vm.$nextTick 来访问 Dom。beforeMount 发生在挂载之前，在这之前 template
2021-03-02 22:24:35
110
原创 数组的基本方法（增，删，改，查，截，拼，排，转）
<script> function wo(){ console.log('1111') } console.log(222) wo() //将字符串a-b-b转化为数组 // splice let str = 'a-b-b' let arr = str.split('-') console.log(arr) let newarr=[4,5,1,2,3,4] //unshift前增 arr.unshift('c') console.lo
2021-02-28 18:23:08
149
原创 如何使用css画出一个倒立的三角形？
.nabla{ //这个浮动是答主为了跟前面的div在一片显示设置的，与画三角无关 float: left; //画三角把这个div的宽高都设置为0，假如你要画的是朝下的三角，那么你就把border-top 设置颜色，然后将其他三个方向设置为透明就可以了。 width: 0px; height: 0px; border-top:200px solid crimson; border-bottom: 200px solid transparent; bord..
2021-02-28 17:38:13
914
原创 axios的用法？
1.首先安装axios，在项目的命令行窗口执行cnpm i axios --save 命令2.在项目的src文件夹中的main.js中引入axios，并且使用，配置好之后如果某个组件中需要使用到axios，直接this.$axios就可以。3.axios的使用...
2021-02-23 20:23:16
93
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人