vue
沐风系大佬
我偷电瓶养你,联系方式qq:1215323732
展开
-
vue3 naive垃圾控件bug
vue3 naive原创 2022-10-21 10:59:24 · 1749 阅读 · 3 评论 -
render组件值未修改问题
render: (h, params) => { const { sortNum, id } = params.row; return h( 'Input', { props: { value: (sortNum || sortNum === 0) ? sortNum : '', size: 'small', maxlength: 4, }, ...原创 2022-05-06 13:14:25 · 320 阅读 · 0 评论 -
Vue封装双向数据绑定组件、对象传参
使用v-bind 对象传参v-model 传参v-bind:xxx.sync双向绑定传参<template> <div> <div>{{proxy.value}}</div> <h4>{{age}}</h4> <h3>{{modelProp}}</h3> <h2>{{syncProp}}</h2> <el-button @cl..原创 2022-01-11 15:53:01 · 529 阅读 · 0 评论 -
v-bind绑定对象
父组件子组件// 子组件this.myName = 111;this.myValue = 222原创 2021-08-10 14:13:49 · 772 阅读 · 0 评论 -
mixin和组件生命周期
总结: mixin生命周期总在组件生命周期之前执行mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted...原创 2021-07-06 11:50:23 · 857 阅读 · 0 评论 -
多层级vue Router递归取出最底层
/** * 取出所有最底层的路由 * @returns {Array} */export function flattenDeep(routeArr, arr=[]) { routeArr.forEach(route => { if (route.children && Array.isArray(route.children)) { flattenDeep(route.children, arr) } else原创 2021-04-30 15:10:36 · 418 阅读 · 1 评论 -
Vue.use为什么要使用install
疑问:Vue.use注册插件和Vue.prototype.xxx挂载方式有什么区别,使用Vue.use优势在哪,为什么使用,为什么不使用Vue.prototype.xxx从源码分析:// Vue源码文件路径:src/core/shared/util.jsexport function toArray (list: any, start?: number): Array<any> { start = start || 0 let i = list.length - start .原创 2021-04-19 13:30:39 · 557 阅读 · 0 评论 -
发布订阅者模式以及vue中使用解析
发布订阅模式:也称作观察者模式,定义对象间的一对多的依赖关系,当一个对象的状态发 生改变 时,所有依赖于它的对象都将得到通知; 编码中常用的场景://订阅事件window.addEventListener('click',()=>{ alert("监听到某事件")})//发布事件window.click() 举个例子:B是天气预报中心,用户A想从B处获取天气预报;A就要将自己的联系方式储存到B处,当天气预报更新以后,B发送天气信息给A; 此处:存储就相当.原创 2021-03-16 11:46:05 · 379 阅读 · 0 评论 -
vue报错整理
1.报错的原因是因为当前页面中的变量名与事件名一致发生了冲突原创 2021-03-09 14:26:03 · 87 阅读 · 0 评论 -
vue 自定义组件v-model实现双向绑定
model2.2.0 新增类型:{ prop?: string, event?: string }详细:允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。Example:Vue.component('my-checkb原创 2021-03-09 13:16:15 · 389 阅读 · 0 评论 -
vue之methods、computed、watcher
computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当msg属性值没有发生改变时, 多次访问 reversedMsg 计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的。computed中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set变成可读写属性, 但是methods中的成员没有这样的。<div id=".原创 2020-10-20 17:18:25 · 237 阅读 · 0 评论 -
监听DOM或div大小变化(echart变化resize)
window变化使用window.addEventListener('resize',()=>{...})div变化使用构造函数window.MutationObserverapi地址:https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObservervue中配合Echart使用//obverseEchartobverseEchart(){ let MutationObserver = window.MutationObser原创 2020-10-13 09:33:21 · 1239 阅读 · 2 评论 -
watch和computed用法
watch:var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // methods选项中的方法名 b原创 2020-09-27 17:22:54 · 138 阅读 · 0 评论 -
引入swiper样式报错npm install --save swiper/dist/css/swiper.css
查看swiper版本,高于6.0.0需import 'swiper/swiper-bundle.css'方式引入样式;低于6.0.0 import 'swiper/css/swiper.css'引入样式原创 2020-09-09 11:17:58 · 3578 阅读 · 0 评论 -
vue.js部分
1.变量判断function isUndef (v) { return v === undefined || v === null}function isDef (v) { return v !== undefined && v !== null} function isTrue (v) { return v === true }function isFalse (v) { return v === false}/** * Check if v原创 2020-09-08 17:17:57 · 92 阅读 · 0 评论 -
vue权限设置
由于addRoutes无法清除路由,所以每次退出重置权限需要刷新页面原创 2020-08-14 15:40:23 · 535 阅读 · 0 评论 -
vue实现淘宝 搜索记录(复用页面)
两个页面共同使用此页面,所以判断进入此页面的路由,分别存储和取出历史记录功能:搜索相同关键词位置提前,删除单个、删除全部、搜索记录去重vue组件<template> <div class="ledger_search"> <van-search v-model="search_value" show-action shape="round" placeholder="请输入搜索关键词" @search="onSea.原创 2020-07-29 17:24:12 · 728 阅读 · 2 评论 -
vue回到顶部
//回到顶部data:()=>{ return{ scrollTrigger:false }}methods:{ backTop() { if(this.scrollTrigger){ return; }else{ //防止多次点击 this.scrollTrigger = true; this.timer = setInterval(function() { let osTop = document.getElementsByClassName原创 2020-07-21 14:51:16 · 200 阅读 · 0 评论 -
vue+element+upload上传文件
<el-upload :on-change="uploadChange" class="upload-demo" drag multiple action="" :show-file-list="false" :file-list="fileList" :auto-upload="false"> <div v-if="fileList.length>0" class="fileBox"> <svg class="excel-file" aria-hidden="t原创 2020-07-03 10:57:41 · 384 阅读 · 0 评论 -
Element表单重置,无法置空
由于在挂载表单前设置了默认值,所以重置只会置为默认值解决方法:重置前,将表单设置控制,再重置,若不重置,无法消除表单校验提示原创 2020-06-10 10:38:42 · 898 阅读 · 0 评论 -
js调整后端字段名,删除‘_’并将后面首字母大写
//修改字段—_后首字母大写upCaseField(data){ let dataUpCase = {} Object.keys(data).map(im=>{ // console.log(im) let field = im.split('_') // Array let name = '' //判断没有'_'的字段名 if(field.length>1){ field.map((fd,fdIdx)=>{ //从第二个开始 if(fdI原创 2020-05-11 16:38:30 · 330 阅读 · 0 评论 -
vue+vant动态生成
v-for = (item,index)in 4 只渲染最后一条:::::::::将字符串4转为NUMBER格式;<div v-for="(item,index) in voltageTransform" :key="item"> <van-collapse-item :title="'电压互感器'+item" :name="'voltageTransform'+item"...原创 2020-05-07 14:36:51 · 1893 阅读 · 0 评论 -
vue-cli首页加载速度慢优化vender+vue预加载
1.vender文件过大;build文件下webpack.base.conf文件夹下modules.exports={ externals:{ 'vue':'Vue', 'vue-router':'VueRouter',//必须为VueRouter 否则undefined 'vuex':'Vuex', 'js-md5':'md5', 'echarts':'echarts',...原创 2020-04-22 16:13:32 · 686 阅读 · 0 评论 -
vue列表循环样式问题
其中样式无效果,列表循环忘记添加:key,无法区分原创 2020-03-24 11:49:10 · 375 阅读 · 2 评论 -
vue自定义可传参指令
Vue.directive('longpress',function(el,binding,vNode){ console.log(el,binding,vNode) let timer = null; var start = function(e){ if(e.type == 'click') return; if(timer==null){ timer = setTimeo...原创 2020-03-11 15:12:29 · 293 阅读 · 2 评论 -
前端读取表格
转载地址原创 2020-03-06 14:43:00 · 245 阅读 · 0 评论 -
vue项目开发环境无跨域,生产环境跨域问题
仅适用于自己目前项目,生产环境跨域解决办法,引入mockjs ,问题解决,问题原因不知道原创 2020-03-04 15:16:26 · 587 阅读 · 0 评论 -
vue scrollBehavior使用
const router = new VueRouter({ routes, mode: routerMode, strict: process.env.NODE_ENV !== 'production', scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosit...原创 2020-02-27 14:04:35 · 238 阅读 · 0 评论 -
vue mixins与vuex
mixins局部调用,不影响全局;vuex本地仓库,影响全局数据原创 2020-02-27 14:02:27 · 1088 阅读 · 0 评论 -
vue app拍照并裁剪上传——(步骤一)
<template> <div class="userImg" @click="uploadImg"> <div class="imgCont"> <div>头像</div> <div> <img :src="user_image" alt=""> <i class="ico...原创 2020-02-26 11:37:02 · 671 阅读 · 0 评论 -
裁剪图片并上传base64格式(步骤二)
npm i vue-cropper --save安装插件插件地址github搜索vue-cropper<template> <div id="cropper"> <div style="width: 100%;height: 100%;"> <VueCropper ref="cropper" :img="opti...原创 2020-02-26 10:39:06 · 284 阅读 · 0 评论 -
vue+Element+xlsx 导入并预览
下载插件 cnpm install xlsx --save引入import XLSX from ‘xlsx’element中prop可以为汉字这样就简单多了,省去解析的数据再去遍历修改成英文 注意prop中使用的是汉字<el-table :data="tableData" style="width: 100%"> <el-table-column v-for=...原创 2020-01-07 10:34:27 · 3498 阅读 · 4 评论 -
动态路由
新建util.jsexport const initMenu = (router, store) => { /**异步添加路由**/ return new Promise((resolve,reject)=>{ console.log('刷新2') let menuRoutes = JSON.parse(localStorage.getItem('user'))[4...原创 2019-12-17 11:01:13 · 165 阅读 · 0 评论 -
js正则
验证数字的正则表达式集验证数字:1*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数的正实数:2+(.[0-9]{2})?$验证有1-3位小数的正实数:3+(.[0-9]{1,3})?$验证非零的正整数:^+?[1-9][0-9]*$验证非零的负整数:...原创 2019-12-05 15:05:45 · 55 阅读 · 0 评论 -
vue中nextTick
https://www.jianshu.com/p/a7550c0e164f原创 2019-09-04 14:22:42 · 103 阅读 · 0 评论