vue填坑
xuxinwen32
每天进步一点点。
展开
-
vue填坑系列之配置权限菜单列表
关于vue的UI框架Element,多层嵌套v-for循环下的表单验证2018年09月30日 10:09:41雷火小盾阅读数:1528版权声明:转载请附上地址 https://blog.csdn.net/qq_42350820/article/details/82905921以下为一层嵌套<el-form-item v-for="(item,itemIndex) in ...转载 2019-03-05 20:00:13 · 1860 阅读 · 0 评论 -
vue填坑之template模板中使用v-for报错
假如我们想for循环的数据放在template中进行渲染,那么执行的时候就会报错每隔一段时间不定期更新中,本人菜鸟一枚,希望在vue填坑的路上能帮助到大家,有疑问欢迎留言···参考文章:https://www.cnblogs.com/jennydtt/p/10277493.html将v-for放在其它的标签上面就没有这个问题...原创 2019-03-07 20:06:18 · 11908 阅读 · 0 评论 -
vue填坑系列之for循环常用方法
1、for(let item of response.data.result) {用item操作每一条数据。 }item:定义的每一条的变量response.data.result:要循环的数组2、response.data.result.forEach((item, index) => {用item操作每一条数据。})...转载 2019-03-07 20:07:43 · 1669 阅读 · 0 评论 -
vue填坑系列beforeCreate调用methods方法报错
今天在使用vue生命周期钩子函数的时候需要提前拿到后台数据,进行前台页面渲染,在使用beforeCreate方法调用后台接口,使用methods方法的时候报错,提示我定义的全局方法不是一个函数,即使我在methods方法体里面定义的方法一样报错,后来去看了vue钩子周期函数,知道问题在哪了,在beforeCreate的时候默认方法和所有元素是没有被渲染出来的,所以要定义初始化数据不要在before...原创 2019-03-07 20:12:18 · 11460 阅读 · 1 评论 -
vue填坑系列之子路由视图一个根节点
因为是子视图模板,在template渲染页面的时候我就没有加上根节点,no101.vue子路由视图将在Main.vue上面进行渲染,因为有嵌套关系,两个节点是平行关系,导致编译的时候直接报错Component template should contain exactly one root element. If you are using v-if o...原创 2019-03-07 20:15:40 · 663 阅读 · 0 评论 -
vue填坑系列之之elementui表单序号
用elementui框架渲染表格的时候,通过elementui自定义的prop属性可以很方便的进行渲染页面,但是第一列序号栏的时候就遇到了问题,默认编号后台是没办法传输的,但是需要我们前台展示出来,那么就需要用到elementui自带的一个type属性来定义序号,type="index"这样设置以后就可以展示序列号这列了;每隔一段时间不定期更新中,本人...原创 2019-03-07 20:17:34 · 2579 阅读 · 1 评论 -
vue填坑之el-select获取label和value值
在列表过滤搜索中需要选择下拉框相应的value,使用的@change方法,但是获取到的value值始终为undefind,在网上也找了相关的方法,并没有写错,后来仔细排查发现我写的 @change="selectWorkName()"带了小括号,所以不识别此时就可以获取到相应的value值了,所以如果不确定一定要打印出来...原创 2019-03-07 20:21:13 · 28548 阅读 · 5 评论 -
vue填坑系列之重置select选择器默认值
具体的需求如下,在点击重置按钮的时候,我需要将select下拉框重置为初始值,输入框重置为空打印输出值的时候会发现如果默认没有任何选中的状态下,直接将当前元素重置为空字符串就可以了如下:this.form.deviceNoVal = ''this.form.deviceType = ''如果重新赋值的话相当于...原创 2019-03-07 20:23:55 · 15314 阅读 · 4 评论 -
vue填坑系列之进入登录页面重定向
在进行开发当中我们一进入登录页面的时候肯定有一个默认的欢迎页面,不可能左边是导航菜单,右边是空白页面,这样明显是不合理的,所以需要我们在页面登录进来的时候就要做相应的处理,给登录页面一个默认的视图,那么具体配置是怎么样的呢,这就需要用到vue里面的重定向功能,具体参照如下:渲染以后的页面如下:安装报错.note具体方法已经用箭头标出,希望能帮到大家...原创 2019-03-07 20:28:41 · 5772 阅读 · 0 评论 -
vue填坑系列之给table每个项赋予单独的属性值
在实际开发项目中我们可能需要给每个单独的选项赋予相应的属性值,以便调用接口的时候传参给后台,那么每一行数据相应的属性值都应该是独立的,下图演示的是jQuery方法调用设置的属性值,那么用vue+elementui方法该如何实现呢,请看下图在每个单独的选项中我设置了code和devicetype两个属性值,那么是如何实现的的呢具体代码如下箭头标注:...原创 2019-03-07 20:30:51 · 2258 阅读 · 0 评论 -
vue填坑系列之let和var作用域范围
在实际开发项目中用var声明变量比较多,但是在用vue进行开发的时候经常会用到let和const两个来进行声明变量,那么这几者之间到底有何区别呢let与const的区别let与const都是只在声明所在的块级作用域内有效。let声明的变量可以改变,值和类型都可以改变,没有限制。const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值...原创 2019-03-07 20:33:56 · 3284 阅读 · 0 评论 -
vue填坑系列之动态设置el-menu导航当前选中项
Element UI 是一套 Vue.js 后台组件库,它能够帮助你更轻松更快速地开发后台项目。官方文档给出了设置默认选中的属性。Menu Attribute参数 说明 类型 可选值 默认值 mode 模式 string horizontal,vertical vertical theme 主题色 string ...转载 2019-05-05 11:28:12 · 13584 阅读 · 2 评论 -
vue填坑系列之属性值获取动态参数
在实际项目开发当中遇到需要根据设备编号和电路板编号进行判断是否解绑按钮的操作;设备编号和电路板编号同时存在那么解绑按钮可以点击,否则处于禁用状态;我这边写了两种获取状态值的方法,第一种直接在html标签中使用三元运算符,第二种写成一个方法,页面加载的时候直接调用;<!--每行中如果设备编号和电路板编号都存在那么解绑按钮是激活状态,否则就是禁用状态--><...原创 2019-05-05 12:25:02 · 4247 阅读 · 0 评论 -
vue填坑系列之js方法里面实现路由跳转
vue中方法调用实现路由跳转每隔一段时间不定期更新中,本人菜鸟一枚,希望在vue填坑的路上能帮助到大家,有疑问欢迎留言···参考文章:https://blog.csdn.net/gqzydh/article/details/81453990...原创 2019-03-04 19:52:53 · 836 阅读 · 0 评论 -
vue填坑系列之去掉链接地址中的#符号
vue2.0 路由模式mode="history"的作用特别提醒:开启mode="history"模式,需要服务端的支持,因为出现“刷新页面报错404”的问题;大家都知道,路由地址都是以"#"形式展示,但是有些时候,我们又希望路由地址中不出现"#",那怎么办呢?vue给我们提供了一个属性mode="history";代码如下const router = new Router(...转载 2019-03-04 19:51:13 · 2465 阅读 · 1 评论 -
vue填坑系列之权限获取当前菜单模块
今天在开发当中遇到一个坑,自己点击第二个模块菜单的时候始终跳转到第一个模块菜单,后来进行bug的排查工作,发现最主要的问题是index属性没有进行定义index绑定以后就不会发生这种情况了,所以index定义的时候一定不要漏...原创 2019-03-05 20:03:07 · 786 阅读 · 0 评论 -
vue填坑系列之导航菜单index类型报错
Invalid prop: type check failed for prop "index". Expected String with value "15", got Number with value 15.期待为字符串类型,但是得到的是数字,解决方法:加上''拼接字段...原创 2019-03-05 20:04:53 · 669 阅读 · 0 评论 -
vue填坑系列之index索引丢失
每隔一段时间不定期更新中,本人菜鸟一枚,希望在vue填坑的路上能帮助到大家,有疑问欢迎留言···参考文章:https://zhidao.baidu.com/question/1308052236529572619.html...原创 2019-03-05 20:06:37 · 748 阅读 · 0 评论 -
vue填坑系列之嵌套路由的使用
开发的时候有时候会遇到一种情况,比如 :点击这个链接跳转到其他组件的情况,通常会跳转到新的页面,但是,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。需求我们需要当点击相应链接跳转到相应组件,页面不刷新出现此问题的根本原因是是没有进行路由视图渲染,这是最重要的标签,用来显示跳转的页面,不加此标签,不会...原创 2019-03-05 20:08:55 · 464 阅读 · 0 评论 -
vue填坑系列之模板渲染报错
在子视图层no101中,直接引用element-ui里面的代码到no101.vue中,采用覆盖的形式默认没有用template包裹,导致报错每隔一段时间不定期更新中,本人菜鸟一枚,希望在vue填坑的路上能帮助到大家,有疑问欢迎留言···参考文章:https://www.jianshu.com/p/4d61f71de95a...原创 2019-03-05 20:10:33 · 564 阅读 · 0 评论 -
vue填坑系列之VUE-RESOURCE和AXIOS的区别
VUE-RESOURCE 和 AXIOS的区别Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-r...转载 2019-03-04 19:17:25 · 728 阅读 · 0 评论 -
vue填坑系列之使用axios发送请求
vue中使用axios发送请求我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求1.安装axioscnpm i axios -S2.方案一:修改原型链首先,在main.js中引入在这个时候,你还是无法在组件中使用axios的,但如果...转载 2019-03-04 19:30:10 · 212 阅读 · 0 评论 -
vue填坑系列之获取dom元素
在使用Vue的时候,有时候我们希望直接用Js操纵DOM来实现某些效果,具体实现只用利用Vue提供的ref属性以及this.$refs即可实现。<div class="firstOpeart" style="display: block;" @click="addStyle" ref="openText"> <span class="opeart"&g转载 2019-03-04 19:32:58 · 181 阅读 · 0 评论 -
vue填坑系列之使用elementui的默认样式修改
elementui的默认样式修改2018年01月23日 09:14:32留给时间阅读数:8026版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_32340877/article/details/79135686今天用element ui ,做了个消息提示,发现提示的位置总是在上面,如图:可是我想让提示的位置到下...转载 2019-03-04 19:41:55 · 1045 阅读 · 0 评论 -
vue填坑系列之在main.js中引入相应的js插件不生效
需求:在main.js中引入相应的js插件不生效;原因:相应的插件没有将模块export default;解决方案:所以比较好的办法是在index.html渲染静态页面的时候直接用script标签的形式引入;...原创 2019-03-04 19:43:42 · 8978 阅读 · 1 评论 -
vue填坑系列之vue-cookies的使用
vue之vue-cookiesnpm链接:https://www.npmjs.com/package/vue-cookies安装:npm install vue-cookies --save使用:import Vue from 'Vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies)Api: 设置c...转载 2019-03-04 19:45:39 · 4733 阅读 · 0 评论 -
vue填坑系列之this指向调用
开发项目当中遇到输入的信息不正确给予相关提示功能,但是在调用的时候遇到问题了,浏览器提示$message未定义,后来排查,this指向有问题解决问题的方法:将this赋值给当前的局部变量,局部变量进行调用的时候,那么浏览器就会知道这是当前的this方法调用,而不是全局作用域的this了,简单的分享就到这里;每隔一段时间不定期更新中,本人菜鸟一枚,希望在vue...原创 2019-03-04 19:47:55 · 920 阅读 · 0 评论 -
vue填坑系列之反三角引号接收参数
es6最新语法糖写法,可以不用单引号+双引号拼接的形式,而是直接$加上大括号引用参数就可以了原创 2019-03-04 19:48:55 · 708 阅读 · 1 评论 -
vue填坑系列之将返回来的对象其中一项追加到末尾
具体需求如下表所示,后台返回一个键值对的对象,其他是后台已经存入的数据,不方便改,但是前台在做渲染的时候要把其他放到键值对的末尾再进行渲染,所以就需要对后台返回过来的数据做处理,具体操作如下:具体代码如下:this.form.spaceTypeData = response.data;// console.log(this.form.spaceTypeD...原创 2019-05-05 12:27:48 · 1007 阅读 · 0 评论