![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 50
程序媛-静儿
学无止境
展开
-
el-table循环绑定数据后,监听表格数据格式化方法写法
绑定事件用data指明具体数据,作为方法的传参<el-table-column> <template slot-scope="scope"> <el-input v-model.trim="scope.row.lockDays" type="number" @change="data=>scope.row.lockDays=leaveInt(data)"></el-input> </template></el-table-c原创 2021-06-30 14:41:47 · 533 阅读 · 0 评论 -
element-UI上传文件,失败一次,后面触发不请求了
同名文件多次选择上传失败了,第一次触发请求,后面不触发请求了解决方案:引发问题:当选择多文件上传时,因为fileList被手动改变了,handleSuccess只会触发一次,this.listFile只有一个文件,重新给listFile赋值...原创 2021-06-30 14:35:51 · 1112 阅读 · 1 评论 -
elementui table固定列的时候,滚动条被遮挡无法拖动
elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效,是因为左边固定表格部分高度覆盖了左边表格的滚动条高度,因此无法拖动,这时候我们只需要改变固定表格区域的高度。代码如下:<style lang="scss" scoped> .el-table { /deep/.el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px原创 2021-06-30 14:22:51 · 2649 阅读 · 1 评论 -
watch与computed的结合使用监听对象的多个属性值变化
监听对象中多个属性A、B、C、D的值,初始化该对象E的值,E可手动修改原创 2021-06-30 14:09:29 · 736 阅读 · 0 评论 -
vue3版本的安装
首先安装nodejs安装npm,也可使用淘宝镜像,具体操作查看:cnpm安装手册安装或者升级vuecnpm install -g @vue/cli// 保证 vue cli 版本在 4.5.0 以上vue --version// 创建项目vue create my-project然后的步骤步骤解释可查看文章:vue-cli3.0安装及配置(完整版)Please pick a preset - 选择 Manually select featuresCheck the features.原创 2020-10-27 17:33:39 · 2258 阅读 · 1 评论 -
elementUI下拉选择select反应慢
最近遇到一个很诡异的问题,elementUI的select切换下拉选项,联动另一个下拉选项的选项数据时,变得很慢,改变选项后半天这个下拉框还不收起改变值,后面研究了一下,发现是change事件要执行完,下拉框才会收起改变值。但是我这个change事件要改变的是另一个下拉框选项数据,这个数据有特别大上千条,这个在渲染的dom的时候很慢,因此影响了第一个下拉框的改变响应。如图: 改变类型后,下拉框不收起,是因为标签的下拉选项数据过大,要等他渲染后,才会反应过来后来想了一个办法,让数据渲染好,只是..原创 2020-10-23 10:27:44 · 2703 阅读 · 0 评论 -
vue命名路由
命名路由有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', ...原创 2019-12-25 14:17:16 · 201 阅读 · 0 评论 -
elementUI导航高亮问题
问题1:当页面设置了标签点击跳转路由的时候,导航栏高亮和当前不一致,还是高亮原来的导航解决方法:在菜单导航组件中监听路由变化<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#f...原创 2019-04-02 22:02:04 · 1491 阅读 · 0 评论 -
关于vue数据列表全选效果,checkbox选中效果
功能点:数据选中效果,点击选中,再次点击取消选中。点击全选,数据列表全部选中,更新统计的选中数据。代码片段js:data(){ return { //假数据省略了 productList:[{....},{......}], // 选中项的集合 selectedList:[], }}methods:{ ...原创 2019-04-09 21:56:24 · 2208 阅读 · 0 评论 -
vue拖拽插件vuedraggable
最近有项目需要用到拖拽改变树结构,给大家推荐vue的插件库vuedraggable(gitHub:https://github.com/SortableJS/Vue.Draggable),这个插件是基于sortable.js(gitHub:https://github.com/RubaXa/Sortable),所以这个options里面的配置,和sortable.js是一样的。下面是一个简单...原创 2019-04-16 22:36:02 · 1153 阅读 · 1 评论 -
vue动态组件
:is v-bind:is<template> <div> <keep-alive> <p :is="currentView"></p> </keep-alive> //常用于以下情况 keep-alive是缓存 <ke...原创 2019-04-17 22:13:12 · 121 阅读 · 0 评论 -
slot父组件向子组件传递信息
父组件:<com-a> <p slot="header">新建</p> <p slot="footer">提交</p></com-a>子组件com-a:<transition name="drop"> <div class="dialog-content" v-if=...原创 2019-04-17 22:19:46 · 479 阅读 · 0 评论 -
Vue.js 3.0 新特性预览
此文转自:https://www.css88.com/archives/10052?from=timelineEvan You(尤雨溪)今天(2018年11月16日)早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。我们做了一些笔记并将其与下面的幻灯片结合起来分享给大家。总结起来...转载 2019-04-28 21:45:05 · 248 阅读 · 0 评论 -
vue源码研究--Data为啥要写成函数?
大家在使用vue的时候,肯定有想过为什么 data 要写成函数,而不允许写成对象?首先我们要想到:data是 Vue 实例上的一个属性。对象是对于内存地址的引用。函数有自己的作用域空间。第一点无可厚非,data属性附着于 Vue 实例上。第二点,JS 的数据类型分为基本类型和引用类型,基本类型存储在栈内存中,引用类型存储在堆内存中,并且引用类型指向的是栈内存中的堆区地址。下面两个例...原创 2019-06-03 11:00:23 · 2967 阅读 · 1 评论 -
VUE事件修饰符总结
对事件添加一些通用的限制,比如阻止事件冒泡,Vue 对这种事件的限制提供了特定的写法,称之为修饰符 用法:v-on:事件.修饰符 <!--阻止事件冒泡.stop--> <div id="div1" class="stop" @click.stop="event1(1)"> <!--使用事件捕获模式.capture--> <d...原创 2019-07-23 08:55:50 · 178 阅读 · 0 评论 -
动态合并elementUI表数据
html:请求完数据掉方法getSpanArr()效果图:原创 2019-08-26 18:15:48 · 164 阅读 · 0 评论 -
Vue根据是否授权,跳转不同的路由(vue-router动态路由)
功能点:项目一运行需要先请求后台,根据后台返回结果跳转对应路由,如果用户已经授权跳转首页,如果用户没有授权,跳转授权页面进行授权。实现代码如下:router文件夹中的index.jsimport Vue from "vue";import Router from "vue-router";Vue.use(Router);let router =new Router({ ...原创 2019-04-02 21:50:51 · 2892 阅读 · 0 评论 -
Vue中的Render渲染函数的写法和规范
VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数参考网址:https://www.cnblogs.com/tugenhua0707/p/7528621.htmlreturn createElement('h1', this.title);createElement 参数// @retu...原创 2019-04-02 20:49:01 · 5477 阅读 · 1 评论 -
vue+axios 实现Excel下载,并解析文件流
功能:导出表格数据,形成一个excel文件,可打开查看内容。1. axios请求设置头部和请求方法const serviceHttp = axios.create({ baseURL: process.env.API_ROOT,// 接口的域名地址 withCredentials: true, headers: { 'Content-dispo...原创 2019-04-01 20:13:42 · 3943 阅读 · 0 评论 -
vue面试题总汇
vue的底层原理?vue组件之间的通信?JS中判断数据类型的方法有几种?最常见的判断方法:typeof判断已知对象类型的方法: instanceof根据对象的constructor判断: constructor无敌万能的方法:jquery.type()vue与angular的区别?1.vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架...转载 2018-03-08 17:22:08 · 1942 阅读 · 0 评论 -
完整又详细的vue-cli安装步骤
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,在安装的过程中可以根据个人喜好使用淘宝的镜像,但是要先安装cnpm(速度和稳定性都比较好)2、在目标文件夹下打开终端3、执行cnpm install vue-cli -g 全局安装 运行vue查看安装是否成功 4、运行vue ...原创 2018-02-28 21:02:42 · 82082 阅读 · 0 评论 -
vue-axios详细介绍
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises,您可以使用polyfill。它本身具有以下特征:从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消...原创 2018-02-28 21:29:05 · 11783 阅读 · 1 评论 -
vue计算属性详解
计算属性在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这种情况下,模板不再简单和清晰。在实现反向显示 message 之前,你应该确认它。这个问题在你不止一次反向显示 ...转载 2018-03-02 12:29:44 · 354 阅读 · 0 评论 -
VUE生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &am原创 2018-10-03 12:03:09 · 180 阅读 · 0 评论 -
Vue2.0的八种常用传值方式、父传子、子传父、非父子组件传值(最完整)
Vue2.0 传值方式:在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍。 ...原创 2018-10-06 12:01:42 · 13672 阅读 · 4 评论 -
vue-cli3.0安装及配置(完整版)
这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键 选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步,这里 演示,我随便选了几个下一步之后问询问你安装哪一种 CSS 预处理语言,你随...转载 2019-03-11 22:28:54 · 35763 阅读 · 4 评论 -
vue中使用axios+Promise二次封装ajax请求
为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise这个对象。其中resolve,reject就相当于是你定义了两个block,然后把数据传出去。Promise 简述1、Promise 是一种异步的解决方案2、分为三个状态,进行中,已成功(resolve),已失败(rejected)三种状态:pending:进行中fulfi...原创 2019-03-12 22:56:26 · 1039 阅读 · 0 评论 -
Vue中Eslint的使用详解配合VSCode插件安装和个人设置
Eslint是用来审查代码是否符合编码规范和统一的代码风格;为何启动项目会出现各种报错?因为编码规范不符合eslint规则常见的报错:文件末尾存在空行(eol-last):http://eslint.org/rules/no-mutiplle-empty-lines Too many blank lines at the end offile.Max of 0 allowed 缺...原创 2019-03-17 20:11:29 · 5849 阅读 · 0 评论 -
vue组件中name的作用
1.递归组件(递归组件是指组件自身调用自身)时会用到2.取消缓存(exclude)时会用到3.使用vue-devtools(https://github.com/vuejs/vue-devtools)时会用到我们在写vue项目的时候会遇到给组件命名这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的 export default { name:...转载 2019-03-17 20:43:44 · 1698 阅读 · 0 评论 -
VUE组件结构详解
一个vue页面主要包括3个部分:界面展示代码template、业务实现代码script、界面布局代码style<script>export default { name: "App", data() {//数据定义 函数方法,返回数据的方式 return {}; }, methods: { // 组件的方法 }, wat...原创 2019-03-17 21:12:42 · 2142 阅读 · 0 评论 -
Vue路由钩子及应用场景
路由钩子总体来讲vue里面提供了三大类钩子1、全局钩子2、某个路由独享的钩子3、组件内钩子三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧to: Route: 即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next(): ...原创 2019-03-17 21:28:03 · 1405 阅读 · 0 评论 -
Promise链式调用解决多个异步回调
项目中需要先获取用户的ID,然后再根据用户ID去获取用户的详细信息。这里获取用户IDlogin()和获取用户信息getUser()都是调用接口的异步请求。在获取用户的详细信息之前,需要先获得用户ID。也就是说getUser依赖于login的状态。一:promise.all() Promise.all([axios1,axios2,axios3]),用于将多个Promise实例,包装成...原创 2019-03-24 20:46:55 · 2500 阅读 · 0 评论 -
Vue内部运行机制剖析
1、初始化调用Vue原型上的_init()进行初始化,会初始化vue的生命周期,props,data,methods,computed,watch,最重要的是利用Object.definedPropty()对data对象里面的属性设置setter和getter函数,也就是来实现响应式和依赖收集2、挂载组件调用$mount挂载组件3、编译编译三部曲,parse(解析)、optimize...转载 2019-03-24 21:20:09 · 207 阅读 · 0 评论 -
Weex的安装和weex playground使用
weex playground下载地址:https://weex.apache.org/tools/playground.html在手机端安装weex playground App,然后扫描项目网页中的二维码搭建Weex开发环境1.安装依赖nodejs2.npm install -g weex-toolkit3.Weex init project 项目根目录下:npm...原创 2019-03-25 21:39:17 · 2390 阅读 · 0 评论 -
VUE实现手风琴效果-借助TweenMax
html:<div id="app"> <ul class="list"> <li v-for="(item,index) in list"> <div class="tit" @click="tween(index,item)" >{{item.原创 2018-02-27 21:01:32 · 4037 阅读 · 0 评论