![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
xiongdaandxiaomi
爱学习的小码农
展开
-
搭建Vue3工程化
搭建Vue3工程化原创 2023-03-24 15:42:32 · 634 阅读 · 1 评论 -
vue a-table 排序字段高亮
效果如图背景:按照哪个字段排序,对应列高亮显示<a-table :columns="columns" :data-source="data" /><style scoped lang="less"> /deep/ .ant-table-column-sort .ant-table-column-title{ color: red !important; }</style>...原创 2021-12-16 15:01:06 · 546 阅读 · 0 评论 -
antdesign vue a-table 单选勾选一行
页面效果页面methods中 onSelectChange(selectedRowKeys, selectionRows) { console.log('onSelectChange--',selectedRowKeys, selectionRows) this.selectedRowKeys = selectedRowKeys this.selectionRows = selectionRows },原创 2021-07-15 13:55:18 · 3557 阅读 · 0 评论 -
Lottie-前端实现AE动效,json文件引用
文章目录一、页面效果二、vue-lottie三、使用1、安装2、在main.js 引用3、代码中使用注意一、页面效果实际效果小树可以跳动二、vue-lottievue-lottie git地址 : link.三、使用1、安装npm install --save vue-lottie2、在main.js 引用import lottie from 'vue-lottie';Vue.component('lottie', lottie)3、代码中使用// html <div原创 2021-03-11 11:33:02 · 993 阅读 · 0 评论 -
vue全局引入过滤器
使用npm命令安装momentnpm install moment --savemain.jsimport * as filters from '@/utils/filter'Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})filter.jsimport Vue from 'vue'import Moment from 'moment'// 定义全局时间戳过滤器Vue.filte原创 2021-02-21 13:36:25 · 289 阅读 · 0 评论 -
computed使用场景
computed computed: { lnglat() { return { lng: this.click_station_info.lng, // 对应页面v-model“站点经度”,“站点纬度” lat: this.click_station_info.lat, }; }, },watch 经纬度的变化watch: { lnglat(n, o) { if (!n.lng || !n.lat) .原创 2021-01-18 10:50:05 · 524 阅读 · 0 评论 -
键盘控制swiper翻页
文章目录1、页面效果2、引入3、页面中使用欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1、页面效果2、引入3、页面中使用template中 <!-- Swiper原创 2020-12-14 10:04:59 · 527 阅读 · 0 评论 -
filters中的this问题,及在computed中调用函数
背景过滤器内this的指向是undefined,因而不能在过滤器内使用this引用组件实例的变量或者方法vue中过滤器更偏向雨文本数据的转化我们可以使用computed作为替代方案原创 2020-09-24 10:05:16 · 741 阅读 · 0 评论 -
Element UI 自定义正则表达式验证金额
form表单 <el-form-item label="计划付款金额" prop="plannedAmount"> <el-input v-model="form.plannedAmount" clearable placeholder="请输入计划付款金额" /> </el-form-item>校验规则 plannedAmount: [ { required: true, trigger: 'blur', message:'金额不能为空'},原创 2020-09-09 17:32:54 · 3723 阅读 · 0 评论 -
vue 面试总结(一)
文章目录一、v-if和v-for 哪个优先级更高二、key的作用三、双向绑定及其原理四、你了解vue中的diff算法吗一、v-if和v-for 哪个优先级更高先给出结论为什么是这样的他们能放一起吗如果不能,应该怎么办总结回答范例:6. v-for 优先于v-if被解析7. 我曾经做过实验,把他们放在一起,输出的渲染函数中可以看出会执行循环再判断条件8. 实践中也不应该把它们放在一起,因为哪怕我们只渲染列表中的一小部分元素,也得在每次渲染的时候遍历整个列表9. 通常有两种情况导致我们原创 2020-09-04 16:59:07 · 716 阅读 · 0 评论 -
elementUI 去掉form 表单单个校验
去除form表单默认校验的这两个值 this.$nextTick( ()=> { this.$refs['form'].clearValidate(['firstParty']); this.$refs['form'].clearValidate(['secondParty']); })拓展:移除所有表单项的校验: this.$refs[‘form’].clearValidate();resetFields() 和 .clearValidate() 区别t原创 2020-08-28 17:23:06 · 11972 阅读 · 1 评论 -
Error in v-on handler: “TypeError: Cannot read property ‘clearValidate‘ of undefined“
因为Dom元素没有加载完毕,导致refs取不到值,使用 $nextTick() this.$nextTick( ()=> { this.$refs['form'].clearValidate(['firstParty']); })原创 2020-08-28 17:17:09 · 2603 阅读 · 0 评论 -
vue backtop全局回到顶部组件
文章目录1、实现 BackTop.vue 组件页2、注册组件3、使用4、效果背景:当页面内容很多时,为了方便用户快速回到顶部1、实现 BackTop.vue 组件页<template> <div class="pages-content-scroll"> <el-backtop target=".pages-content-scroll" :visibility-height="visibleHeight" :原创 2020-08-14 16:25:46 · 1037 阅读 · 0 评论 -
vue 更改主体颜色,js与css的变量传递
页面效果实现代码原创 2020-08-04 16:47:32 · 831 阅读 · 0 评论 -
小型状态管理器Vue.observable
文章目录背景页面效果仅使用 state 方式自定义 mutation 复用更改状态的方式背景在一些小型项目或状态简单的项目中,为了管理几个状态而引入一个库,显得有些笨重,因而我们使用Vue.observable 可以帮助我们快捷的解决页面效果仅使用 state 方式store.js使用自定义 mutation 复用更改状态的方式store.js应用...原创 2020-08-04 11:18:30 · 296 阅读 · 0 评论 -
Vue定时器使用方法
1、基本用法<script> export default { mounted() { this.timer = setInterval(() => { ... }, 1000); }, beforeDestroy() { clearInterval(this.timer); } };</script>2、使用hook<script> export default { mount原创 2020-07-28 11:35:02 · 9731 阅读 · 1 评论 -
el-table 合并行
1、页面效果2、table3、 watch: { implementationList: { handler(n, o) { this.getSpanArr(this.implementationList) }, immediate: true } },methods: { //合并行 objectSpanMethod({ row, column, rowIndex, columnIndex }) {原创 2020-07-22 10:08:59 · 11076 阅读 · 7 评论 -
vue路由传参的三种方式
文章目录1、方案一1.1定义路由1.2 页面传参1.3 页面获取1.4 页面效果方案二2.1 定义路由2.2 页面传参2.3 页面获取2.4 页面效果方案三3.1 定义路由3.2 页面传参3.3 页面获取3.4 页面效果总结1、方案一1.1定义路由 path: '/circulation', component: () => import('@/views/reSeManage/circulation/index'), name: 'Circulation', met原创 2020-07-20 11:05:30 · 1963 阅读 · 0 评论 -
Element-ui 移除表单校验 clearValidate和resetFields
一、clearValidate 移除表单校验 初始化 一般用于添加form 表单修改时,点击“确定”按钮,提示 “金额不能为空”rules: { oneUpAmount: [ { required: true, trigger: 'blur', message:'金额不能为空'}, { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保原创 2020-07-06 15:00:51 · 6864 阅读 · 4 评论 -
vue项目中mockjs+axios实现前后端分离
文章目录方式一1、开始&安装2、使用3、控制台打印方式二1、页面效果2、创建mock.js3、main.js中引入mock.js4、在需要渲染的页面使用mockjs 官方文档: 直达链接.mockjs GitHub地址: 直达链接.方式一1、开始&安装安装npm install mockjs --save2、使用3、控制台打印方式二1、页面效果2、创建mock.js3、main.js中引入mock.js4、在需要渲染的页面使用...原创 2020-07-01 17:09:45 · 478 阅读 · 0 评论 -
vue eslint 报错 Identifier XXX is not in camel case
解决:“camelcase”: [1, {“properties”: “never”}],原创 2020-06-30 17:37:56 · 9510 阅读 · 1 评论 -
vue3.0脚手架搭建
1、安装vue-cli 3.0先卸载旧版本npm uninstall vue-cli -g再安装Vue CLI 3npm install -g @vue/cli安装成功查看版本 vue-V2、创建项目去指定目录下创建项目vue create project-name(自己定义项目名,不可使用驼峰式命名)3、选择配置(自定义配置)4、在css预编译我选择了less5、在语法检测工具选择了 ESLint + Standard config6、在选择语法检测方式中,这原创 2020-06-30 10:43:54 · 6100 阅读 · 0 评论 -
vue下拉框数据清空后,赋值无效
1、页面效果2、背景一级项目与二级项目联动,当选择“一级项目”后,清空“二级项目”选择框内容,此时出现赋值无效的问题。3、解决页面methodgetSecondName(){ this.$forceUpdate();}添加this.$forceUpdate();进行强制渲染,效果实现。因为数据层次太多,render函数没有自动更新,需手动强制刷新。...原创 2020-06-11 15:46:21 · 2458 阅读 · 0 评论 -
Vue 表单只提交修改过的部分
文章目录1、页面效果2、实现1.修改回显2.声明,method3.提交方法时调用1、页面效果2、实现1.修改回显注意: 在this.reset() 方法中每次清空 diffDatathis.diffData = {};2.声明,methoddata() { return { …… 之前的数据不变 form: null, //记录设备原始数据 diffData: null, //记录修改过的值 }}, /原创 2020-06-04 17:13:27 · 3684 阅读 · 2 评论 -
Vue路由导航两种方式router-link router.push
文章目录1、页面效果2、路由配置router.js3、html4、小结1、 带参数的路由2、 获取参数方法:1、页面效果2、路由配置router.js{ path: '/contract', component: Layout, hidden: true, children: [ { path: 'type/invoice/:dataId/:itemId/:number/:name', component: () =>原创 2020-06-02 14:13:00 · 676 阅读 · 0 评论 -
[Vue warn]: Error in render: "TypeError: date.getFullYear is not a function" found in
添加完毕点击“修改”按钮时报错解决方案如下1、rerurn 定义时,设置为null2、在时间控件添加 value-format原创 2020-05-11 18:11:20 · 13518 阅读 · 0 评论 -
vue项目整合ueditor,将其封装为公共组件
文章目录1、下载依赖2、引入组件3、注册组件4、绑定数据5、配置参数注意6、封装为组件使用7、页面效果8、拓展1、下载依赖npm i vue-ueditor-wrap -S2、引入组件import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module3、注册组件components: { VueUeditorWrap}// 或者在 main.js 里将它注册为全局组件Vue.component('vue-ueditor-wrap'原创 2020-05-09 09:44:42 · 1136 阅读 · 0 评论 -
Vue 自定义全局Loading组件
自定义标题1、页面效果2、思路3、Loading.vue 组件4、loading文件夹下的 index.js5、在main.js中注册6、引用1、页面效果2、思路在component文件夹下新建loading文件夹,用于存放Loading.vue,index.js 和其他依赖文件3、Loading.vue 组件<template> <div class="lo...原创 2020-03-20 18:05:39 · 2607 阅读 · 0 评论 -
vue中websocket心跳机制
参考链接直达:vue中websocket心跳机制原创 2019-11-07 15:30:02 · 1531 阅读 · 0 评论 -
流程公共组件封装,父子组件
父传子:用prop; props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值,Vue 警告。子传父:1,用ref ,父中通过this.$refs["***"].属性 可以得到子组件的data属性值,共享,能进行更改操作;2, 用eventBus 监听事件与触发事件;页面效果子组件...原创 2019-10-17 17:05:47 · 311 阅读 · 0 评论 -
中央事件总线插件 vue-bus
bus作为一个简单的组件传递事件,用于解决跨级和兄弟组件通信的问题。vue-bus 插件像vue-router和Vuex一样,给Vue添加一个属性$bus,并代理 emit、emit、emit、on、$off三个方法。vue-bus.jsconst install = function (Vue) { const Bus = new Vue({ methods: { emit (...原创 2019-05-22 11:32:20 · 640 阅读 · 0 评论 -
VUE设置浏览器标题及图标
修改后效果如下:1、将图片放入static目录下2、在index.html中添加title和link图片地址 <link rel="icon" href="static/favicon.ico" type="image/x-icon">保存并刷新浏览器,看浏览器图标已经正确设置上了。...原创 2018-10-23 14:06:09 · 6387 阅读 · 2 评论 -
Vue+WebSocket 实现页面消息提醒
项目中有些系统消息需要实时提醒,如果数据量不大的情况下可以考虑定时器。页面效果主要代码<script> export default { data() { return { websocket: null, } }, created(){ ...原创 2019-10-08 17:52:23 · 9690 阅读 · 6 评论 -
echarts 清空上一次加载的数据
目标效果及数据格式echarts目标链接后台数据格式Json中List类型,并遍历List中的对象 for(var i in sigleRow) { chargingPowerList.push(sigleRow[i].chargingPower); drivingMileageList.push(sigleRow[i].drivingMileag...原创 2019-09-20 18:25:49 · 27460 阅读 · 0 评论 -
vue单页面使用百度地图
需求:采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图展示功能,用于展示站点的分布情况。交互:点击某个站点,弹出站点的基本信息。地图支持聚合和缩放。页面效果在这里插入图片描述使用方式我这里只演示单页应用的开发方式。1.安装组件npm install vue-baidu-map --save2.注册组件组件的注册可以分为全局注册和局部注册,我这里采用的是局部注...原创 2019-08-12 18:04:22 · 1569 阅读 · 1 评论 -
前端使用AES加密和解密
在实际开发中,会用到前端请求后台接口时对请求参数进行加密处理。直接上代码:import CryptoJS from "crypto-js"; //秘钥const CRYPTOJSKEY= "abcdefgabcdefg12";// 加密encrypt(plaintText) { var plaintText = plaintText; var options = { ...原创 2018-11-22 15:16:23 · 20343 阅读 · 2 评论 -
vue使用li标签模拟树效果
返回数据格式为子节点和父节点字段名称不一致<el-tab-pane label="充电站"> <ul class="firstLevel"> <li v-if="item.chargingStationShortName" v-for="(item,index) in permissionData" :key原创 2018-11-12 18:17:45 · 1440 阅读 · 0 评论 -
element中获取选中行元素的ID
页面效果:接口说明使用table中selection-change方法获取当前记录的信息,去重获取选中记录的id@selection-change=“handleSelectionChangePeople” handleSelectionChangePeople(val){ console.log("人员信息val-",val); this.multipleSel...原创 2018-11-12 16:25:26 · 19265 阅读 · 2 评论 -
el-button默认第一个选中
<el-button type="success" plain size="mini" autofocus="true" @click="countCollum('countele')">充电电量</el-button><el-button type="success" plain size="mini" @clic原创 2018-11-13 18:03:56 · 24377 阅读 · 6 评论 -
使用Element时 默认勾选表格toggleRowSelection
页面效果:在页面初始化加载时将表格中某行默认选中使用方法:toggleRowSelection方法名说明参数toggleRowSelection用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)row, selectedtable表格渲染 &amp;lt;el-table :data...原创 2018-11-01 13:17:35 · 52627 阅读 · 13 评论