vue
朽木自雕xmzd
朽木自雕
展开
-
vue禁止鼠标滚轮事件(禁止弹窗后面的遮罩层下的背景滚动)
vue禁止鼠标滚轮事件(禁止弹窗后面的遮罩层下的背景滚动)代码如下代码如下原理: 监听visible的变化,然后通过禁止、解除鼠标滚轮事件来禁止背景滚动<<template> <div class="dialog-wrapper" v-show="visible" @click.self="close"> <div class="dialog target"> <slot></slot> </div&原创 2021-07-22 10:08:12 · 1633 阅读 · 0 评论 -
vue配置全局使用scss的变量和函数
vue配置全局使用scss的变量和函数一、安装sass-resources-loader二、在vue.config.js中添加配置三、使用及效果图一、安装sass-resources-loadernpm i sass-resources-loader -D二、在vue.config.js中添加配置mixin.scss为需要全局访问的装有变量和函数的文件module.exports = {// 下面是要增加的配置 chainWebpack: config => { const原创 2021-04-27 10:23:02 · 1380 阅读 · 0 评论 -
cordova打包vue项目页面白屏及不显示图片问题解决
cordova打包vue项目页面白屏一、遇到的问题二、分析与解决一、遇到的问题在使用Cordova打包vue项目时,使用cordova run android进行真机调试,app总是显示白屏,也就是vue的那一部分代码没有起作用二、分析与解决试了很多种网上的方法,发现都没有什么用,都是过时的解决办法。最后发现是因为路径的原因导致的。vue项目依赖: "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "原创 2021-04-26 18:01:42 · 1753 阅读 · 0 评论 -
[Vue warn]: Computed property “userInfo“ was assigned to but it has no setter.
[Vue warn]: Computed property "userInfo" was assigned to but it has no setter.一、报错信息二、报错代码三、报错原因四、解决办法一、报错信息[Vue warn]: Computed property “userInfo” was assigned to but it has no setter.二、报错代码computed: { ...mapState({ userInfo: state => state.原创 2021-03-29 16:38:28 · 3354 阅读 · 1 评论 -
Vue多环境配置
Vue多环境配置一、需求二、项目目录三、添加配置文件四、使用五、启动脚本六、跨域一、需求由于开发环境和生产环境的配置文件不一样,所以要进行自动化加载对应环境的配置二、项目目录三、添加配置文件.env.devNODE_ENV = 'development'VUE_APP_MODE = 'dev'VUE_APP_API_URL = 'http://localhost:8080'VUE_APP_UPLOAD_URL = 'http://localhost:8080'outputDir = d原创 2021-03-22 15:49:19 · 1023 阅读 · 0 评论 -
使用Docker部署django+nginx+uwsgi+redis+celery+mysql+vue项目
使用Docker部署django+nginx+uwsgi+redis+celery+mysql+vue项目一、项目需求二、项目结构三、具体配置四、常用命令(嫌敲命令烦的可以看第五不)五、docker可视化工具portainer(可装可不装)一、项目需求技术要求:了解docker常用命令以及会使用下面使用到的技术部署环境:腾讯云ubuntu18.04本地开发系统:MacOS远程工具:FinalShell(推荐,超级好用)后端技术栈:python、django、nginx、uwsgi、redis、c原创 2021-03-22 14:27:12 · 1409 阅读 · 0 评论 -
自定义事件同时接收父组件和子组件的参数
自定义事件同时接收父组件和子组件的参数需求:自定义了一个事件,使用$emit进行派发,此时传递了一个参数this.$emit('current-change', this.internalCurrentPage);父组件进行监听,传递一个数字6过去@current-change="handleCurrentChange(6)"控制打印发现val为6,num为undefined,说明子组件的参数没有接收到 handleCurrentChange(val,num)...原创 2020-12-22 16:05:01 · 298 阅读 · 0 评论 -
Vue.extend你所不知道的秘密
Vue.extend你所不知道的秘密原创 2020-11-25 11:42:41 · 365 阅读 · 0 评论 -
vue如何动态绑定img的src的同时给它一个默认的图片
vue如何动态绑定img的src需求场景:当获取不到用户的头像时,需要一个默认的头像作为展示解决办法:使用require引入图片就可以了 <img class="item-img" :src="headIMG(item.HEAD_URL)" /> methods: { headIMG(img) { const imgData = require('./img/[email protected]') return img ?原创 2020-11-12 18:35:47 · 554 阅读 · 0 评论 -
vue-cli4使用全局less文件中的变量该如何配置
目录结构如下:需求:在Navgation.vue中使用global.less中的变量vue-cli3的配置方法如下:传送门vue-cli4的配置方法如下:安装 style-resources-loadernpm i style-resources-loader -D在 vue.config.js 中加上如下配置,没有则创建该文件,文件名不能改,如下:// vue...原创 2020-02-10 19:58:23 · 5917 阅读 · 0 评论 -
vue-cli3自动消除console.log()的调试信息
vue-cli3自动消除console.log()的调试信息在vue-cli3里面已经有这个功能了,只需要开启这个功能就行了,默认是关闭的找到生产环境的配置文件 然后找到 UglifyJsPlugin 这个插件添加一行代码...原创 2020-02-05 14:52:49 · 3202 阅读 · 0 评论 -
django+nginx+uwsgi部署vue项目
一、需求分析前端:vue.js,后端:python+django服务器:腾讯云( ubuntu18.04.1 LTS )使用 nginx + uwsgi 将该项目部署到服务器上二、准备将vue项目打包到dist 目录,能在开发环境正常运行的 准备好django项目,能在开发环境正常运行的三、将vue项目的dist目录放到django中将vue项目打包后的dist...原创 2020-02-05 01:15:53 · 1637 阅读 · 9 评论 -
使用vue-cli搭建的vue项目中,把项目发布到服务器上时,使用域名访问可以出现页面,但是ajax请求的URL中带有undefined,无法获取到数据
使用vue-cli搭建的vue项目中,把项目发布到服务器上时,使用域名访问可以出现页面,但是ajax请求的URL中带有undefined,无法获取到数据,如:其中的一个ajax请求:http://xmzd.wang/undefinedapi/getSingerList/,这里有一个undefined导致无法正常发出请求。原因:当使用npm run build打包项目时,该项目默认会使用produ...原创 2020-02-04 21:00:13 · 2312 阅读 · 1 评论 -
vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated
报错信息:vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/recommend/000Si7...原创 2020-01-08 15:47:25 · 8504 阅读 · 3 评论 -
vuex中state的数据发生变化,但是getters中的数据没有变化,或者报错: Error in render: "TypeError: Cannot read property 'name' o
vuex中state的数据发生变化,但是getters中的数据没有变化在vue-devtool中可以看数据都是undefined,报错如下(此时Mutation中是使用state.xxx=xxx进行数据赋值):或者报错:[Vue warn]: Error in render: "TypeError: Cannot read property '这里随便是什么' of undefin...原创 2019-12-15 03:56:41 · 1155 阅读 · 0 评论 -
vue动画只有离场动画,进场动画不生效
存在问题的图:(只有离场动画,进场动画不生效)解决之后效果图:解决办法:在transition标签中加入appear属性<template> <transition mode="out-in" appear> <div class="singer-detail"> </div> </trans...原创 2019-12-07 15:05:38 · 2417 阅读 · 6 评论 -
vue实现路由高亮
在vue中经常会实现这么一个功能:在实现tab栏切换的时候,使得对应的元素的能够有一个active效果。如下:此时,可以通过在路由文件中的配置项中加这么一行代码:(active这个类可以自定义,然后在对应的位置写下想要的样式代码,即可实现) linkActiveClass: "active"...原创 2019-12-02 09:58:58 · 522 阅读 · 0 评论 -
使用webpack打包Vue时,在入口文件中需要指定完整版Vue的路径
当使用如下这种形式导入vue时,webpack会默认打包一个runtime的阉割版的vue.jsimport Vue from 'vue'解决办法:指定完整版vue.js所在的路径import Vue from '../node_modules/vue/dist/vue.js'...原创 2019-11-21 23:15:38 · 305 阅读 · 0 评论 -
vue.js报错 [Vue warn]: Cannot find element: #app
报错信息:[Vue warn]: Cannot find element: #app原因是:我把相关的js文件放在head里面,导致文件未加载完成就运行js文件,所以js找不到 #app 。改正: 把相关js文件放至尾部,保证页面全部渲染完成才加载js,就可以避免这个错误。...原创 2019-11-21 23:09:20 · 2890 阅读 · 0 评论 -
Vue创建全局组件的三种方式
1、使用 Vue.extend 来创建全局组件注意:当注册Vue.component("myCom1",com1);使用了驼峰命名,则在引用组件时需写成这种方式<my-com1></my-com1><!DOCTYPE html><html> <head> <meta charset="utf-8"> &l...原创 2019-11-18 14:00:38 · 400 阅读 · 0 评论 -
vue.js报错Unknown custom element: <transitionGroup>
报错信息:vue.js:634 [Vue warn]: Unknown custom element: <transiton-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.(found in &...原创 2019-11-18 11:30:19 · 972 阅读 · 0 评论 -
vue实例的生命周期
什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期函数:就是生命周期事件的别名而已(也可以叫做生命周期钩子); 主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性created:实例已经在内存中创建出来, 此时 data 和...原创 2019-11-17 14:07:54 · 95 阅读 · 0 评论 -
vue过滤器之时间过滤器
vue中过滤器有两种:全局和私有当两种过滤器都存在且同名时,按照就近原则,优先使用私有过滤器。全局过滤器<script type="text/javascript"> Vue.filter("dateFormat",function(val){ let date = new Date(val); let y = date.getFullYear(); let...原创 2019-11-15 16:06:43 · 284 阅读 · 0 评论 -
v-cloak、v-text和v-html之间的区别
v-cloak、v-text和v-html这三个都能进行数据渲染,他们之间有什么相同点和不同点呢?代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> ...原创 2019-11-14 17:08:34 · 309 阅读 · 0 评论 -
vue实现文字跑马灯效果
效果图:代码如下:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue/vue.js"></script>...原创 2019-08-02 21:12:54 · 4378 阅读 · 0 评论 -
vue双向绑定数据实现简单计算器
效果图:代码如下:(可以加一下除0判断什么的)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue/vue.js"></...原创 2019-08-02 21:51:30 · 279 阅读 · 0 评论 -
vue-loader加载不上报错* ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle
报错代码:ERROR in ./src/login.vue?vue&type=template&id=19e76240& 2:0Module parse failed: Unexpected token (2:0)File was processed with these loaders: * ./node_modules/vue-loader/lib/inde...原创 2019-08-04 17:22:46 · 30707 阅读 · 6 评论 -
Vue开发移动端web页面时,页面布局无法适应移动端
当出现这种情况时,在<head>标签里加以下代码: <!--移动端适配--> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <!--这meta的作用就是删除默认的苹果工具栏...原创 2019-08-06 14:32:09 · 1779 阅读 · 0 评论 -
关于Vue项目不报错但是不显示组件的问题(原因之一)
在解决这个问题之前(不管是不是跟我原因一样)请先安装vue-devtools,安装方法:传送门首先是项目代码:<template> <div>首页区域</div></template><script></script><style lang="scss" scoped></...原创 2019-08-11 09:36:39 · 19657 阅读 · 1 评论 -
Vue命名视图的用法
一般情况下,一个页面里包含有多个组件,router-view对应一个组件,有人说多写几个对应多个组件就行了,真有那么简单吗,答案是不行的,多个router-view的效果是显示多个第一个组件,其他的组件则没有渲染到页面,不理解的话,请看演示图:代码如下:<!DOCTYPE html><html> <head> <meta charse...原创 2019-08-11 23:18:45 · 1612 阅读 · 0 评论 -
axios安装配置
一、安装根目录运行:npm install axios -D二、配置在src/main.js配置 axios导入 axios 并在 new Vue()中配置import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter);import router from './route.js...原创 2019-08-12 22:36:07 · 430 阅读 · 0 评论 -
关于Vue项目中tff报错解决办法
在webpack.config.js中的模块配置中加如下的配置规则:{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"}const path = require('path');const htmlWebpackplugin = require('html-webpack-plugin');const VueLoad...原创 2019-08-04 21:20:54 · 535 阅读 · 0 评论 -
Vue请求Django后台获取图片资源
Vue组件中的代码如下:1.在methods中定义获取轮播图图片的方法:get_imgs(),通过ajax对后台进行请求。2.在created中调用get_imgs(),在created中的方法会在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图,不理解的可以自己百度Vue的生命周期。3.然后在模板中使用v-for进行渲染,注意:要写入一个key属性,并且&...原创 2019-08-06 11:21:57 · 2737 阅读 · 0 评论 -
Vue项目调试器--在chome浏览器上安装vue-devtools调试工具
在chome浏览器上安装vue-devtools调试工具Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。步骤如下:首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools 下载好后解压,进入vue-devtool...原创 2019-08-11 09:17:53 · 4650 阅读 · 0 评论