vue.js
一个柠檬味的前端
这个作者很懒,什么都没留下…
展开
-
vue报错:Maximum call stack size exceeded
如图,我的项目路由跳转的时候报这个错误原因是我引用的组件名称和组件的name属性一样,导致这种情况原创 2020-05-19 14:23:39 · 388 阅读 · 0 评论 -
vue中computed的缓存以及getter和setter
computed会基于它们的依赖进行缓存,如果数据没法改变则computed刷新时不会重新执行什么意思呢?我们看下面的代码:methods: { methodsNow: function () { console.log('methods') }},computed: { computedNow: function () { console.log('computed') return this.cData },}template中我们使用methods中的me原创 2020-05-09 10:00:04 · 2450 阅读 · 0 评论 -
vue3.x版本打包之后的index.html打开空白
index.html打开之后是空白是因为文件的资源路径不对,这个时候我们需要在根目录下创建一个vue.config.js:在里面添加配置:module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/'}如果是3.3版本之下的,就把publicPath换成baseUrl...原创 2020-04-08 10:44:28 · 807 阅读 · 0 评论 -
ERROR Invalid options in vue.config.js: "baseUrl" is not allowed
新项目用的是vue-cli 4.x版本,在vue.config.js中运行报这个错误:module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'}这里要把baseUrl换成publicPath,在vue-cli.3.3版本后 baseUrl被废除了,改成下面的:module.export...原创 2020-04-08 10:04:12 · 288 阅读 · 0 评论 -
vue项目中使用stylus
首先下载stylus:npm install stylus --save接着我们再安装一个依赖stylus-loader:npm install stylus-loader --save然后我们就可以在项目中使用stylus了原创 2020-02-11 14:17:49 · 155 阅读 · 0 评论 -
axios的使用以及/api/路径的配置--去哪儿网(三)
vue中使用axios首先需要npm下载axios的安装包npm install axios --save在main.js中引入axios,这样就可以在全局使用axios了//main.jsimport axios from 'axios'然后在项目根目录下的static中创建mock文件夹,里面放测试用的json文件在需要调接口的文件中使用axios调取接口//Home.vu...原创 2019-12-10 16:59:41 · 583 阅读 · 0 评论 -
在vue项目中使用iconfonts——去哪儿网(一)
首先在字体图标库官网找到需要的字体图标,然后加入到购物车中,在购物车中添加至项目,下载字体图标至本地,将下载的文件中的字体样式css文件以及字体文件提取出来,放到vue项目中assets下的styles文件夹下,将字体文件放到新建文件夹iconfont下,打开iconfont.css文件,修改引入的字体文件的路径因为可能每个页面都需要引入iconfont,所以直接在main.js中引入...原创 2019-12-06 15:26:25 · 374 阅读 · 0 评论 -
vue项目使用IP地址访问
在vue项目npm run dev运行之后,会提示我们使用localhost:8081访问但是有时候我们需要在手机上查看显示效果,就需要在同一个局域网下使用ip替代localhost,但是直接写ip是不行的,我们需要配置一下dev的执行,在package.json中添加代码:然后就可以通过IP地址访问项目了...原创 2019-10-17 16:05:25 · 2686 阅读 · 2 评论 -
轮播组件出现滑动不会整屏走的现象--(慕课网-去哪儿网)
在写去哪儿网的详情页的时候出现一个问题就是,一开始进入这个页面的时候轮播组件是隐藏的,点击头部则伦比组件显示,但是滑动轮播的时候发现不会整屏的滑动,而是一点点的动,如下图:这里是因为swiper一开始是隐藏的,点击banner图显示,此时的dom结构发生了变化,则swiper的宽度计算就会出问题,导致这种情况解决办法:使用observeParents和observer这两个属性这两个属性...原创 2019-10-12 11:30:43 · 272 阅读 · 0 评论 -
递归组件使用--(慕课网-去哪儿网)
所谓的递归组件就是在组件中调用自身组件在我们写项目的时候,一般后台返回给我的数据都是嵌套的,类似于下面这种:而有的时候我们需要将二级列表或者三级列表全部显示在页面中,这个时候我们就可以使用递归组件了在Detail组件中,我们引用了detail-list组件,并且传了个参数list,//Detail.vue<template> <div class="detail"...原创 2019-10-12 11:25:32 · 197 阅读 · 0 评论 -
使用keep-alive提高网页性能(vue--去哪儿网)
在未使用keep-alive时,点击路由跳转每次都会重新请求数据,这个时候可以使用keep-alive来解决这个问题//App.vue<div id="app"> <keep-alive> <router-view/> </keep-alive></div>使用keep-alive之后会产生一个问题就是数据不会重...原创 2019-09-26 22:33:51 · 135 阅读 · 0 评论 -
vue使用localStorage以及mapState、mapActions、mapMutations等辅助函数(vue--去哪儿网)
使用localStorage当选中某一个城市之后,如果没有使用缓存那么在刷新页面或者重新打开页面的时候,城市会变成初始化的城市,这个可以通过localStorage来解决在用户通过mutation来改变数据的时候,可以使用localStorage来存储数据,而state的值优先从localStorage中获取//index.jsstate: { city: localStorage.c...原创 2019-09-26 21:47:02 · 234 阅读 · 0 评论 -
vuex实现城市定位的功能(vue--去哪儿网)
home.vue组件的子组件header.vue以及city组件的子组件list.vue需要使用公共数据,在list.vue组件中点击城市,则该城市的名字页会显示在header.vue中,这里使用的是vuex管理这个数据npm install vuex --savestate在src目录下创建一个store的文件夹,再新建文件index.js,在index.js中使用vuex//inde...原创 2019-09-26 12:03:41 · 572 阅读 · 0 评论 -
vue知识点(一)
vue知识点(一)1、Vue.set 给响应式对象添加一个响应式的属性2、Vue.filter 过滤器3、jQuery.extend()语法知识点补充4、$.proxy知识点补充5、创建全局组件Vue.component();6、创建局部组件7、父子组件传值8、Vue的生命周期9、模板语法10、计算属性、方法、侦听器1、Vue.set 给响应式对象添加一个响应式的属性Vue.set(thi...原创 2019-07-18 15:19:28 · 151 阅读 · 0 评论 -
vue知识点(二)
vue知识点(三)1、计算属性的setter和getter2、v-show和v-if条件渲染3、vue中的列表循环4、vue中的set方法(Vue.set、vm.$set)1、计算属性的setter和gettervar app = new Vue({ el: '#app', data: { firstName: 'Yan', lastName: ...原创 2019-07-21 18:48:11 · 97 阅读 · 0 评论 -
vue知识点(四)
vue知识点(四)1、使用组件的细节点a、组件的is属性b、组件中的datac、ref获取dom对象2、父子组件间的传值a、父组件向子组件传值1、使用组件的细节点a、组件的is属性某些特定的元素后面就要跟特定的标签,例如:tbody后面就要跟tr,如果将tr这个标签作为组件的一部分,渲染的时候就会有问题,这个时候在tr标签上加上is属性(还有ul标签后面要跟li标签、select后面必须写o...原创 2019-08-26 15:39:21 · 165 阅读 · 1 评论 -
vue知识点(五)【动画】
vue知识点(五)1、vue中css动画原理2、自定义添加class动画3、Vue中的使用animate.css库(5-2、5-3)4、vue中的js动画与velocity.js(5-4)5、vue中多个元素或组件的过渡(5-5)6、vue中的列表过渡(5-6)7、vue中的动画封装(5-7)1、vue中css动画原理给需要添加动画的元素包一层,在这个transition元素上加上name属性...原创 2019-08-27 10:49:11 · 169 阅读 · 1 评论 -
vue中简单使用swiper以及stylus修改其他组件中元素的样式
1、在vue中使用swiper,可以在github上找到vue-awesome-swiper查看使用方法首先下载:npm install vue-awesome-swiper --save接着在入口文件main.js中引入swiperimport Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'import...原创 2019-09-19 10:36:39 · 610 阅读 · 0 评论 -
城市选择26字母页 && 性能优化(vue--去哪儿网)
去哪网做到根据字母选择城市的页面,记录一下这个的实现首先在给循环出来的li元素上添加点击事件,通过点击事件获取到所点击的字母,通过$emit向父组件发送事件,并将获取到的元素传到父元素中handleLetterClick (e) { this.$emit('change', e.target.innerHTML)},父元素接收并定义事件,现在data中初始化即将收到的字母,然后将子组...原创 2019-09-24 11:21:22 · 356 阅读 · 0 评论 -
搜索实现(vue--去哪儿网)
搜索的下拉菜单样式做好之后就是搜索的逻辑实现了首先给input一个v-model=‘keyword’,实现数据的双向绑定,然后在data中定义一个keyword和一个空数组listdata () { return { keyword: '', //搜索的关键词 list: [], //搜索下拉菜单要循环的数组 timer: null /...原创 2019-09-25 09:53:24 · 226 阅读 · 0 评论