VUE.JS
前端杨小白
这个作者很懒,什么都没留下…
展开
-
vue安装npm时遇到 npm ERR! syscall rename npm ERR!错误解决办法
vue项目,安装npm时遇到了错误解决方案执行命令 :npm uninstall再重新执行:npm install即可原创 2021-03-30 10:47:46 · 7129 阅读 · 1 评论 -
vue post application/x-www-form-urlencoded传参的解决方案
在使用axios进行参数获取时,始终获取不到,但是调用postman是正常的,所以初步估计是参数格式不正确,那么正确的应该怎么写呢?一般按照正常的逻辑,我们在传递application/x-www-form-urlencoded时,参数应该这样写,但实际操作中发现一只获取不到参数。axios .create({ baseURL: 'url', timeout: 10000, headers: { 'Content-Type': 'application/json' },原创 2021-03-23 10:42:58 · 18716 阅读 · 0 评论 -
Vue-Axios请求传参格式
用post请求用query+body传参1.url里加上query需要传的参数(name:majuan)2.data里放入body要传的参数(tel)let tel = 11111 dd.httpRequest({ headers: { 'Content-Type': "application/json;charset=utf-8", }, url: 'http://192.168.0.0.1:3000/test?name=majuan'原创 2020-11-12 16:27:55 · 940 阅读 · 0 评论 -
vw 弹性布局解决方案
postcss-px-to-viewport将px单位转换为视口单位的(vw,vh,vmin,vmax)的PostCSS插件。简介如果你的样式需要做根据视口大小来调整宽度,这个插件可以将你CSS中的px单位转化为vw,vw本质上还是一种百分比单位,100vw即等于100%,1vw等于1/100视口宽度。安装$ npm install postcss-px-to-viewport --save-dev$ yarn add -D postcss-px-to-viewpo...原创 2021-03-10 13:57:16 · 605 阅读 · 0 评论 -
Vue3.0
teleportTeleport 提供了一种干净的方法,允许我们控制在 DOM 中哪个父节点下呈现 HTML,而不必求助于全局状态或将其拆分为两个组件。<teleport to="#modals"> <div>A</div></teleport><teleport to="body"> <div>A</div></teleport>eg:当前modal组件一般挂载在父组件下,想让原创 2021-03-10 13:51:58 · 229 阅读 · 0 评论 -
lang=“scss“动态拼接变量 设置背景图
HTML<div :class="['header', `header${num}`]"></div>data() { return { num: this.$route.query.num % 3 || 1, }},CSS<style lang="scss" scoped>$imgName: 1, 2, 3;%bgr { background-repeat: no-repeat; background-size: 10..原创 2021-03-03 16:05:05 · 5703 阅读 · 1 评论 -
VUE实现吸底
<template> <div id="test"> <ul class="list-box"> <li v-for="(item, key) in 50" :key="key"> {{ item }} </li> </ul> <p :class="['go', { isFixed: headerFixed }]"> 吸底按钮 <.原创 2021-03-01 14:10:06 · 1714 阅读 · 3 评论 -
van-swipe初始高度异常留白BUG处理
v-lazy 会导致van-swipe初始高度异常<van-swipe :autoplay="3000"> <van-swipe-item v-for="(image, index) in images" :key="index"> <img v-lazy="image" /> </van-swipe-item></van-swipe>van-swipe初始高度异常BUG处理 方案一:不使用懒加载模式 具体应用如下:.原创 2021-02-23 17:06:50 · 1873 阅读 · 0 评论 -
VUE页面不刷新时调用forceUpdate即可
VUE页面搞不定 页面不刷新时调用forceUpdate即可原创 2021-02-19 17:07:07 · 182 阅读 · 0 评论 -
VUE手写实现移动端el-table组件
最近用vue+vant进行开发,因为涉及到了表格,但vant里没有这个组件,自己就简单的封装了一下 未添加自定义CSS效果图:使用组件:src/components/layout/table/index.vue<template> <div> <f-table :data="tableData"> <f-table-col prop="name" label="姓名"></f-table-col>原创 2021-02-02 10:38:29 · 4910 阅读 · 2 评论 -
VUE防止路由重复点击报错
在router/index.js中添加如下代码import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)//防止路由重复点击报错const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch.转载 2021-01-22 10:52:27 · 877 阅读 · 0 评论 -
vue组件实现全屏倍速视频播放功能
组件设计:src/components/video/index.vue<template> <div class="video"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" > </video-play原创 2021-01-05 16:22:27 · 2072 阅读 · 3 评论 -
VUE报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent及解决方案
VUE报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "topActive"大概意思是:避免直接改变属性,因为每当父组件重新渲染原创 2021-01-05 15:42:41 · 156687 阅读 · 17 评论 -
vue3.0视频播放插件实现全屏倍速等(vue-vedio-player)
视频播放:vue-vedio-player安装插件npm install vue-video-player -s在main.js里面导入并引用import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css' Vue.use(VideoPlayer)使用<template> .转载 2020-12-29 14:11:52 · 4106 阅读 · 5 评论 -
在子组件中动态给父组件添加样式
在子组件中动态给父组件添加样式this.$parent.$el.style.fontFamily = this.textStyle.fontFamily在子组件中动态给父组件/爷爷组件添加样式// 父级是否为aaathis.$parent.$el.id == 'aaa' ? (this.$parent.$parent.$el.style.fontFamily = this.textStyle.fontFamily) : (this.$parent.$el.style.fontFam原创 2020-12-18 16:02:44 · 1264 阅读 · 1 评论 -
VUE报错: Avoided redundant navigation to current location【解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题】
在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复解决:router文件夹下面的index.js中加上下面几句代码,搞定// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {.转载 2020-12-10 17:51:20 · 240 阅读 · 0 评论 -
查看项目中vue版本以及@vue/cli版本
vue版本:npm list vue@vue/cli版本:vue -V原创 2020-12-03 11:24:54 · 3746 阅读 · 0 评论 -
VUE动态绑定class
方案一:三元表达式形式<p :class="showTopTitle ? 'text' : 'dispaly'">测试</p>方案二:对象形式<p :class="{ rate: true, [addColor(detailData.annualReturn).color]: true }">测试</p>方案三:对象形式<span :class="{ 'lable-item': true, scale: width < 3原创 2020-11-13 15:50:47 · 164 阅读 · 0 评论 -
vue给页面设置但单独的<title>
{ path: '/benefitCard', name: 'BenefitCard', component: BenefitCard, meta: { title: '题目', content: { keywords: '关键词', description: '余益惠xxxxxxxxxx描述', }, },},router.beforeEach((to, from, next) => { /* 路由发生变化修改页面ti.转载 2020-11-09 18:05:53 · 531 阅读 · 0 评论 -
vue让跳转路由参数不在地址栏显示
src/router/index.js:路由配置 配置nameexport default new Router({ routes: [ //发送的页面 { path:'/chat', name:'chat', component: chat }, //接收参数的页面 注意这个name { path:'/taskCenter', name:'taskCenter', co原创 2020-11-09 10:38:03 · 20568 阅读 · 3 评论 -
vue移动端跳转置顶
问题描述:从vue一个滚动的页面A跳转到另一个界面B,页面B没有置顶。要跳转到的组件内添加代码:组件内的钩子beforeRouteEnter: function(to, from, next) { window.scrollTo(0, 0) next()},vue 移动端页面跳转置顶问题vue移动端跳转置顶vue 移动端项目切换页面,页面置顶vue-router全局钩子函数+单个路由钩子函数+组件内钩子函数...原创 2020-10-30 15:15:34 · 218 阅读 · 0 评论 -
Vue单独为组件设置body的css样式
beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#f6f7fa')},beforeDestroy() { document.body.removeAttribute('style')},原创 2020-10-30 14:36:55 · 3508 阅读 · 0 评论 -
vue.js中的computed计算属性如何传递参数
computed:注意不能直接在photoList后面加参数,没效果(应该是vue不支持),应该以JavaScript闭包的形式:computed: { photoList() { return function(value){ var imgList = []; for(var i=0;i<value.length;i++){ imgList.push({src: value[i]});转载 2020-10-22 15:46:54 · 5045 阅读 · 1 评论 -
vue项目在浏览器地址栏设置favicon.ico图标
将图标文件放在本地项目static\images文件夹下修改index.html代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>测试</title> <li原创 2020-08-12 11:43:01 · 1110 阅读 · 0 评论 -
vue获取当前页面路由
当前页面完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params判断当前路由不匹配时跳转if(this.$route.path!='/Home'){ this.$router.push({ path:'/Home', })}...原创 2020-08-10 16:40:51 · 21096 阅读 · 1 评论 -
VUE实现吸附侧边栏效果
默认初始状态:按钮吸附侧边栏 隐藏效果鼠标移入:显示按钮点击按钮执行相应操作:显示测试区域<template> <div class="home" id="home"> <div :class="{'hand':true,'fold':true,'fode2-choose':foldClass}" @click="show" @mouseover="mouseOver" @mouseleave="leave"&g...原创 2020-08-06 16:35:23 · 2596 阅读 · 0 评论 -
element+vue鼠标右键显示菜单
<template> <el-container style="height: 630px"> <el-aside width="300px"> <el-tree :data="productTypes" :props="defaultProps" node-key="id" @node-contextmenu="rightClick" @node-click="handlC.转载 2020-08-04 13:47:05 · 1558 阅读 · 1 评论 -
VUE指定的页面缓存
src\router\index.js{ path: '/Home', component:Home, meta: { keepAlive: true }},src\App.vue<template> <div id="app" v-title data-title="作战仿真平台"> <keep-alive> <router-view v-if="$route.meta.keepAlive">原创 2020-05-29 16:17:01 · 757 阅读 · 0 评论 -
将this下的某个属性方法指到window下 方便直接调用
src\main.js将this下的某个属性方法指到window下 方便直接调用window.$message = this.$message在VUE文件中 或封装的js库中直接调用 调用方式如下$message.success(`${this.attrTitle}成功`); 完整代码src\main.jsimport Vue from 'vue'import '@/assets/scss/index.scss'import '@/assets/scss/custom.s.原创 2020-05-27 15:13:09 · 413 阅读 · 0 评论 -
VUE数据更新滚动条定位在最底部 视图展示最新几条数据
<div class="journal" id="text"> <el-row type="flex" justify="space-between" class="m-b-5 m-t-5"> <el-col :span="12"> <h2 class="h2style" @click="timer">日志</h2> </el-col> <el-co.原创 2020-05-25 11:18:22 · 1263 阅读 · 0 评论 -
vue实现可拖拽可缩放功能
安装vue-draggable-resizable插件npm install --save vue-draggable-resizable全局注册组件main.js中写入:import Vue from 'vue'import VueDraggableResizable from 'vue-draggable-resizable'// 可选择导入默认样式import 'vue-draggable-resizable/dist/VueDraggableResizable.css'Vu.原创 2020-05-22 16:59:54 · 2957 阅读 · 0 评论 -
VUE 爬坑之旅 -- 引入静态资源的正确方式
在 Vue 项目中,静态资源文件有二个位置可以存放,分别为 src 里面的 assets 文件夹和外层的 static 文件夹,从文件夹名字上面就可以大概的看出有何区别。assets :资产,资源static :静态的同样都是放资源的位置,为什么会有二个地方,他们之间有什么区别呢?在我原来的项目里面,我都是把各种资源文件放到 assets 里面,这样在打包的时候 webpack 会自动把资源给你压缩,比如把 png 图片压缩成 base64 格式,当时觉得这样好啊,自动压缩资源,减小项目体积,好东转载 2020-05-18 11:07:04 · 1575 阅读 · 0 评论 -
vue动态路由:路由参数改变,视图不更新问题的解决
问题描述:使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下:原因分析:具体原因在vue官方文档:响应路由参数的变化一节中有讲过:当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch.转载 2020-05-12 17:08:35 · 1942 阅读 · 0 评论 -
VUE去除绑定回显数据中的空格:v-model.trim
<el-input v-model.trim="item.value" type="textarea" autosize></el-input>原创 2020-04-30 11:42:07 · 2943 阅读 · 0 评论 -
VUE控制台报错: [vue-router] Duplicate named routes definition: { name: "NotFound", path: "*" }
VUE控制台报错: [vue-router] Duplicate named routes definition: { name: "NotFound", path: "*" }将下面写法{ path: "*", name: 'NotFound', redirect: "/404"}改为{ path: "*", redirect: { name: ...原创 2020-04-29 09:48:38 · 3067 阅读 · 0 评论 -
VUE实现延时请求接口
var setTimeFlag = null;ratioStep(urls){ var vm=this if(setTimeFlag != null){ clearTimeout(setTimeFlag); } setTimeFlag=setTimeout(()=>{ request.get(apis.runSimTask)...原创 2020-04-25 15:54:47 · 4520 阅读 · 0 评论 -
VUE项目部署到tomcat服务器-前端配置
说明对于前后端分离项目,后端通常直接用springboot以java -jar启动,或者打成war包放置tomcat中;前端工程使用webpack打包在dist文件夹下,再将statis和index.html放置到nginx等服务中。对于后端开发者而言,将后端和前端统一部署在tomcat下的有点如下:tomcat包解压即用非常方便 无需再安装nginx服务(若机器上无nginx或无sudo...转载 2020-04-25 11:14:15 · 3124 阅读 · 0 评论 -
VUE报错because it violates the following Content Security Policy directive
VUE启动服务后控制台报错:Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not expli...原创 2020-04-24 10:43:38 · 11144 阅读 · 0 评论 -
vue路由切换报错message: "Navigating to current location (XXX) is not allowed"的解决方案
操作:在VUE项目中点击两次路由切换原因:在路由跳转的时候同一个路由多次添加是不被允许的解决方案(两种):1.切换版本回3.0版本2.重写路由的push方法【在src/router/index.js 里面import Router from 'vue-router'下面写入下面方法即可】import Vue from 'vue' //如果已引用,不需要重复引用i...转载 2020-04-23 14:47:27 · 574 阅读 · 0 评论 -
VUE根据token,路由判断用户登录状态并跳转登录页
router.beforeEach((to, from, next) => { var token = library.getData("userName"); //如果没登录,都导向登录页 if (!token) { if (to.path !== '/Login') { next({ path: '/Login' }) } else {...原创 2020-04-23 13:33:46 · 2798 阅读 · 0 评论