vue.js
笑到世界都狼狈
我来到这个世上,就没打算活着回去
展开
-
vue文件下载
首先说明一下,在文件下载这边踩了个坑,花了好长时间才解决!就是后台给的接口返回的是一个二进制文件流,但是前端请求返回的结果将二进制文件流改成了字符串,所以导致下载一直不成功。这个方法是一个现成的下载组件,使用之前要先安装,在导入,然后跟方法二一样,接口调用成功后,调用方法fileDownload即可。如果你遇到文件下载不成功,且有使用mock.js的话,赶紧长点心,不然真的累死都不知道为啥一直下载不成功。接下来开始步入正题,我下面零零碎碎有好几种下载下载方法,大家可以根据自己的意愿选择下载方法。原创 2023-03-15 20:00:00 · 2064 阅读 · 0 评论 -
vue点击按钮时,新增或删除一行表单元素
在项目开发中,有这样一个需求,点击按钮时,新增一行input文本框,且文本框后面有删除操作,点击删除还可以删除当前行。以上就简单的实现了一个前端的假新增删除操作。原创 2023-02-07 10:19:29 · 4954 阅读 · 0 评论 -
vue中子组件调用父组件方法
vue中子组件如何调用父组件的方法。1.使用parent调用。2.使用emit调用。原创 2023-02-06 15:41:21 · 595 阅读 · 0 评论 -
vue中使用v-for遍历v-model
从以上例子可以看出,我们遍历了key,label,value,在需要遍历的前面都有加上冒号“:”,所以在v-model的遍历中,需要注意的是,v-model前面不需要加冒号“:”。按照平时开发喜欢,页面中的每一个v-model都会在页面data中有一个对应的变量。那么遍历的v-model要怎样对应到data中进行表单提交呢?其实只要在data中声明一个变量,表单修改后,数据会自动更新到变量中去。原创 2023-02-06 15:03:01 · 1861 阅读 · 0 评论 -
vue-element-admin项目中,icon、svg图标的使用
在vue-element-admin中使用svg图片,下载svg图片,文件夹中查看svg图片原创 2023-02-06 14:09:57 · 4096 阅读 · 0 评论 -
vue实现路由跳转页面
vue跳转路由的方法有很多,我的项目中一遍用到以下几张方法,对此进行总结,方便下次在用的时候可以直接过来复制粘贴用。当然应该还有很多跳转方式,我这边只是总结了我项目中用到的跳转方法,后期应该会查缺补漏。3.可以通过点击事件,在js代码里实现跳转。1.点击文字,直接跳转页面。2.点击图标按钮跳转页面。原创 2023-02-03 17:14:41 · 1864 阅读 · 0 评论 -
vue中使用类似html中a标签的锚链接,实现点击定位到当前页面的某个位置
vue中使用类似html中a标签的锚链接,实现点击定位到当前页面的某个位置翻译 2022-07-02 20:16:57 · 3038 阅读 · 0 评论 -
vue/js实现点击按钮复制的功能
项目预研中,有一个点击复制按钮,实现复制的功能,百度找到了复制的方法,蛮好用的,就收藏起来,方便以后用到的时候可以直接可查看1.vue写法,我是写在element-ui的表格中的,在表格行中点击复制按钮,复制表格中的某一列信息代码结果如下:主要代码:{ label: '复制', click: this.handleCopy },// 复制handleCopy(row) { console.log('row', JSON.parse(JSON.stringify(row)))翻译 2022-03-18 20:05:28 · 1799 阅读 · 0 评论 -
vue el-input中禁止输入表情符号
项目中测试提出问题,在Input输入框中输入表情后,后台会报错,于是想着在前端输入的时候禁止输入表情,或者点击win10输入法后面的表情时,禁止输入表情在网上看到一些方法,参考地址,可以实现实现输入的时候不能输入表情,但是鼠标点击win10输入框后面的表情时,还是能输入的。所以我对以上方法做了一点改造,实现了我想要的效果,如下图所示...翻译 2022-03-18 19:52:59 · 4723 阅读 · 2 评论 -
vue设置v-for遍历,默认选中第一个样式,点击切换时,样式选中一起发生变化
1.标签中添加:class属性和click事件:<div v-for="(item,index) in serverInfoList" :key="index" :class="active==index ? 'activeClass' : ' ' "> <span>{{ item.devId }}</span> <span @click="rowClick(index,$event)">{{ item.devName }}</s转载 2021-08-30 15:54:22 · 5362 阅读 · 4 评论 -
vue click事件传递索引index。传递index后event报错,,,,event.currentTarget
首先,对于vue菜鸟及的选中来说,我写了click事件,打印了当前点击的节点信息,是没有任何错误的。但是后面有需求,要传递索引,,,,然后我在参数里在加了一个index,然后event.currentTarget就开始报错了。。。。。。 找百度查看了一番,大概意思是,click本身就自带默认的event事件,所以我在不带参数的时候,打印event事件是没什么问题的,代码如下图所示: 但是接下来,我需要传递一个索引,来控制选中的样式。按照正常的思路,我...翻译 2021-08-30 14:21:11 · 3108 阅读 · 4 评论 -
Error in nextTick: “TypeError: Cannot read property ‘execRowDataApi‘ of undefined
我在写vue项目的时候,点击按钮,会报错Error in nextTick: "TypeError: Cannot read property 'execRowDataApi' of undefined如下图所示:解决方法:加上if判断,先判断是否存在,如果存在执行,否则不执行reloadTable() { this.$nextTick(() => { console.log(999) if (this.$refs.r...翻译 2021-08-04 19:33:34 · 540 阅读 · 0 评论 -
vue组件通信。prop,ref,emit的用法与区别
文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言相信对于很多vue初学者来说,看到组件通信这块的时候,跟我一样懵逼,完全摸不清啥是啥,搞到最后,连父子组件都区分不清了。 下面这篇文章就是我对vue父子组件通信的研究,写的比较啰嗦,但是,对于一个初学者来说,不啰嗦一点,下次忘记了在看,可能又看不懂了。一、prop、ref、emit的区别我这边对以上三点的区别做一些我...翻译 2021-08-01 23:44:50 · 2070 阅读 · 0 评论 -
vue的第一个页面,组件的使用
了解完vue项目的目录结构之后,我们就要开始在里面写代码了,刚开始起步阶段,就在项目里改改,实现一个简单的,小小的demo1.首先新建组件HelloWorld.vue代码如下:<template> <div> <h1>欢迎来到我的第一个vue:{{ msg }}</h1> </div></template> <script>export default { name: 'HelloWo原创 2021-07-18 19:54:56 · 830 阅读 · 0 评论 -
vue目录结构
在完成了一系列安裝等操作之后,接下来最重要的就是了解项目目录结构,打开我们新建的vue项目,可以看到如下目录:目录解析:具体,请参考:https://www.runoob.com/vue2/vue-directory-structure.html...原创 2021-07-18 18:02:29 · 96 阅读 · 0 评论 -
vue.js下载依赖包node_modules
当然,在很多时候,我们要拷贝或上传一份vue的代码时,通常会删掉依赖包node_modules,因为这个包太大了,而且,我们运行项目的时候,如果没有依赖包,重新下载依赖包就可以了,很方便的,接下来给大家介绍介绍具体步骤:首先我要把项目中的依赖包删掉可以看到,现在文件夹里已经没有node_modules了。2.接下来输入命令行:npm install加载依赖包node_modules,如下所示:等npm install运行结束后,依赖包就已经下载好了,如下图...原创 2021-07-18 15:36:49 · 16996 阅读 · 2 评论 -
npm run dev后,浏览器不会自动打开
首先,我在vue中使用npm run dev运行项目结果如下:看效果是运行成功了,但是浏览器不会自动打开,需要我复制粘贴自己去打开浏览器,所以百度了一下,找到了解决方法:需要修改:config-->index.js-->autoOpenBrowser为true,然后重新运行代码即可: autoOpenBrowser:true感谢大佬分享:https://blog.csdn.net/Bright2017/art...翻译 2021-07-18 15:20:53 · 2899 阅读 · 7 评论 -
使用npm run dev运行vue.js项目
我们上一篇文章刚刚讲述了vue.js项目的创建,有兴趣的小伙伴可以去看看:https://blog.csdn.net/qq_36509946/article/details/118862929接下来这篇文章,来讲述一下vue.js的运行: 使用vsCode或者webStrom运行,其实,很简单,只要输入命令:npm run dev即可; 当然,你要确保你当前操作是在你项目文件的目录下,否则需要输入命令:cd my-project来找打当前目录文件,其中my-projec...原创 2021-07-18 15:16:24 · 3700 阅读 · 0 评论 -
cnpm install --global vue-cli安装时报错
在安装cnpm install --global vue-cli时,提示:cnpm : 无法加载文件 C:\Users\zxb\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细 信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + cnpm -v + ~~~~ + CategoryInfo 效果如下:...翻译 2021-07-17 23:09:40 · 1021 阅读 · 0 评论 -
使用npm创建第一个vue.js
在这里分享一下第一次使用npm搭建vue.js项目的总结。本人菜鸟级别,刚接触vue,所有的过程都是参考菜鸟教程一步一步来的,如果有不对的地方,希望各位大佬指出。首先在搭建项目之前,如果你连npm,nodejs等都没有安装,那么请看我另一篇文章,因为环境都没有搭建好,是不可以完成本篇文章的内容的:https://blog.csdn.net/qq_36509946/article/details/118682352接下来,开始安装vue,首先参考菜鸟教程...原创 2021-07-17 22:58:46 · 573 阅读 · 3 评论 -
安装npm淘宝镜像踩的坑
作为一名菜鸟级别的选手,搭建vue.js时,淘宝镜像安装一直报错,我真的感觉头皮发麻,要裂开了的感觉。遇到的第(1)个问题是:提示未安装python,安装python3又提示找不到python2,然后又安装了python2;//////////////////////////所以,这里一定要安装python2//////////////////////////// 下载地址<页面加载比较慢,请耐心等待>:https://www.python....翻译 2021-07-13 19:23:24 · 1114 阅读 · 0 评论 -
vue.js环境的搭建
写这篇文章之前,首先是对自己在公司前两年的一个总结,从2019.3.1入职到2021.6.30我在研发三部的任职草草结束了。。。 在原来的部门两年多时间,因为对于浏览器等的兼容性要求比较高,所以我们的项目只用到了简单的jQuery,jquery-ui,bootstrap,echarts,ztree,jtopo等知识点,导致我到目前的主流框架一窍不通,虽然刚毕业那段时间写过angular,但也忘的一干二净了。 来到新的部门,开发需要用到的主要技术有vue.j...原创 2021-07-12 20:03:10 · 813 阅读 · 0 评论