vue
关注
分享
扫一扫
摇摇奶昔x
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue.js 中 “require is not defined“
解决 Vue.js 中 “require is not defined” 错误当你在 Vue.js 项目中使用 require 时遇到 “require is not defined” 错误，这通常是因为你的项目使用了而不是 CommonJS 的 require 语法。解决方案。原创 2025-06-12 11:30:02 · 1298 阅读 · 0 评论 -
当接口数据没有值，.length 会报错，可以使用 && 或者 ？解决
一、&&data && data.list && data.list.length-1二、？原创 2021-09-22 13:55:15 · 412 阅读 · 0 评论 -
vue中使用计时器setInterval的坑
vue中使用计时器setInterval的坑vue中的setInterval在页面离开之后仍会执行，在切换多个路由之后，定时器的速度会越来越快。加入下面代码，问题解决。beforeDestroy() { if(this.timer) { clearInterval(this.timer); }}...原创 2021-06-22 09:22:18 · 1050 阅读 · 0 评论 -
如何快速完全删除node_modules
1.安装npm包–rimrafnpm install rimraf -g2.在cmd指令下，进入所需删除的node_modules文件夹的位置，再输入指令rimraf node_modules3.简单粗暴得秒删完成转载：https://blog.youkuaiyun.com/qq_38209578/article/details/84983868...转载 2021-01-04 11:31:54 · 1356 阅读 · 0 评论 -
同时接收子组件和父组件的参数 ----- vue arguments的使用
arguments是一个参数集合，里面可以是子组件传过来的参数，也可以是父组件自己的参数<listBar @click="listBarClick($event,data,node,'444444444')" />listBarClick() { const argus = arguments console.log(argus)}实例：传值：接收：...原创 2021-01-04 11:06:01 · 444 阅读 · 0 评论 -
vue v-for遍历对象
语法格式(value,key,index) in user其中： key,和index是可选参数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--引入最新的vue稳定版本--> <script type="text/javascript" src="ht原创 2021-01-04 10:44:08 · 742 阅读 · 0 评论 -
router-link的to属性学习
其实这个组件有点像原生 HTML 中的 a 链接，而 to 属性 就相当于 a 链接中 href 属性类型: string | Location required 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。<!-- 字符串 --><router-link to="home">Home</router-link><!-- 渲染结果 --><a转载 2020-11-23 11:00:10 · 2056 阅读 · 0 评论 -
vue的$方法
let vm = new Vue({ el:'#app', data:{msg:'hello',arr:[1,2,3]}, mounted(){ this.$nextTick(()=>{ console.log(vm); }) } })<div id="app"> <p ref="myp">{{msg}}</p> <div .转载 2020-11-12 11:06:01 · 988 阅读 · 0 评论 -
vue监听滚动事件 实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）
HTML<div class="fixed" id="searchBar"></div>CSSfixed { position: fixed; bottom: 100px; top: 300px;/*开始处于距离顶部300px的位置，之后随着滚动条滚动top值改变，然后在top==100时停止*/ left: 218px; box-sizing: border-box; z-index: 2;}VUEmounted () {//给windo转载 2020-11-12 10:13:09 · 2514 阅读 · 0 评论 -
Vue 使用Scss预处理Css，在使用深度作用选择器修改局部ui默认样式时，/deep/报错不生效
深度作用选择器有>>>和别名/deep/基本在纯css中使用，类似Sass，less的Css预编译器一般都用/deep/。出现的问题最近在写项目的时候（使用eslint-standard代码校验），我用Sass(dart-Sass)使用/deep/修改局部默认ui样式的时候，发现终端报错，并指明是/deep/这块的错误。报错如下了解到现在可以使用::v-deep去代替/deep/::v-deep .van-notice-bar__wrap { height: 3转载 2020-11-06 10:02:44 · 1410 阅读 · 0 评论 -
element ui 弹出组件的遮罩层以及多层遮罩解决办法
做项目中遇到几次弹出框遮罩层的问题。有嵌套的 弹出框。还有单页面中tabs标签页的弹出框。今天就说一下tabs中的弹出框遮罩层的问题。这个页面有五个tabs页签，每一个都有弹出框组件，也就是说每一个都有遮罩层。很有趣的问题： 我在第五个tabs页签中打开弹出框，没问题。可以正常使用。当我在第四个tabs页签中打开弹出框时，会出现上图这种情况，（鼠标点击一下，一层遮罩就会消失）。当我在第一个页签中的时候，我需要点击五次才能将最上层的遮罩层去掉。查看网上，以及element文档。找到了两个方法。如果你转载 2020-11-06 09:45:51 · 9236 阅读 · 1 评论 -
element-ui表格翻页的序号递增
1.直接写dom里<el-table-column label="序号" :show-overflow-tooltip="true" width="70" align="center"> <template slot-scope="scope">{{ scope.$index+1+(parseInt(pageIndex)-1)* parseInt(pageSize) }}</template></el-table-column> <el-ta原创 2020-11-06 09:42:22 · 408 阅读 · 0 评论 -
使用VsCode写Vue.js注释有误的解决办法
环境：vscode 1.8.1vue 21）症状。你们用Vscode 写 Vue 的时候，真的没遇到这个问题？：当我想注释某个地方的时候，行或块都算。我兴奋地按下了 alt+/啪！这注释简直让人感动！！！有木有 ????????????????2）解决办法。vscode 插件超市中所有关于VUE的插件都用了，到是找到一个一劳永逸的方法：1.安装Vue 2 Snippets插件2.在settings.json中加入这个："files.associations": {"*.vue": "转载 2020-10-13 09:06:31 · 1057 阅读 · 1 评论 -
vue的v-model和自定义组件的model
前言vue-property-decorator,@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里 重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：...原创 2020-08-13 10:54:39 · 286 阅读 · 0 评论 -
js-数组/对象深度复制的方法
对象、数组，这类元素在电脑中其实是以指针形式（也就是一个地址）保存，所以浅复制（var a = {}; var b = a;）会使得修改 b 时 a 也随之改变（因为两者是引用同一个对象的地址）。所以复制时为了不修改原对象/数组，就需要深度复制。一般是向内递归到不再是数组对象再复制（因为字符串数字这类就是直接存储、没有深浅复制的区别）。记录一下自己的常用方法（格式是从vue项目里拿的，用的es6;es5就’let’换’var’）：//深度复制对象 cloneObj(obj) { let n转载 2020-07-23 14:34:16 · 251 阅读 · 0 评论 -
前端实现点击下载图片
方法一:使用a标签的download属性。<a href="1.jpg" download="1.jpg">下载图片</a>注意：实现点击下载的前提是要下载的图片是同源的，非IE浏览器中会直接跳转到该图片的预览地址方法二: vue中点击触发方法下载图片<img :src="codeImg" alt="二维码图片" style="width:60%;"><span @click="downloadCodeImg()"></span>原创 2020-07-21 10:46:17 · 8074 阅读 · 1 评论 -
定义vue 全局方法（单个或多个）
单个方法1.新建goBack.jsvar goBack = function() { xxx}export default goBack;2.main.js中引入并定义import goBack from '../static/js/goBack';Vue.prototype.$back = goBack; //用$与组件内自定义的函数区分，其他符号也可以3.组件中使用go: function() { this.$back(); }多个方法原创 2020-07-21 09:11:42 · 686 阅读 · 1 评论 -
轮播图组件实现淘宝详情页商品效果
vue-agile 官网地址https://github.com/lukaszflorczak/vue-agiledemo源码编辑地址 https://codepen.io/collection/AdRzJW/官方事例中是下图在这里插入图片描述直接修改源码显然不合适 而暴漏出来的属性设置也没有该模块的内容 所以我在此通过修改样式的方法 从右图变成左图 首先说下大概思路：a:首先将缩略的轮播通过旋转放置到上图中的左图所示b:其次位置通过绝对定位固定设置c:整体旋转后会出现图片内容旋转的.转载 2020-07-20 10:38:54 · 1893 阅读 · 0 评论 -
pc端滑动加载更多 vue组件vue-data-loading
A)封装的加载更多组件<template> <div class="loadMore"> <vue-data-loading :loading="loading" :completed="completed" :offset="-1" :listens="['infinite-scroll', 'pull-down']"转载 2020-05-14 10:27:20 · 757 阅读 · 1 评论 -
基于vue展开收起动画
有一段时间没用vue动画了，就忘了，又仔细去看了vue官网 的过渡&动画，记录下来方便快速使用 (可以多看vue官网 过渡&动画 实现更多效果)1、实际效果展开收起效果.gif2、代码<!--css-->.box{ height:200px;width: 200px; background-color:black;}.dra...转载 2020-04-30 11:51:11 · 1119 阅读 · 0 评论 -
vue-cli项目中将时间戳的日期格式转换成年月日（时分秒）
记得angular js中时间戳转化成正常日期格式，只要使用filter属性{{time|‘YYYY-MM-DD HH:mm:ss’}}就可以了，本以为vue也可以，试验了然而并不好用；所以在网上找了方案，需要使用时间转换的插件moment。解决步骤如下：在node环境下一、npm install moment --save二、main.jsimport moment from ‘mo...转载 2020-04-30 11:46:07 · 2978 阅读 · 3 评论 -
js各种特殊字符的正则表达式
1 数字：1*$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字：^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$8 正数、负数、和小数：^(-|+)?\...转载 2020-04-29 11:33:35 · 3823 阅读 · 0 评论 -
jeecmsv9-adminVue 打包出错
F:\jeecms\jeecmsv9-adminVue>node build\build.jsbuilding for production…Error processing file: static/css/app.d79d7e4222e14aa22beb1d61f3b4cfab.css(node:18376) UnhandledPromiseRejectionWarning: Cs...转载 2020-04-29 11:31:29 · 352 阅读 · 0 评论 -
从列表页点击进详情页再返回列表页 应该还是之前的页码
1.改成可以走缓存的<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>...原创 2020-04-24 18:09:12 · 1313 阅读 · 0 评论 -
nodejs/webpack项目提示Invalid Host header （通过参数disableHostCheck控制）
nodejs项目在本地访问正常，然而部署到服务器上就提示Invalid Host header。原因：新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。解决方法：disableHostCheck: true例如：devServer: { contentBase: path.resolve(__dirna...原创 2020-04-07 18:03:21 · 6936 阅读 · 0 评论 -
浏览器保存账号密码乱填充现象
先搞懂原理原理很简单，浏览器记住密码后只要识别到一个type为text后又紧接着一个password时默认填充之前浏览器记住的账号密码。解决方案1.把input type=”password” 改成 input type=”text” 并在后面加上 οnfοcus=”this.type=’password’”，2.在文档加载完成后将密码输入框设置为空：window.load = fun...原创 2020-04-07 14:35:00 · 471 阅读 · 0 评论 -
vue 获取动态元素高度--采坑
页面中搞一个区域用来scroll列表，所以必须要获取scroll-wrap的高度，于是想尽办法获取swipe、navbarBox的高度<div v-if="data[column]"> <div class="columnPage" v-for='(item,index) in data' v-show='column == index'> <div c...原创 2020-03-30 15:06:22 · 4028 阅读 · 0 评论 -
vue前端开发--图片查看大图插件 vue-photo-preview
使用方法安装npm install vue-photo-preview --save引入配置# 引入import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)直接使用//在img标签添加preview属性 preview值相同即表示为同一组&l...转载 2020-03-30 14:07:46 · 687 阅读 · 0 评论 -
mapState的使用（常用）
mapState作用：可以辅助获取到多个state的值怎么使用？1.在.vue组件中引入,在js块中引入import { mapState } from 'vuex'2.在.vue组件中computed下定义一个对象computed：{...mapState([ //mapState本是一个函数，在里面写一个数组，记得加...‘num’ ， //存的数据‘id’]...原创 2020-03-30 11:55:59 · 8185 阅读 · 1 评论 -
Vue router的钩子函数
Vue router的钩子函数在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总体来讲vue里面提供了三大类钩子，两种函数1、全局钩子2、某个路由的钩子3、组件内钩子两种函数：1、Vue.beforeEach(function(to,form,next){}) /在跳...原创 2020-03-30 11:20:18 · 1553 阅读 · 1 评论 -
iviewui和element中日期选择控件少一天问题
iviewui中日期选择控件DatePicker<DatePicker v-model="studentObj.birthDate" type="date" placeholder="选择日期"></DatePicker>//修改为<DatePicker v-model="studentObj.birthDate" type="date...原创 2020-03-27 14:20:20 · 289 阅读 · 0 评论 -
组件内的导航守卫---
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变...原创 2020-03-27 14:02:17 · 230 阅读 · 0 评论 -
vue中页面提示是否保存再离开
mounted(){ window.addEventListener("beforeunload", this.actBeforeUnload,false); }, //离开新增页、编辑页记得解绑，否则其他页面中也会出现提示的效果 beforeDestroy() { window.removeEventListener("beforeunload",this....原创 2020-03-27 10:26:58 · 5242 阅读 · 2 评论 -
vue 的点击事件怎么获取当前点击的元素
<button @click = “clickfun($event)”>点击</button>methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 }}...原创 2020-03-26 09:58:08 · 1689 阅读 · 0 评论 -
img标签的onerror事件（应用以及注意事项）
情景：img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。使用img的onerror事件，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，图片不存在将显示 logoError.png。解决方法一、图片路径错误使用默认图片站位：使用1：html开发中&...原创 2020-03-25 14:29:13 · 9984 阅读 · 2 评论 -
vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template> <script> exp...转载 2020-03-13 10:12:44 · 578 阅读 · 0 评论 -
Vue+mui实现图片的本地缓存
const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = p...转载 2020-03-13 09:44:24 · 405 阅读 · 0 评论 -
vue路由传参的三种基本方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$...转载 2020-03-11 09:32:09 · 122 阅读 · 0 评论 -
vue的model选项和自定义组件的v-model
前言vue-property-decorator,@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里 重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：...转载 2020-03-09 11:59:47 · 2126 阅读 · 0 评论 -
vue h5页面长按保存为图片
npm install html2canvas -d<template> <div class="index"> <div id="captureId" class="capture" v-show="firstFlag"> <ul> <li>itemi</li>...转载 2020-03-03 15:36:04 · 2400 阅读 · 0 评论