VUE
关注
分享
扫一扫
时间不会赖着不走
这个作者很懒，什么都没留下…
展开
-
使用Element-UI中的el-upload实现文件的上传demo(亲测有用)
先介绍一个demo ，前端框架使用的是VUE，组价用的是el-upload组件，它的相关介绍在官方文档中有介绍，点击即可跳转，那么话不多少，上代码。原创 2022-12-27 22:23:06 · 595 阅读 · 0 评论 -
Element-UI中的el-upload文件上传组件使用过程中踩的坑
今天在对接上传文件接口的过程中遇到一个问题，导致后端一直上传不成功。其中的罪魁祸首就是el-upload 组件中的。在确认后端接受没有问题的情况下，想到就是前端代码出现的问题，然后经过逐一排查，得到需要获取。，最开始误以为这个里面放置的就是前端导入的文件。加了之后，变成了binary类型，这样后端才可以接受到。进行保存，raw里面才是真正的文件。变成添加里面的raw。原创 2022-12-27 22:10:29 · 2145 阅读 · 0 评论 -
VUE中父组件传给子组件传值，watch第一次监听不到
今天编程过程中，遇到一个问题就是vue 父组件传给子组件传值，子组件中watch第一次中监听不到，只有第二个数据变化才能检测到变化。经过各种尝试终于解决了这个问题。原创 2022-10-25 14:20:27 · 3121 阅读 · 0 评论 -
VUE中watch的写法和用法
两种写法都可以实现在检测到rw的值变化时，进行调用里面的方法。原创 2022-10-17 10:18:49 · 702 阅读 · 0 评论 -
VUE中的mounted和created在页面加载过程只执行一次，computed和watch是用来监听值发生变化的
今天在做项目的时候，发现重新打开页面，传给子组件的值，会被监听到，但是在打开页面之后，再做操作就会发现监听不到里面的值。后来把值的监听放到watch方法中，终于监听到了。VUE中的mounted和created在页面加载过程只执行一次，computed和watch是用来监听值发生变化的。VUE中的mounted和created在页面加载过程只执行一次，computed和watch是用来监听值发生变化的。后来去官网进行查询，重新熟悉了一下VUE的生命周期。原创 2022-10-17 10:11:11 · 2576 阅读 · 0 评论 -
VUE中父组件传给子组件传值，watch第一次监听不到
今天编程过程中，遇到一个问题就是vue 父组件传给子组件传值，子组件中watch第一次中监听不到，只有第二个数据变化才能检测到变化。经过各种尝试终于解决了这个问题。原创 2022-10-16 22:09:31 · 4278 阅读 · 0 评论 -
Vue中为对象添加字段两种方法
Vue中为对象添加字段有两种方法。原创 2022-09-18 13:58:55 · 11494 阅读 · 0 评论 -
vue中延时函数用法
【代码】vue中延时函数。原创 2022-08-21 18:17:03 · 1352 阅读 · 0 评论 -
修改elmentui中el-date-picker下拉框样式(大小)
最近项目里面有一个组件需要用到日期选择器,且这个组件中的日期选择器需要比默认的大小(width:320px)要小一些.于是我准备打开控制台审查元素修改样式.但是大家可以从下面的图片看到,这个下拉框的盒子与app的盒子是同级,它并不在app组件里,且我们在写样式的时候是加了scoped的,样式只会在app内生效,所以直接修改样式没有作用.原创 2022-08-21 18:12:14 · 3642 阅读 · 7 评论 -
vue父组件调用子组件this.$refs报错，undefined、not a function问题解决方法
需要拿到ref的下标才行,父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。这种情况下，一般都是父组件调用子组件方法的时候，子组件还未渲染成功。父beforeDestroy->子beforeDestroy->子destroyed->父destroyed。父beforeUpdate->子beforeUpdate->子updated->父updated。原创 2022-08-21 17:10:15 · 8256 阅读 · 1 评论 -
VUE中父组件如何调用子组件的方法
【代码】VUE中父组件如何调用子组件的方法。原创 2022-08-21 17:06:05 · 13484 阅读 · 0 评论 -
JS中将数组转化成数字的方法和创建数组的方式
/等价于[2,3] 这样写表示有2个数组元素，为2和3。//2表示数组长度为2，里面有2个空的数组元素。//创建了一个空数组。原创 2022-08-21 16:57:08 · 3461 阅读 · 0 评论 -
JS中一些判空操作，判null，判undefined操作和简化操作和if操作
最近遇到一些前端判空的操作，百度搜了很多了，有关于属性的有误进行判断的，还有根据属性里面的值是否为null 还是{} 来进行判断的，里面判断的方法很多，但是用的不对的话，会对操作有一定的影响.故而总结一下。原创 2022-08-21 13:56:49 · 1343 阅读 · 0 评论 -
vscode中快速生成vue页面模板
测试方法新建vue后缀文件，输入vue，按下tab键，OK。原创 2022-07-21 14:01:06 · 2173 阅读 · 1 评论 -
nodejs安装webpack详细步骤
node.js官网(https://nodejs.org/en/)下载LTS稳定版本一路傻瓜式安装即可，可以自定义安装到除c盘之外的其他盘。安装成功，按下window +R输入 cmd之后 输入 node -v 出现版本号则表示安装成功。接下来 配置nodejs的环境找到安装node.js的地址，里面会有node_cache和node_global两个文件。如果没有的话，创建这两个文件夹，然后在cmd中执行npm config set cache “D:\nodejs\node_cac原创 2022-07-06 23:39:31 · 1748 阅读 · 2 评论 -
解决 VScode 在打开新Tab是覆盖上一个Tab的问题(亲测可用)
首选第一步进行搜索，快捷键ctrl+shift+p，在搜索框里输入settings进行搜索，看到User Setting选项，点击打开打开以后看到如下界面，输入enablePreview(选项在Workbench工作台中)搜索，然后将箭头指示的地方的对勾取消即可，再次打开文件就不会覆盖原窗口文件了也有可能你的是中文版的，就把这个对应的对勾去掉即可...原创 2021-04-28 19:01:40 · 677 阅读 · 0 评论 -
Vue中ref和$refs的介绍及使用
主要参考这个Vue中ref和$refs的介绍及使用今天项目中用到这个中一个div组件<div id="win_box" style="height: auto; " ref="aaa"> <table style=" width:300px;border-collapse: separate; font-size:14px;border-spacing:0 6px;table-layout:fixed;"> <caption style="fon原创 2021-04-28 16:18:01 · 379 阅读 · 0 评论 -
Vue项目中得到数据并且渲染到html页面上
第一步<tr><td style=" width: 20%;font-weight:bold;text-align:left;">ΔX:</td> <td :title="basedata" style="text-align:left;width:45%;word-break:keep-all;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;">{{basedat原创 2021-04-28 16:07:18 · 3023 阅读 · 0 评论 -
vscode中安装node.js下载安装后才能使用npm命令
http://nodejs.cn/download/进入这个网址下载安装安装后才能使用npm命令原创 2021-04-28 15:15:45 · 850 阅读 · 0 评论 -
VSCode同时打开多个项目文件夹
设置中就有的：文件>>首选项>>设置>>窗口>>新建窗口>>Open Folders In New Window>>on，这里设置为on即可。原创 2021-04-28 15:03:39 · 1058 阅读 · 0 评论 -
vscode中vue中打开别人的vue模板或者vue项目
第一步文件------》打开文件夹 --------》选择自己的项目或者前端模板第二步点终端选择新终端第三步在终端中输入npm installl第四步输入 npm run dev原创 2021-04-27 22:36:16 · 2958 阅读 · 0 评论 -
后端跨域问题解决加注解@CrossOrigin
在controller类上面加注解@CrossOrigin原创 2021-04-27 10:04:35 · 995 阅读 · 0 评论 -
Vue中axios调用网上接口用POST方式传参
vue框架推荐使用axios来发送ajax请求,解决方法:1.qs模块是axios中自带的不需要下载，直接导入 解决问题的核心就是把参数转换成标准的键值对var qs = require('qs');axios.post('/foo', qs.stringify({ 'bar': 123 }));如果参数里面要传数组,查看官方文档发现，只需要在qs的方法中设置它的indices为false即可qs.stringify({ a: ['b', 'c', 'd'] }, { indices: fa原创 2021-04-26 17:44:04 · 1916 阅读 · 0 评论 -
vue里面的目录架构
这里是一级目录这里是二级目录原创 2021-04-17 21:27:28 · 116 阅读 · 0 评论 -
vue中设置中公共路由和根据权限添加的路由
/* publicRoutes 默认公共路由，不需要权限的路由 roleRoutes 根据权限添加的路由，添加规则如下 1、没有meta标签的代表所有权限都可以访问 有meta标签的，根据role数组，例如下面 meta: { role: ['a', 'b'] }, 代表只有a，b两个权限的人可以访问*/公共路由// 公共路由let publicRoutes = [{ path: '/login',原创 2021-04-17 21:22:26 · 1645 阅读 · 0 评论 -
vue项目中点击按钮切换图片
这是里面的两个按钮<div class="text-btnBox"> <el-button type="primary" @click="changeone()">信息采集</el-button> <el-button type="primary" @click="change()">岩层结构输出</el-button> </div>默认图片 <!--原创 2021-04-17 16:07:27 · 3340 阅读 · 1 评论 -
Vue之Axios跨域问题解决方案 ----纯前端
方案1：既然使用axios直接进行跨域访问不可行，我们就需要配置代理了。代理可以解决的原因：因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据。准备工作：安装所需中间件和插件等，比如axios,http-proxy-middleware等。原创 2021-04-11 17:24:01 · 6393 阅读 · 0 评论 -
天地图太高清了
原创 2021-03-31 17:55:43 · 774 阅读 · 0 评论 -
天地图Map方法setCenter和pan实现地图定位和平移
map.panTo(new T.LngLat(110.074846, 39.201972), 15);原创 2021-03-31 17:04:48 · 1906 阅读 · 0 评论 -
vue方法中如何获得另外一个方法的返回值
问题:比如方法A()调用B()方法，然后B方法中返回一个值给A，A接收到这个方法再继续执行下一步的代码，如何实现？？解决:methods: { async A() { const result = await B(); // dosomethings . . . }, B() { // dosomethings . . .原创 2021-03-31 17:02:13 · 10827 阅读 · 2 评论 -
在天地图中添加多边形及注册面的点击事件
思路准备一些多边形坐标，然后在天地图上利用这些坐标形成面，在面上添加监听事件（比如鼠标移入该面后出现信息框）知识点Polygon类创建多边形覆盖物。构造参数：Polygon(points:Array[,opts:PolygonOptions])points：坐标数组。opts：多边形的属性对象，请参考 PolygonOptions。更多参数请参考天地图文档效果图html部分<body onLoad="mapTDTLoad()"> <div id="typeMap原创 2021-03-31 14:56:20 · 1914 阅读 · 0 评论 -
vue跳转页面携带参数并且立即执行方法
1.首先定义跳转函数这个是链接跳转<a href="javascript:void(0)" onclick="openPage()">位移变化趋势图</a></td></tr> </table> methods: { openPage(){ // this.$router.push('/dis/show'); this.$router.push({path: '/dis/show',原创 2021-03-30 14:03:36 · 3994 阅读 · 1 评论 -
Vue项目使用天地图标注中点击跳转到其他vue页面
1.在mounted周期函数中定义window函数指向mounted() { window.openPage=this.openPage; },2.在method定义事件函数 methods: { openPage(){ this.$router.push('/dis/data'); }3.自定义一个地图标签窗口类InfoWindow var Content = `<a href="javascri原创 2021-03-30 11:31:02 · 694 阅读 · 0 评论 -
“＜/script＞“报错
今天写代码的时候，发现当html转成html字符串时，就是下面这种但是在写"</script>"这句话时一直报错原因因为浏览器只要在内嵌的script标签代码中遇到这几个字符就会认为是当前script标签的结束标签。也就是 var ss=" 是js代码部分。后面的 "; console.log(ss); 就不是js代码部分了。会当成普通文字显示在页面上。这样var ss=" 代码就是语法错误（引号没有闭合）改成</script>就不会被认为是script标签的结束标签。原创 2021-03-29 21:26:52 · 1891 阅读 · 0 评论 -
vue跳转不同页面的多种方法
1：router-link跳转<!-- 直接跳转 --><router-link to='/testDemo'> <button>点击跳转2</button></router-link> <!-- 带参数跳转 --><router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳转1</button><原创 2021-03-29 17:46:59 · 3850 阅读 · 0 评论 -
vue中created、mounted，methods，watch，computed方法
created:html加载完成之前，执行。执行顺序：父组件-子组件mounted:html加载完成后执行。执行顺序：子组件-父组件methods：事件方法执行watch：watch是去监听一个值的变化，然后执行相对应的函数。computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值...原创 2021-03-28 22:04:36 · 711 阅读 · 0 评论 -
Vue项目使用天地图的方法（Vue引入天地图，创建地图实例
最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。引入天地图JavaScript API文件<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script&原创 2021-03-28 21:47:53 · 2361 阅读 · 2 评论 -
Element UI - el-select（选择器）下拉多选菜单不换行显示
ElementUI 是一款很强大的组件，但是其中或许也有一些功能不满足我们的需求或者审美，比如本人今天遇到一个问题：当我使用select多选框多选的时候，下拉框被撑开了，这样不仅自身不美观，旁边的组件都很有可能受到布局影响！！！下图为官方例子：Ps：第二张图虽然显示在同一行内，但是数据不直观！解决方案很简单：超出隐藏，那么设置在哪呢？我看了下生成的DOM，发现了这样一组代码：原来 Element 会把我们所选择的内容动态的添加在这组 DOM 里，那么下面就要设置了，原理很简单，给父级设置超出原创 2021-03-28 20:23:32 · 3041 阅读 · 1 评论 -
vue 将Checkbox 多选框选中的值提交到后台
实际应用，在实际的开发里面，我们还需要将选中的多选框的值传给后台，那么vue 怎么将Checkbox 多选框选中的值提交？比如说以字符串数组的形式提交给后端。<template> <div> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <el-checkbox v-for="city in cities" :label="ci原创 2021-03-27 11:34:05 · 6812 阅读 · 0 评论 -
el-form-item 内的 el-select如何自适应宽度
el-select中设置固定的值如 style=”width:100px”才有作用。 <el-form-item> <el-select v-model="DataQuery.data" clearable placeholder="请选择" style="width:180px"> <el-option label="实时数据" value="1"/> <el-option label="1小时数据" va原创 2021-03-27 09:45:01 · 3645 阅读 · 1 评论