vue
小憨憨不敢啊
我很仰慕你
展开
-
vue中常用的两种路由模式
vue router中常用的两种路由模式:hash模式、history模式原创 2022-07-31 15:22:48 · 4151 阅读 · 1 评论 -
Vue中的this.$options.data()和this.$data
继上一篇文章,在页面关闭是调用Object.assign(this.$data,this.$options.data);再次打开页面rules校验报错原因及解决办法和Vue实例的初始化相关。(源码version2.6.10)1、new Vue的时候传了一个对象,把该对象记为options,Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.$options,vm.$options.data()中的this指向vm.$options,而methodA和B并没有直...原创 2021-07-06 11:13:21 · 1020 阅读 · 0 评论 -
vue关闭el-dialog弹窗销毁dom、数据(有效版)
vue中关闭el-dialog时,再次打开新增页面上次的数据不会销毁,如何解决:最基本的使用v-if <el-dialog class="detail" v-if="visible" :title="title" :close-on-click-modal="false" :visible.sync="visible" @close="closed">js closed() { this.visible = false; this.isPass.原创 2021-07-02 19:54:04 · 5760 阅读 · 2 评论 -
vue.js中self.$emit和self.$on使用
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on.vm.$emit( event, […args] )触发当前实例上的事件。附加参数都会传给监听器回调。{string} event[…args]触发当前实例上的事件。附加参数都会传给监听器回调。vm.$on( event, callback )监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。{string | A.原创 2021-06-22 10:03:28 · 855 阅读 · 0 评论 -
element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框、table列表内容显示不全解决方式对于Transfer 穿梭框中的文字过长隐藏问题处理:1.实现效果:解决方式;1.<el-row :gutter="30"> <el-col :span="24" class="input-box"> <el-form-item label-width="70px"> <el-transfer id="transfer" :titles="['待原创 2021-04-20 12:01:23 · 3385 阅读 · 1 评论 -
ElementUI使用table时,取消鼠标点击、hover对某一行背景颜色变化
在使用ElementUI中的table时,往往会有这样的需求:针对某种状态对table表格中的某一行数据进行高亮显示,但同时又要取消鼠标点击事件和hover对高亮显示的行不受影响。具体的高亮显示,官网中有文档介绍:可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。实例:<el-table v-loading="loading.table" :data="data.list.items" fit :cell-s原创 2020-12-29 14:42:03 · 6245 阅读 · 4 评论 -
批处理快捷启动搭建脚手架CLI--接上一篇vue-cli搭建vue项目
如果你还不清楚如何利用脚手架搭建vue项目,请看博主上一篇文章,本篇博客博主想要做的是如何快速启动我们的脚手架cli。开始我也很困惑,我岂不是要每打开一次环境,都要打开cmd再cd进我的项目里,再使用npm run dev启动8,不会8,不会8,这样岂不是很滑稽。ofcouse,我们有更加简便的方法(批处理)。首先我们先这样,然后这样,再这样就可以了···嗯哼,接着看8:首先我们在桌面上新建一个txt文本文件,名为:npm run dev.txt,如图(博主使用的是notepad++,和文本编辑器一样原创 2020-11-06 15:19:49 · 186 阅读 · 0 评论 -
小白如何用vue脚手架搭建vue项目-详细步骤解读
突然热血来潮,实操了一把vue脚手架搭建全新vue项目,现将详细步骤贴出一.node环境安装。用vue-cli构建的项目是以node.js为基础的,可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包编译都与其有密切关系,总体说node.js为前端工程化提供了必要条件。之前看到过vue.js、webpack实现、node.js三者的关系:vue.js工程化=>webpack实现=>node.js(webpack基础)1.下载地址:https://node原创 2020-11-10 18:36:03 · 2080 阅读 · 0 评论 -
vuex使用小小谈
1.vuex简要说明vuex是专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。也就是说他的作用就是将应用中的所有状态都放在一起,集中式来管理。需要声明的是,这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧,如果不懂的话,建议先看看vue的基础知识再看vuex。2. vuex的组成结构示意图vuex的特点是把数据单独隔离,形成一棵树状图。单独隔离就意味着它有自己的原创 2020-11-05 15:41:06 · 225 阅读 · 0 评论 -
vue图表统计--采用echarts
项目中不乏会遇到图表统计功能,小白一枚。发现echarts非常好用,简单易上手。可参考官方文档:https://echarts.apache.org/zh/index.html,有多种图表类型,任俊采洁。我呢简单实现了折线图和饼图,浅谈如何与后端数据交互来更改图标内容展示,最重要的是拿到后端返回值去调用相应的setOption并向其对应位置填充值就行。1.折线图:drawLine(id) { this.charts = echarts.init(document.getElementById(id)原创 2020-11-04 18:30:28 · 3721 阅读 · 0 评论 -
弹出框遮罩层相互嵌,取消遮罩
在做图片展示时,弹出框遮罩层相互嵌套影响展示效果,设置属性 :oppend-to-body=“true”(遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上),即可解决。原创 2020-11-04 18:05:16 · 844 阅读 · 0 评论 -
table表格内嵌input、DatePicker等控件及其校验等等踩坑
最近遇到在table表格内嵌input、DatePicker等控件及其校验时,踩坑不断。小小总结做个记录,希望对大家有所帮助,词不达意,意识不清,胡言乱语稍稍见谅(大脑快死机···)在form表单中运用table实现列表填值功能,并对其进行校验。先看代码;eg:<el-form :model="formData" ref="formData" :rules="ZZrules"> <el-table v-loading="loading.table" :data="for原创 2020-11-04 17:55:57 · 1300 阅读 · 0 评论 -
vue DatePicker日期选择器时差8小时
vue中使用element-ui中的日期选择器组件时,会造成时区差。在向数据库中做保存时发现传输的时间参数和前端控件所选时间端不匹配(相差8小时), 调试发现与后端接口没有问题,是控件本身的原因。1.牵扯到国际时间和北京时间2.中国国家标准时间是东经120°(东八区)的地方时间,同格林威治时间(世界时)整整相差8小时解决方法:设置value-format 属性, 精确到时间段value-format=“yyyy-MM-dd HH” 即可.eg: <el-table-column原创 2020-11-04 17:34:03 · 7317 阅读 · 0 评论 -
watch 监听函数
1.在vue框架中有watch监听函数,用来监听数值的改变,监听对象可以是一个变量也可以是一个对象。我此次项目中监听的是日期选择器的变化。2.监听器(watch)是一个对象,要当成对象来使用。3.watch监听的函数接受两个参数:handler:function(newVal,oldVal),第一个参数表示改变后的新值,第二个参数表示改变前的值。监听的数据必须是data中声明过的或者是父组件向子组件传递过来的props中的数据,监听函数有两个参数:1>. immediate:组件加载立即触发回调原创 2020-11-04 17:15:10 · 3262 阅读 · 0 评论 -
vue监听键盘事件--回车登录举个栗子
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题:我们必须知道某个按键的keyCode值才能完成匹配,使用起来十分不便。 keyCode实际键值48到570到965到90a到z(A到Z)112到135F1到F248BackSpace(退格)9Tab13Enter(回车)20Caps_Lock(大写锁定)32Space(空格键)37Left(左箭头原创 2020-11-03 10:10:02 · 861 阅读 · 0 评论 -
统一社会信用代码校验规则
统一社会信用代码的构成 社会组织统一社会信用代码是为每个社会组织发放一个唯一的、终身不变的主题标识代码,并以其为载体采集、查询、共享、比对各类主体信用信息,设计为18位。如图: 统一代码的具体赋码规则如下: 第一部分(第1位):登记管理部门代码。暂按国务院序列规则,5表示民政部门。 第二部分(第2位):机构类别代码。“1”表示社会团体、“2”表示民办非企业单位、“3”表示基金会、“9”表示其他。 第三部分(第3-8位):登记管理机关行政区划码,参照GB/T 2260中华人民共和国行政区划代码标准。(原创 2020-10-28 16:22:41 · 18458 阅读 · 1 评论 -
vue对枚举值转换
最近再做项目中碰到了这样一个问题,前端vue对后端返回数据中的枚举值做处理。之前枚举值的转换都在后端返回dto中做处理,首次碰到这种问题,先将解决方案抛出,希望能帮到有缘人:<el-table v-loading="loading.table" :data="data.list.items" fit stripe highlight-current-row :cell-style="cellStyle" element-loading-text="玩命加载中" element-loading-s原创 2020-09-29 11:47:24 · 5188 阅读 · 2 评论 -
隐秘信息加密处理公用方法
在对隐秘信息公开暴露时,要对特殊部分进行加密处理,防止用户信息泄露造成损失。写了一个公用方法:/// <summary>/// 隐私信息特殊处理/// 加密规则参考支付宝开放平台文档:https://opendocs.alipay.com/open/common/105912/// 敏感信息类型 展示规范/// 身份证 显示前 1 位 + *(实际位数) + 后 1 位,如: 3****************3/// 银行卡 显示前 6 位 + *(实际位数) + 后 4 位,如:原创 2020-08-26 16:18:25 · 427 阅读 · 0 评论 -
如何利用开发者模式去转载优秀博主的博客
你有一种思想,我有一种思想,我们互相交换后就有两种思想。分享是一种美德,对于美好的事物乐于和他人分享,此种乐趣你懂的···如何利用开发者模式去快速转载他人优秀文章,帮助更多的人,小小总结:运用MarkDown编译器,如何利用—》利用Markdown可以解析html的特点(csdn编辑模式里可以修改,文章里也有),我们只要在开发者模式中,将需要转载的人的博客地址的文章部分的div块整个复制下来就行了。操作演示:打开浏览器的开发者模式,谷歌浏览器(Chrome)为F12(一般浏览器大都是F12),原创 2020-08-26 14:14:57 · 247 阅读 · 0 评论 -
常见安全规范-对敏感信息脱机处理
本文转自:https://docs.open.alipay.com/common/1059121. 常见开发场景安全开发指南1.1. 敏感信息使用场景敏感信息指用户的 身份证号、银行卡号、手机号 等身份信息。重要敏感信息的脱敏规范如下。敏感信息类型展示规范身份证显示前 1 位 + *(实际位数) + 后 1 位,如: 3****************3银行卡显示前 6 位 + *(实际位数) + 后 4 位,如:622575******1496..转载 2020-08-26 11:58:03 · 2411 阅读 · 0 评论 -
vue实现动态添加form表单
上篇博客介绍了如何动态实现table的新增表格,其实对于表格和表单的动态添加在日常场景中用到的还蛮多的,两者的实现都有着诸多相似之处,本篇博客小编带领大家揭开实现动态增加form表单的神秘面纱。图示最终效果:当点击新增购房人基本信息时,动态新增表单,并且可以根据索引通过点击删除来删除当前表单。和动态新增table表格一样,新增数据要以对象的形式push到数组里面去,删除还是依赖与splice函数。具体代码实现:<el-form ref="basicInformation" :model="b原创 2020-08-25 15:36:52 · 10286 阅读 · 4 评论 -
vue中table实现新增表格功能
删除功能会用到splice方法,对其说明:该方法是一个通用删除和插入元素的方法,它可以在数组指定的位置开始删除或插入元素。其包括3个参数:第一个参数指定插入的起始位置,第二个参数指定要删除元素的个数,第三个参数开始表示插入的具体元素,方法返回被删除的元素数组。觉得此方法很不错,所以也想尝试用C#实现一个。上代码:<el-table :data="purPeoInfors" style="width: 100%" :header-cell-class-name="headerStyle">原创 2020-08-25 11:30:07 · 1742 阅读 · 0 评论 -
父子页面传值--$emit和props属性应用
简单写一下对父子传值的理解:最近项目中用到的,整的的人头皮发麻父传子:父页面需V-bind绑定(简写:) 将父组件穿的值绑定在子组件上,如下图在子组件中需要用props属性接收父组件传来的值,比较推荐使用这种方法,如图在父传子时,需用到watch来进行监听。watch:监听数据的变化,在vue中,使用watch来响应数据变化。在使用watch时有一个基本特点,当值第一次绑定的时候,不会执行监听函数,只有值发生改变时才会执行。父传子动态传值时,子组件props首次获到父组件传到的默认值时,也需要执原创 2020-08-15 14:05:53 · 347 阅读 · 0 评论 -
Vue Router 实现动态路由跳转
项目中遇到路由页面跳转:// 添加事件addHandler() { this.$router.push({ path: "/purchaseAudit/agency", query: {PageIndex:1}, // name: "purchaseAudInfoAdd", 第二种方案 });},用path时需要加载全路径,即要组合父路径和子路径;用name时只需要其子页面的name即可,如上图所示。通过注入路由器,我们可以在任何组件内通过用this.router访问路由原创 2020-08-05 17:09:44 · 4185 阅读 · 0 评论 -
Element-UI+Vue使用cell-style=“cellStyle“改变单元格字体样式
项目中不乏遇到需要对table表格中的某些特殊字段进行标记,用cell-style="cellStyle"来控制区分作为一种特殊手段是再合适不过了,不多bibi,直接上车。cell-style=“cellStyle” 结合其回调方法**cellStyle(row, column, rowIndex, columnIndex)**来改变单元格样式上代码:1.这是一个可展开的table表格。<el-table v-loading="loading.table" :data="data.list.i原创 2020-08-04 19:09:06 · 19352 阅读 · 3 评论 -
Vue项目在data引用本地图片
1.最近在做项目中,碰到需要引用本地图片,苦觅资源,最终寻得这种个人感觉比较适用的解决办法。在vue项目中,本地图片一般放置在assets目录下的image文件中(针对我所遇到的项目),如下图所示:针对引用本地图片步骤:1.注入所要引用的图片;2.绑定3.data中直接调用注入的依赖...原创 2020-08-04 18:47:47 · 2413 阅读 · 0 评论