Vue
Vue
不知道取啥名2021
这个作者很懒,什么都没留下…
展开
-
created生命周期函数获取不到vuex数据解决方法
问题:在created中获取vuex数据,然后去后端请求数据,发现获取的vuex数据不存在。解决方法:使用watch监听vuex数据,当数据发生变化在去后端请求数据原创 2020-06-12 16:02:49 · 6078 阅读 · 0 评论 -
axios请求嵌套同步方法
axios请求嵌套同步方法axios.get('/userAll') .then( async response { console.log(response); //要同步这个方法 await axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) {原创 2021-01-11 17:26:31 · 3535 阅读 · 0 评论 -
Vue父子组件通信
父组件向子组件传递数据通过prop传递父组件可以通过prop向子组件传递数据(父组件通过v-bind 来动态传递 prop,子组件可以像访问data里面的值访问父组件传递的prop值)。Prop有两种声明形式:一种是字符串数组的形式,例如:props: ['title', 'likes', 'isPublished', 'commentIds', 'author'],也可以指定pro...原创 2019-12-02 15:20:51 · 136 阅读 · 0 评论 -
Vue路由传递参数的三种方式
通过动态路由方式主要适用于传递一个参数的路由跳转,比如详情页。//路由配置文件中 配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail }//跳转时页面var id = 1;this.$router.push('/detail/' + id) //跳转后页面获取参数this...原创 2019-12-02 15:28:06 · 685 阅读 · 0 评论 -
使用Vant Uploader 文件上传,后端java中MultipartFile接收不到文件问题解决
**问题:**在Uploader组件 after-read回调函数将获取的file对象上传到服务器。<van-uploader:after-read="uploadFile"/>uploadFile(file) { const data = new FormData(); data.append("file", file); //使用axios上传文件到服务器,注意设置axios的headers为{ "Content-Type": "multipart/form-data" }}原创 2020-06-22 14:01:45 · 5859 阅读 · 1 评论 -
Vue刷新页面的三种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。1.原始方法:location.reload();2.vue自带的路由跳转:this.$router.go(0);用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。所以,我们选择第三种方式3.首先在App里面写下如下代码:<template> <div id="app"> <转载 2020-06-22 14:07:24 · 2765 阅读 · 0 评论 -
Vue中scoped穿透 修改子组件样式
scoped看起来很好用,在Vue项目中,当我们引入第三方组件库时(如使用vant的tab标签页固定),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scopedstylus的样式穿透 使用 >>>.van-tabs >>> .van-tabs__wrap { top: 0; posi...原创 2020-03-12 10:24:00 · 617 阅读 · 0 评论 -
Vue 获取初始化数据是放在created还是mounted
官方文档:也就是说Vue实例中的data和methods已经使用了。但是还没有挂载到页面上。可以在created里面去后端获取数据。当进入mounted这个生命周期函数。此时页面已经渲染出来,可以进行dom操作。总而言之。created生命周期函数,可以去后端异步获取数据,并保存到data里面。mounted的话,如果需要在页面上操作dom,就要在这个函数执行。但是注意 mounted...原创 2019-12-11 16:13:04 · 8473 阅读 · 0 评论 -
Vue组件文件夹结构建议
全局通用组件位于src/components。注意与业务组件区分,全局通用组件更强调基础性。类似于一个UI框架里的各种Input、Button、Tab,只是在此处是你自己封装的。建议风格文件夹命名使用PascalBase风格一个文件夹代表一个组件组件使用index.vue导出示例目录结构- src - components - SvgIcon - in...转载 2019-12-17 10:56:28 · 1775 阅读 · 0 评论 -
Vue项目代码修改
1.使用varibles变量文件抽取样式(stylus css预处理器)新建styl文件//主题色$theme-color = #1989fa//基础颜色//白色$white-color = #ffffff//灰色$grey-color = #DFDFDF在vue组件中引入@import "~styles/varibles.styl";2.分离路由文件随着页面的增加...原创 2020-03-17 15:56:15 · 1604 阅读 · 0 评论 -
vue请求后台获取对象属性作为自定义组件的v-model,在自定义的created生命周期函数获取不到值问题解决
通过axios获取对象属性,在自定义组件created里面,因为请求还为返回,使用created获取到的对象属性为undefined。在自定义组件上添加v-if判断就可以了,当对象属性获取到时,在渲染自定义组件原创 2020-07-28 17:27:30 · 1142 阅读 · 0 评论 -
Vue常见问题
v-model涉及和computed计算属性双向绑定失效的问题v-model部分代码:<el-switch v-model="editable"></el-switch>计算属性部分代码:computed:{ editable(){ return this.type.power==0?true:false } },计算属性的...原创 2019-12-02 15:30:18 · 319 阅读 · 0 评论 -
Vue项目首页加载慢问题优化
1. vue-router懒加载当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 { path: "/index", component: resolve => require(["./views/home/Index.vue"], re...原创 2019-12-09 09:45:55 · 1041 阅读 · 0 评论 -
vue使用vue-awesome-swiper实现选中筛选条件,将筛选条件定位到左侧
一、安装并引入vue-awesome-swipervue-awesome-swiper:github地址安装在项目目录终端执行npm install swiper vue-awesome-swiper --save安装版本"swiper": "^6.4.5","vue-awesome-swiper": "^4.1.1",在Vue中引入在main.js文件中全局注册import VueAwesomeSwiper from "vue-awesome-swiper";// impo原创 2021-01-20 15:49:20 · 712 阅读 · 0 评论 -
Vue Cli配置参考一vue.config.js
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。这个文件应该导出一个包含了选项的对象:// vue.config.jsmodule.exports = { // 选项...}1. publicPath从 Vue CLI 3.3 起已弃用 base...原创 2019-12-06 16:32:57 · 573 阅读 · 0 评论 -
vue路由实现前进刷新后退不刷新功能
需求有A->B->C三个页面,要实现A页面进入B页面,B页面重新获取数据。从C页面返回到B页面,B页面有缓存,不用重新获取数据。实现方法 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。的include属性对应匹配的组件将会被缓存。在vuex声明一个数组变量作为include属性的值。在B页面上使用组件内的路由守卫。beforeRouteEnter内给变量数组添加B页面组件名,beforeRouteLeave如果不是跳转到C页面,就删除变量数组中B页面的组件。1.在vuex声明一原创 2020-07-27 10:39:03 · 487 阅读 · 0 评论 -
elementUI事件回调函数传默认参数和自定义参数的问题
1、如果只传递一个默认值$event只能传递check-change的第一个默认参数data。true为自定义的参数。2、 传递check-change的多个默认的参数可以通过在回调函数里定义自己的参数的形式来保留默认参数,同时也可以自己传参数...转载 2020-06-28 16:24:54 · 2026 阅读 · 0 评论 -
vue调试工具vue-devtools安装及使用
到github下载下载一定要记得是master环境的代码,默认克隆后进入的是dev环境,执行npm run build会报错,执行git checkout master切换到master分支)git clone https://github.com/vuejs/vue-devtools在vue-devtools目录下安装依赖包cd vue-devtoolsnpm install依赖包下载完后执行npm run build,编译打包成功后会在shells下生成chrome文件夹。此文.转载 2021-01-12 15:18:14 · 185 阅读 · 2 评论 -
Vue实例的生命周期
1. 什么是生命周期(每个实例的一辈子)概念:每一个Vue实例创建、运行、销毁的过程,就是生命周期;在实例的生命周期中,总是伴随着各种事件,这些事件就是生命周期函数;生命周期:实例的生命周期,就是一个阶段,从创建到运行,再到销毁的阶段;生命周期函数:在实例的生命周期中,在特定阶段执行的一些特定的事件,这些事件,叫做 生命周期函数;生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 ...转载 2019-12-11 15:46:05 · 103 阅读 · 0 评论 -
Vue风格指南
官网文档:https://cn.vuejs.org/v2/style-guide/。Vue将风格指南归于四个大类:优先级 A:必要的这些规则会帮你规避错误。优先级 B:强烈推荐这些规则能够在绝大多数工程中改善可读性和开发体验。即使你违反了,代码还是能照常运行。优先级 C:推荐当存在多个同样好的选项,选任意一个都可以确保一致性。在这些规则里,我们描述了每个选项并建议一个默认的...原创 2019-12-13 16:30:46 · 161 阅读 · 0 评论 -
使用vant的Uploader组件+axios+springmvc进行多文件上传
1.前端1.页面upload.vue,使用vant的Uploader 组件 <van-uploader v-model="aaFiles" upload-text="附件列表1"/> <van-uploader v-model="bbFiles" upload-text="附件列表2"/>2.用FormData对象接收数据,使用axios上传文件到后端。 let formData = new FormData(); if (this.aaFiles.le原创 2020-08-04 11:26:58 · 1261 阅读 · 0 评论