![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
weixin_流年
这个作者很懒,什么都没留下…
展开
-
在vue项目中使用moment.js(时间格式化)
在vue项目中使用moment.js原创 2022-09-21 15:43:46 · 617 阅读 · 1 评论 -
vue项目获取当前地址栏参数(非路由传参)
项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入管理系统:打开新地址let obj = { id: 21, name: "测试传参" };window.open("http://localhost:8080/loginM?obj=" + JSON.stringify(obj),"_blank");pc项目获取地址栏参数:export function getUrlKey(name){ retu原创 2022-04-07 14:37:16 · 2244 阅读 · 0 评论 -
element-ui 隐藏组件 滚动条组件 <el-scrollbar>
elementUI 中有一个隐藏组件<el-scrollbar>,用来修改滚动条的样式;1.组件的名称是 <el-scrollbar></el-scrollbar>2.修改默认样式 ,最好在前面加上:class名/id名,用来区别.page-component__scroll .el-scrollbar__wrap { overflow-x: hidden;}3.一种情况用于高度固定:<div style="height:600px;"原创 2022-04-07 14:31:18 · 770 阅读 · 0 评论 -
vue+element-ui 实现上传文件、下载模板、批量导入、导出
在后台管理系统的项目开发中,为了系统使用更加方便,通常页面中会有批量导入,导出,上传文件,下载模板等功能。刚好最近做的项目中,有这些功能,正好借此机会做个总结。页面上的功能如上图所示。1 下载模板下载模板的功能比较简单,主要是后台提供的一个下载模板的接口,前端使用的是element-ui中的el-link这个组件,这个组件类似于前端常用的a标签,herf属性指向后端提供的接口即可。2 导出3 批量导入使用的elemet-ui中的el-upload组件...原创 2022-04-06 15:35:10 · 2466 阅读 · 0 评论 -
element UI table表格的多选框 如何根据条件隐藏显示
最近在做项目的时候遇到一个问题,使用的是table组件中的多选,需求要求的是,列表数据除了状态为待审核的可选之外,其他状态前的复选框不可选择。看了下文档结合一些朋友的建议,总结可以使用如下的方法来解决。通过添加相应类来控制样式,设置 display: none ,达到隐藏 checkbox 的目的。利用Table Attributes 属性里面的 cell-class-name 属性,添加单元格的class<template> <el-table :ce原创 2021-12-01 09:50:16 · 5208 阅读 · 2 评论 -
element-ui select组件change事件传递多个参数的方法
在使用element-ui框架开发项目时,select组件应该是经常用到,默认@change="changeEvent"不传递参数,才会把选中的值带过去。但是有时候,我们不仅仅需要选中的值,还需要传递额外的值,比如id之类的参数怎么办呢,下面有两种方法可以解决方法1@change = changeEvent(event,args);event,args);event就是选中的值,args就是额外要传递的参数;接收的时候也要用两个参数去接收changeEvent(value,args)...原创 2021-12-01 09:43:39 · 14694 阅读 · 0 评论 -
vue中watch的常见用法
在Vue开发项目的过程中,使用watch来响应数据的变化。watch的用法主要有以下几种:1 基本用法<input type="text" v-model="userName"/>new Vue({ el: '#root', data: { userName: 'shanghai' }, watch: { userName(newName, oldName) { } } })直接写一个监听处理函数,当每次监听到us原创 2021-09-24 09:23:02 · 468 阅读 · 0 评论 -
vue项目开发中.sync 修饰符的作用
官方解释如下:在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。其实这个修饰符就是vue封装了 子组件要修改父组件传过来的动态值的语法糖,省去了父组件需要写的方法,但是子组件emit时要加上update。代码如下:这里父组件,要给子组件传一个title的值<template> <div> <t-title..原创 2021-05-14 10:36:41 · 262 阅读 · 0 评论 -
vue v-for循环的key值使用注意事项
vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错.使用方法:1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key。2.使用template作为循环语句的元素时,key值添加在template内的第一级子元素上.例如: <template v-for="item原创 2021-05-14 10:28:42 · 1816 阅读 · 0 评论 -
vant使用时覆盖默认样式
在我们使用vant的时候,有时候一些组件的默认样式并不能满足我们项目的需求,这个时候我们可以使用下面的办法,覆盖掉默认样式,亲测有效。 // vant覆盖默认样式的写法 ::v-deep .van-cell:not(:last-child)::after { left: 0px !important; }...原创 2021-03-15 14:51:26 · 1756 阅读 · 1 评论 -
移动端H5调试-vconsole安装
在开发H5中当需要调试页面时,有时候我们还需要在手机端进行调试,vconsole就是这样一个工具。vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。vconsole使用起来也比较方便,你可以通过npm或者cdn等方式引入,然后初始化vconsole就可以了1 npm方式安装npm install vconsole2 CDN的方式引入BootCDN提供了不同的版本引入,地址:https://www.bootcdn.cn/vConsole/这样我们在移动端调试原创 2021-03-15 14:46:25 · 1313 阅读 · 0 评论 -
vue项目动态修改网页title(标题)
1 安装npm install vue-wechat-title --save 或 npm install vue-wechat-title -S2使用,在main.js中引用插件import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)3在路由router文件 index.js 中给每个路由添加 titleexport default new Router({ routes: [ {..原创 2020-12-25 10:24:42 · 1149 阅读 · 0 评论 -
vue H5项目手机端查看控制台console打印
1.安装vconsole 调试:cnpm install vconsole2.在当前页面引入,chorme调试或者手机端调试就能看到Vconsole了,如下图import VConsole from 'vconsole';let vConsole = new VConsole();谷歌浏览器手机模拟器显示如下:真机上显示如下:...原创 2020-12-17 14:35:42 · 2104 阅读 · 0 评论 -
vue插槽的理解和使用及作用域插槽
vue插槽的理解和使用及作用域插槽对于插槽的概念和使用,这是vue的一个难点,以下是我总结出来的笔记,如有错误或者有不同见解的,欢迎留言,一起学习。什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。代码如下:1. 在子组件中放一个占位符<template>原创 2020-11-05 11:19:55 · 3170 阅读 · 0 评论 -
vue UI 基于图形化界面快速创建vue项目
Vue CLI 3新版本发布后,我们现在快速创建一个vue项目的话,更加简单了,Vue UI。一个可视化图形界面方便你去创建、更新和管理项目的方方面面。今天,我会跟你一一介绍Vue UI的beta版本中可用的功能。1 首先我们可以先检查下自己的vueCli版本是否在3.0以上,如果没有的话我们可以升级或者重新安装都可以,全局安装,只安装一次就行,检查版本的形式如下:2 安装的方式如下,可以根据自己的需要 选择以下的任何一种方式都可以npm install -g @vue/cli# .原创 2020-08-11 09:43:25 · 2096 阅读 · 0 评论 -
vue事件绑定及传参相关(事件修饰符相关)
在vue中如果我们想处理事件绑定,可以使用v-on指令来进行事件的绑定 如下: <button v-on:click="handleClick1">默认传递事件对象</button> <button @click="handleClick2(1,2,$event)">传参及传递事件对象</button>对应的参数接收的方式如下:methods:{ handleClick1(eve){ console..原创 2020-08-05 17:39:03 · 726 阅读 · 0 评论 -
vue常用指令及插值语法
最近这段时间不是很忙,多少想写点东西,思来想去,还是对平时开发项目中用到的vue框架做点小总结吧,总结的知识点会很杂很碎,但都是基础,对需要入门的伙伴,或者长时间不使用的伙伴都会有些帮助,也算是自己的一个复习吧。话不多说,下面开始,这个章节 主要写些vue中常用的指令,及插值语法(或者说是插值表达式):1 插值语法(插值表达式)由于vue是基于数据驱动的,所以当我们需要在页面中显示一段文本时,可以使用如下操作:export default { data(){ retur原创 2020-08-05 11:43:57 · 1720 阅读 · 0 评论 -
vue数据驱动原理(响应式原理)
当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项,Vue 将遍历此对象所有的 property,并使用Object.defineProperty把这些 property 全部转为getter/setter。Object.defineProperty是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。通常我们定义一个对象都是使用如下的方法:var obj ={ name:"lisi", age:2...原创 2020-08-05 10:09:12 · 1197 阅读 · 0 评论 -
element-ui中steps图标自定义
element-ui中steps组件中提供的图标有时候并不能满足我们的要求,那么我们可以不可以自定义呢,答案是肯定的,我们可以引入外部的文件,也可以使用框架中本身提供的icon来实现:使用slot插槽来实现<div class="stepWrap"> <el-steps :active="activeSteps" align-center> <el-step :title="task.taskName" v-for="task in taskS原创 2020-08-04 15:21:54 · 7880 阅读 · 0 评论 -
element-ui框架 table组件表格暂无数据时自定义提示
vue开发过程中,一般在处理查询结果的时候,如果查询出来的结果为空,都会给用户一个提示,在使用table组件的时候,那么如何实现自定义的暂无数据的提示呢?有两种方式:1 只需要更改文字提示如果只要更改文字提示,直接添加empty-text属性即可。如下图所示:<el-table :data="tableData" size="mini" tooltip-effect="light" row-key="id" border lazy :load="load" :tree-props=原创 2020-08-04 15:12:58 · 6257 阅读 · 0 评论 -
vue中父组件和子组件间传值方法(主动获取)
在vue项目开发中,组件之间的相互传值是经常要用到的,而这其中父子组件间的传值更为常见,本文主要介绍的是在vue中,父组件如何直接获取子组件的数据和方法,以及子组件如何直接调用或者获取父组件的数据和方法。当然这样的传值方式不是很推崇,不过在一些情况下,还是能帮助我们解决问题的。1父组件主动获取子组件的数据和方法:1).调用子组件的时候定义一个ref <v-header ref="header"></v-header>2).在父组件里面通过 this.$r...原创 2020-07-28 14:47:28 · 1244 阅读 · 0 评论