![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 64
恒二哥
不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。
展开
-
vue2与vue3生命周期学习整理
通过这些生命周期钩子函数,我们可以在不同的阶段执行相应的操作,比如在setup阶段进行组件的初始化,mounted阶段进行DOM操作,beforeUnmount阶段进行资源清理等。需要注意的是,mounted钩子函数是在实例被挂载到DOM之后被调用的,因此在这个阶段可以访问到实例的DOM元素。除了这些常用的生命周期钩子函数外,Vue2还提供了一些其他的钩子函数,如activated和deactivated,用于处理组件在keep-alive组件中的缓存和激活状态的切换。原创 2023-08-04 11:33:36 · 1162 阅读 · 0 评论 -
NVM保姆级安装配置
在项目开发过程中,使用到vue框架技术,需要安装node下载项目依赖,但经常会遇到node版本不匹配而导致无法正常下载,重新安装node却又很麻烦。为解决以上问题,nvm:一款node的版本管理工具,能够管理node的安装和使用,使用简单,可下载指定node版本和切换使用不同版本,方便了node的使用。原创 2023-08-04 11:05:39 · 383 阅读 · 0 评论 -
vue 回调函数(callback)的用法
这样结果是对的,但是改成这样并不完美,因为这么做就相当于将f()写死在writeFile()里了,如果此处我想根据不同的场景调用不同的函数还要写几个不同的writeFile(),而他们之间的区别仅仅是最后调用的那个函数不同,这里就体现callback的作用了(准确地说callback并不真的是Javascript里的关键字,只是大家都约定成俗把callback这个单词作为回调函数的默认选择)。callback 是一种特殊的函数,这个函数被作为参数传给另一个函数去调用,这样的函数就是回调函数。原创 2023-02-10 11:01:28 · 8796 阅读 · 0 评论 -
Es6常用操作
继续用刚刚取票的例子,每张排队号就是这里的value,打印票的纸是否用完就这是这里的done。用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。生成器函数也是一种函数,最直观的表现就是比普通的function多了个星号*,在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。异步调用对于我们来说是很困难的事,我们的函数并不会等待异步调用完再执行,你可能会想到用回调函数,(当然还有其他方案比如Promise比如Async/await)。原创 2023-02-08 10:29:36 · 226 阅读 · 0 评论 -
Vue中$forceUpdate()的使用
但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的.在updateName函数中,我们尝试给userInfo对象修改值,发现页面其实并没有变化。那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新。原创 2023-01-17 10:56:41 · 602 阅读 · 0 评论 -
LocalStorage/SessionStorage的用法
http://username:password@www.example.com/dir2/other.html| 同源 |相同的协议,主机,端口。| http://www.example.com:81/dir/other.html| 不同源| 相同的协议,主机,端口不同。| http://www.example.com/dir/page2.html| 同源| 相同的协议,主机,端口。|http://www.example.com/dir2/other.html| 同源| 相同的协议,主机,端口。原创 2022-12-17 09:51:22 · 270 阅读 · 0 评论 -
vue项目echarts绘制地图,实现点击地图弹窗效果(内附各个省json文件)
业务需求:点击地图上的某个市,显示市区的对应的数据信息,运用Echart插件绑定事件。注意:环境配置,需要配置node环境,安装所所依赖的包,然后运行。1、全局引入Echart插件。原创 2022-11-18 10:23:53 · 3918 阅读 · 0 评论 -
input输入框小写字母自动转换成大写字母的几种方式
2.还有一种更好的方法,加css样式进行控制处理,用到:text-transform属性,将其设置为uppercase。如果想屏蔽中文和空格:用 onkeyup=“value=value.replace(/[^\w./]/ig,‘’)”text-transform: capitalize /单词首字母转为大写/text-transform: uppercase /转为大写/text-transform: lowercase /转为小写/输入小写时,自动显示为大写,中文汉字不受影响。原创 2022-11-12 15:19:54 · 4682 阅读 · 0 评论 -
vue入门简单学习
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。原创 2022-11-08 09:09:50 · 488 阅读 · 0 评论 -
让div居中的方式的几种方法
div垂直居中的几种方式原创 2022-11-04 16:29:54 · 71618 阅读 · 5 评论 -
flex布局方法学习
① 给父容器添加display: flex/inline-flex 属性,使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式;当父元素设置为 display: flex 之后,子元素的 float,clear,vertical-align 都会失效。② 容器添加弹性布局后,仅仅是容器内容采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流;容器添加弹性布局后,显示为行级元素;: 需要添加弹性布局的父元素,被设置为 display:flex 属性的元素。容器添加弹性布局后,显示为块级元素;原创 2022-11-02 17:18:03 · 592 阅读 · 0 评论 -
css设置div水平居中方法
2、在父级div元素里设置“text-align: center”样式,在子一级div元素里设置“display: inline-block”样式。子一级元素设置属性:display: inline-block;方式:父级元素设置属性:text-align: center;1、给div元素设置“margin: 0 auto”样式;方式:元素绑定属性:margin: 0 auto;注意:方法1:常用,适用于已知父级元素宽度的情况。原创 2022-11-02 16:40:00 · 4013 阅读 · 0 评论 -
vue项目实现多张图片轮番效果
轮播图中html结构一般由主体图片、下方小圆圈、上一张和下一张组成。点击上一张和下一张按钮切换相应图片,同时小圆圈产生变化。鼠标放在图片主体上停止轮播,鼠标离开主体图片开始轮播。主体图片能够实现两秒切换一次,并且对应的小圆圈被选中。data中定义轮播的图片,显示图片的索引值,定时器。created中 进入就开始轮播。通过索引值来控制展示哪张图片。原创 2022-11-02 14:15:34 · 4618 阅读 · 4 评论 -
解决vue项目data中定义图片相对路径页面不显示的问题
补充知识:Vue在data中存入静态图片地址,使用别名引入的方法。在data中存入一组图片地址,并且循环渲染到组件上。在js中,需要使用require(‘url’)1:使用绝对路径,域名形式:https://在html中 需要在别名前面加上 ~ 符号。在项目开发中,icons的引入遇见了麻烦。webpack已经配置了别名。结果图片没有在页面上显示,图片地址没有背正确的解析。这样图片就可以成功引入了。原创 2022-10-31 21:36:01 · 1414 阅读 · 0 评论 -
多个div横向排列的几种方法
以下面这组 div 为例,group的高度由内容撑开显示结果如下为上下排列常见的有三种方法可以让div横向排列,分别是flex 弹性盒模型float 浮动和通过inline-block 行块标签弹性盒模型是最简便的方法,也是本人最喜欢用的方法,给父元素设置 display: flex;即可还可以通过属性调整子元素的水平对齐方式:当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例属性或复合属性flex相关。转载 2022-10-31 17:17:50 · 10339 阅读 · 0 评论 -
display:flex弹性盒子布局
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item)。注:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。他的属性值有:nowrapwrap他的属性值有。原创 2022-10-29 14:31:15 · 657 阅读 · 0 评论 -
nodejs安装以及环境配置步骤,以及安装yarn
1、下载nodejs进行傻瓜式安装依次选择:同意安装协议->选择安装路径->选择Node.js runtime然后继续安装即可,我安装路径为:D:\Program Files\nodejs;2、调用管理员界面,查看nodejs安装版本:输入node -v命令 ,以及查看npm版本:输入npm -v命令;3、配置环境变量3.1配置环境变量右键此电脑——属性——高级系统设置——高级——环境变量——系统变量1)然后添加,变量值名为:NODE_PATH,变量值为npm安装路径:D:\Prog原创 2022-05-18 22:53:34 · 11065 阅读 · 11 评论 -
解决vue轮翻效果数据加载后,页面无渲染效果问题
最近在做vue项目,做轮翻效果时,遇到数据从后台加载后无法渲染的问题,其中,config中data数据即为轮翻数据,align:表示显示位置,rowNum:表示轮翻显示的条数;原创 2022-10-13 10:56:16 · 2004 阅读 · 1 评论 -
vue项目运行,出现‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序或批处理文件”的错误
使用vue-cli(脚手架)创建的项目在npm run serve运行时出现“‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序或批处理文件”的报错时,大概是由于调用了未安装的包(其他相似的报错也可以使用如下解决方案)第二步: 在idea工具控制台,选择terminal,然后运行npm install -g(可简写为npm i -g)命令,重新下载依赖的node_module包文件。相似的报错例如:’ ********* '不是内部或外部命令,也不是可运行的程序或批处理文件。原创 2022-09-29 10:37:17 · 2185 阅读 · 0 评论 -
object.assign()的用法简介
二、Object.assign()对象的深拷贝,针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。2.Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。因此,它分配属性,而不仅仅是复制或定义新的属性。1.如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。一、Object.assign()对象的拷贝。原创 2022-09-23 16:11:46 · 277 阅读 · 0 评论 -
vue中子组件与父组件方法相互调用
方法2:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。方法3:父组件把方法传入子组件中,在子组件里直接调用这个方法。方法2:通过组件的$emit、$on方法;方法1:通过ref直接调用子组件的方法。原创 2022-09-21 09:07:36 · 279 阅读 · 0 评论 -
解决vue项目中引用echarts出的现“There is a chart instance already initialized on the dom.”警告的问题
判断mychar是否已经实例化,如果已经实例化过了,则不必进行多次实例化。原创 2022-09-20 22:32:43 · 1191 阅读 · 0 评论 -
echarts点击柱状图x轴或柱子实现超链接或下钻
1、需求,点击x轴坐标,触发事件,实现超链接、下钻等功能。2、将xAxis属性中的triggerEvent设置为true;3、点击x轴事件,params.value代表点击x轴获取到的值4、点击柱子事件,获取到object对象,通过object属性,判断点击哪个柱子,x轴等信息...............原创 2022-07-01 11:40:14 · 3005 阅读 · 0 评论 -
解决echarts柱状图x轴坐标文字显示不完全问题
1、项目中遇到柱状图,x轴文字过多,导致文字显示不完全,影响显示效果。2、可以给xAxis添加interval属性,以及formatter属性,具体设置如下:3、实现后得效果原创 2022-06-28 19:21:05 · 20404 阅读 · 2 评论