![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
大橙子额
这个作者很懒,什么都没留下…
展开
-
解决报错Error in nextTick: “RangeError: Maximum call stack size exceeded“
maximum call stack size exceededvue项目报错:Error in nextTick: maximum call stack size exceeded 是因为有两个组件的name是一样的,改正后解决初步看这个报错是堆栈溢出,以为是代码里面有循环引用,检查了一下所有的方法,没有循环调用的情况。后来发现是引入了一个组件之后就报错,检查了组件中所有的代码都没问题,在路由中单独使用该组件不会报错,引入就会报错。排查发现是两个component的name重复了,改正后页面就正常原创 2022-04-21 10:39:09 · 8208 阅读 · 1 评论 -
element实现表格字段可编辑
element表格可编辑element表格组件,点击表格时判断是否有权限,有权限则显示输入框,并获取焦点,失去焦点时,调取后端接口,将修改后的字段提交<template> <el-table :data="tableData" style="width: 100%" @cell-click="cellClick"> <el-table-column prop="date" label="原创 2021-11-24 16:31:08 · 1454 阅读 · 0 评论 -
element树组件父子关联
el-tree组件父子关联问题el-tree选了父节点后,子节点均会选中,子节点都取消之后,父节点也取消,导致不选择子节点就无法选择父节点解决:取消父子关联关系:check-strictly="true"这样父、子节点完全不关联,勾选毫无关系。但是业务需求是,要勾选子节点必须先勾选父节点于是写了@check方法,在勾选子节点时,自动勾选父节点<el-tree :data="menuOptions" show-checkbox ref="menu" node-key="原创 2020-12-10 20:16:33 · 1611 阅读 · 0 评论 -
el-form动态表单切换导致的校验bug(v-if、v-show导致校验失效的bug)
使用v-if还是v-show使用el-form来做表单验证时,有时候选择的条件不同,展示的el-form-item也不一样,这时候就需要控制输入框的展示与隐藏。那么,用v-if还是v-show呢?v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要频繁的切换,使用v-show,否则,使用v-if。表单验证bug当使用v-if或v-show来控制el-f...原创 2020-01-20 10:49:14 · 9365 阅读 · 1 评论 -
var let const使用及区别
var新创建的变量的默认值都是 undefined。var testThisconsole.log(testThis)变量赋值:testThis = 'helloWord'在方法内部定义的var 变量,方法内部都可以访问到这个变量。例如for循环中for(var i =0;i<length;i++){ var test = i}console.log(i)...原创 2019-08-14 09:28:44 · 638 阅读 · 0 评论 -
对数组元素排序 sort() 方法
sort() 方法sort() 方法用于对数组的元素进行排序。语法:arrayObject.sort(sortby)返回值:对数组的引用。请注意,数组在原数组上进行排序,不生成副本。如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Tho...原创 2019-08-23 13:39:19 · 1344 阅读 · 0 评论 -
路由跳转传参
router-link跳转<router-link to="{path:'路由地址',params:{传的数据},query:{传的参数}" >//不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 注意:rou...原创 2019-08-26 14:34:07 · 2268 阅读 · 0 评论 -
设置setInterval定时器、postMessage、addEventListener监听器
项目中经常会使用到addEventListener,setInterval,非常好用,但也会有一些意想不到的bug。场景:项目中在mounted中绑定了一个监听器window.addEventListener('message', this.getList),父子页面间通过postMessage发送消息,然后就出现了bug,this.getList调用了好几次,刚开始没有规律,以为代码有问题,p...原创 2019-08-30 15:00:28 · 1181 阅读 · 0 评论 -
el-cascader的使用以及报错解决
项目中使用到了element-ui中的cascader级联选择器,组件下拉列表是动态的,根据用户选择的类型来从后台请求数据 <el-select v-model="type" @change="getCascader" placeholder="请选择类型"> <el-option v-for="item in type" :key="item...原创 2019-09-02 17:09:53 · 39857 阅读 · 7 评论 -
element Drawer 抽屉的使用
之前没有这个组件的时候是直接把dialog的样式改了,改成了侧弹窗的形式,element升级后就改成了Drawer 抽屉组件。场景:Drawer 的关闭动画没有了。代码如下<el-drawer title="我是标题" v-if="drawer" :visible.sync="drawer" :before-close="handleClose"> <sp...原创 2019-09-06 13:16:58 · 51393 阅读 · 0 评论 -
Vue学习文档记录
1、单向数据流## 标题注意:在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。2、动态渲染HTMLv-html="rawHtml"你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值...原创 2019-09-11 20:56:49 · 364 阅读 · 0 评论 -
编辑时使用Object.assign({},row) el-form表单无法编辑 el-select赋值后不能编辑
场景:页面表格数据是从后台获取的,编辑时,将数据传给dialog,发现Form表单无法编辑了,select多选框无法选择,删除,datepicker等组件也会出现这种不能编辑的情况原因:通过Object.assign直接将后台返回的数据赋值给form,后台返回的数据结构与data中初始化的form,数据结构发生了改变解决:页面有新增,编辑,删除按钮。可以编辑表格中的某行数据,点击编辑打开d...原创 2019-08-13 20:50:59 · 9233 阅读 · 6 评论 -
锚点定位 跳转到指定位置 回到顶部功能
一、跳转到指定位置给所要跳转的div一个ref<div ref='box'> <h3>跳转</h3></div>根据ref获取domlet el = this.$refs['box']计算出scrollTop即可document.querySelector(’.app-main’).scrollTop =el.offs...原创 2019-07-23 10:07:18 · 2872 阅读 · 0 评论 -
浏览器记住密码解决办法(密码回写到input框,点击出现密码下拉列表)
最近项目中发现一个问题,谷歌浏览器记住密码后,遇到用户名和密码框会自动写入,点击会出现密码的列表,这样就很不安全,测试说如果你去上厕所,别人拿你的电脑,不用输原密码就可以改掉密码。。。。。。不敢苟同。第一想法是不记住密码就行啦,记住密码怎样都不安全,但是有了需求还得想办法解决。一、加一个隐藏的input框chrome填充密码的原理是寻找name相同的password框进行填充所以在不需要记住...原创 2019-07-31 13:18:00 · 11530 阅读 · 4 评论 -
vue组件(父子组件传值、非props特性、作用域插槽、动态组件、v-once)
一、组件使用细节点组件是可复用的 Vue 实例,且带有一个名字。 我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用定义全局组件,data里的data格式Vue.component('row',{ data:function(){ return{ content:'this is a row...原创 2018-09-16 17:57:36 · 819 阅读 · 0 评论 -
过渡与动画(animate.css库、动画原理)
## 一、使用animate.css库 ##Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js引用animate...原创 2018-09-16 18:18:10 · 1179 阅读 · 0 评论 -
vue项目及axios请求获取数据
一般vue项目中 一个页面是由多个组件组成的,各个组建的数据都是统一在主界面的组件中发送axios请求获取,这样极大地提高了性能。首先要导入用到的组件和axiosimport HomeHeader from './components/Header'import HomeSwiper from './components/Swiper'import HomeIcons from '...原创 2018-09-17 10:12:46 · 28484 阅读 · 2 评论 -
子组件接收数据、分页显示
一、子组件中接收LIst数据并使用接收List数据export default { name:"HomeIcons", props: { list: Array },直接使用接收到的数据<div class="icons"> <swiper :options="swiperOption"> ...原创 2018-09-17 10:22:21 · 439 阅读 · 0 评论 -
新建vue项目完整步骤
一、node环境安装node.js,没有的可以在我的资源里下载二、新建vue项目安装vue脚手架 npm install -g vue-cli用脚手架搭项目 vue init webpack-simple (项目名字) 或 vue init webpack (项目名字)两者区别就是 vue init webpack-simple :可以理解为轻巧的,没有多余...原创 2018-09-17 11:21:55 · 13472 阅读 · 0 评论 -
Element-ui radio单选框
Element-ui radio单选框<el-radio v-model="form.sex" label="0">0</el-radio>发现页面加载的时候没有选中改成这样就可以了:<el-radio v-model="form.sex" :label="0">0</el-radio>是因为加冒号,说明后面的是一个变量或者表达式。...原创 2019-07-03 11:28:38 · 30727 阅读 · 5 评论 -
vuex(vue状态管理)
vuex项目中有些数据需要用 vuex 来统一管理的,如登录token,用户信息,一些全局个人偏好设置等,用vuex管理更加的方便,具体当然还是要结合自己的业务场景的。业务之间的耦合度很低的就在每个页面存放自己的data就可以了。安装vuex,使用命令:npm install vuex --save(安装vuex保存到本地)在项目的src目录下新建一个目录store,在该目录下新建一个in...原创 2019-07-19 10:41:49 · 601 阅读 · 0 评论 -
vue基础(vue实例、渲染、样式绑定、模板语法)
一、vue是什么vue.js官网上其实介绍的很详细Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。二、...原创 2018-09-16 16:26:12 · 1956 阅读 · 0 评论