
Vue
文章平均质量分 51
记录一些vue中踩过的坑
辰聂
这个作者很懒,什么都没留下…
展开
-
如何修改element-ui源码?
修改elementUI源码一定要先从git上拉到elementUI的源文件,不能修改本地项目中的文件。1.拉取如图所示的项目安装首先将ElementUI的官方源码库clone下来https://github.com/ElemeFE/element.gitcd elementnpm install2.src文件夹改逻辑来这里找对应的文件3.package文件夹改逻辑或者样式也可以去这里。只改样式去这里:element-dev\packages\theme-chalk\src修改转载 2021-02-03 13:37:15 · 2491 阅读 · 0 评论 -
vue/cli创建的项目如何打包部署到tomcat,以及可能会遇到的问题(报错以及页面空白)
1、使用npm run build命令打包构建资源文件 => 会生成一个默认的dist文件夹2、将打包后的dist文件夹上传到服务器apache目录下的webapps文件夹下,例如:/zs/soft/apache-tomcat-8.5.24/webapps(关于apache的安装和搭建以及如何上传文件到服务器我这里就不做介绍)3、进入服务器目录/zs/soft/apache-tomcat-8.5.24/bin,输入./startup.sh启动apache服务,默认端口为80804、在浏览器中输入原创 2021-01-28 14:30:24 · 805 阅读 · 3 评论 -
Vue 中的匿名插槽、具名插槽以及作用域插槽(slot-scope)的理解
百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的。先抛例程:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件之通过插槽(slot)分发内容</title> <script src="你的vu转载 2020-11-01 16:44:22 · 925 阅读 · 0 评论 -
Vue生命周期中mounted和created的区别
一、什么是生命周期?用通俗的语言来说,就是 Vue中实例或者组件从创建到消灭中间经过的一系列过程。 虽然不太严谨,但是也基本上可以理解。通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:二、created和mounted区别?官方图解如下:我们从图中看两个节点:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要转载 2020-09-20 12:54:45 · 816 阅读 · 0 评论 -
vue中监听页面滚动和监听某元素滚动
①监听页面滚动在生命周期 mounted 中进行监听滚动:mounted () { window.addEventListener('scroll', this.scrollToTop)},在方法中定义监听滚动执行的方法:scrollToTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.lo原创 2020-09-20 12:33:57 · 2702 阅读 · 0 评论 -
vue在初始化时给scrollTop设置一个值,但scrollTop却始终为0
在vue项目中往往有这样一个需求,在初始化时需要给某个容器的scrollTop设置一个值,一开始的想法是在created或者mounted中改变 scrollTop 的值,但是却出现了几个问题。问题1:使用在created或者mounted中使用this.$refs.xxx获取不到容器原因:在created或者mounted生命周期,页面刚挂载,还未完成渲染,获取不到dom节点。同样使用$ref无法获取样式。解决方法:使用this.$nextTick()created () { this.$nex原创 2020-09-20 09:51:14 · 3522 阅读 · 0 评论 -
关于vue的 this.$refs.xxx 打印为undefined解决办法
今天做项目的时候发现,明明this.$refs里面有东西,如下图,但是打印this.$refs.xxx的时候却是undefined,如下图打印this.$refs:console.log(this.$refs)但是打印this.$refs.directory和this.$refs.postHeader的时候却是这样的console.log(this.$refs.directory)console.log(this.$refs.postHeade)此时问题来了,为什么this.$refs.d原创 2020-09-15 16:48:00 · 13296 阅读 · 8 评论 -
Vue数据发生改变但页面却没有实时更新
1、watch或者computed监听到数据的变化但是页面却没有实时更新在数据改动的代码后加this.forceUpdate()。添加this.forceUpdate()。添加this.forceUpdate()。添加this.forceUpdate();进行强制渲染,效果实现。因为数据层次太多,render函数没有自动更新,需手动强制刷新。2.没有监听到数据的变化例如:改变了数组中的某一项或者改变了对象中的某个元素时,监听则未生效。数组若要触发监听,下面方法即可触发如:splice(),pus转载 2020-09-12 23:27:25 · 6061 阅读 · 1 评论 -
vue cli+axios拦截器使用,代理跨域proxy
1、首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式在main.js中如下声明使用import axios from 'axios';Vue.prototype.$axios=axios;那么在其他vue组件中就可以this.$axios调用使用2.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设转载 2020-09-02 22:19:36 · 338 阅读 · 0 评论