vue开发问题解决
stack君
这个作者很懒,什么都没留下…
展开
-
解决this.$router跳转路由,mounted不再调用
解决this.$router.push()跳转路由,跳转后mounted不再调用的问题原创 2023-01-03 10:00:10 · 1456 阅读 · 0 评论 -
获取url参数,修改url某个参数的值
1. 根据url中type值的不同,切换简版和完整版隐私政策2. 点击从简版切换到完整版,同时url发生变化原创 2022-02-25 09:19:05 · 601 阅读 · 0 评论 -
节流处理(throttle)
关于节流的实现,有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。一、使用时间戳让我们来看第一种方法:使用时间戳。当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为 0 ),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。// fn 是需要执行的函数// wait 是时间间隔const throttle = (fn, wait = 50) => { // 上一次执行 fn 的时间 let previous =转载 2021-11-26 13:14:59 · 434 阅读 · 0 评论 -
vue过滤器filters的使用
当你在v-for循环渲染一个数组对象的时候,是否遇到过这样的问题:对象里面的字段并不是直接渲染在页面中,而是需要把数据处理过后的内容显示在页面上。方法一:在接口获取到数据的时候,利用数组方法map先处理数据,再直接渲染方法二:利用vue提供的filters钩子,实现数据的过滤处理再渲染处理过后的内容。下面说下方法二怎么实现:1、html代码中,{{}}中实现filters顺序是{{参数 | filters函数 | filters函数 | ...}},| 后面可以多个filters函数,前面fil转载 2021-11-09 17:11:09 · 977 阅读 · 0 评论 -
vue——样式穿透
三大样式穿透在使用很多vue常用的组件库(element, vant, vuetify)时,虽然官方会配好样式但是还是需要更改其他的样式三大样式穿透 >>> , ::v-deep , /deep/在style经常用scoped属性实现组件的私有化,所以才需要样式穿透需要注意: >>> 只作用于css::v-deep 只作用于sass/deep/ 只作用于less,但在vue 3.0会报错,可采用::v-deep示例:1<style原创 2021-11-01 16:41:42 · 355 阅读 · 0 评论 -
搜索功能实现
搜索功能实现Search.vue要接受City.vue传递的数据 ,所以City.vue中:<city-search :cities="cities"></city-search>Search.vue,添加搜索结果模块,并添加搜索逻辑://搜索结果模块,keyword有值才显示<div class="search-content” v-show="keyword"> <ul> //循环搜索结果 <li原创 2021-10-26 14:03:04 · 401 阅读 · 0 评论 -
函数节流阻止过于频繁的重复操作
函数节流通过定时器,和清除定时器的原理,禁止设定时间内,同样的一个事件操作data () { return { timer: null }},methods: { funcxxx () { if (timer) { clearTimeout(timer) } timer = setTImeout( () => {xxx},time) }}...原创 2021-09-07 11:05:42 · 67 阅读 · 0 评论 -
兄弟组件间联动(以字母模块绑定城市列表模块为例)
兄弟组件间联动(以字母模块绑定城市列表模块为例)City.vue中有Alphabel.vue和List.vue两个子组件1、Alphabel.vue——绑定点击事件获取内容(点击的字母)传给City.vue//添加click点击事件<li class="item" v-for="(item,key) of cities" :key="key" @click="handleLetterClick"> {{key}}</li>//mehtods里添加hand原创 2021-09-06 21:41:41 · 144 阅读 · 0 评论 -
解决页面无法滚动——BetterScroll的使用
BetterScroll的使用1、终端安装better-scrollnpm install better-scroll —save//或指定版本安装npm install [email protected] --save2、代码需要符合如下Html结构<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> .原创 2021-09-04 15:14:06 · 267 阅读 · 0 评论 -
首页父子组组件间传值
首页父子组组件间传值1)父组件通过属性传值Home.vue//建立data存储页面各种数据data () { return{ city:’’, //城市 swiperList:[], //轮播图 iconList:[],//热点Icon recommendList:[],//热销推荐 weekendList:[],//周末去哪儿 }},//修改m原创 2021-08-28 22:54:00 · 104 阅读 · 0 评论 -
ajax获取首页数据(axios)
ajax获取首页数据(axios)在vue中发送ajax,可以使用①浏览器自带的fetch函数 ②vue推荐的vue-resource第三方模块。现在vue官方推荐使用axios第三方模块,它可以实现跨平台的数据请求,是基于promise的用于浏览器和node.js的HTTP客户端。可以简单理解为封装好的,基于promise的发送请求的方法。1)安装axios终端打开输入:npm install axios --save2)在每个组件里都发送ajax请求去请求数据太不合理,我们可以在Home.原创 2021-08-28 22:50:33 · 681 阅读 · 0 评论 -
文字溢出规定区域解决方法
如果超出还规定区域则省略后续,并出现三个点//stylus设置.ellipsis overflow:hidden white-space:nowrap text-overflow:ellipsis如果无效,在父层加 min-width=0 才能显示溢出隐藏原创 2021-08-28 22:42:27 · 426 阅读 · 0 评论 -
vue轮播图圆点显示
轮播图圆点显示添加圆点配置data (){ return{ swiperOptions:{ pagination:'.swiper-pagination’ //填写配置项,显示轮播圆点 } } }组件里子组件自带样式修改(swiper的圆点) <style scoped> //样式穿透,wrapper下面所有子组件里出现swiper-pagination-b原创 2021-08-27 21:30:43 · 1318 阅读 · 0 评论 -
vue使用轮播特效的插件
使用轮播特效的插件(npm中的包)1、github上有保存,名为vue-awesome-swiperhttps://github.com/surmon-china/vue-awesome-swiper2、根据提示步骤按步进行 2.1 命令行npm中安装 npm install [email protected] --save 2.2 main.js中全局引入相关的组件和css,vue.use()使用这个插件 import VueAwesomeSwiper from原创 2021-08-27 21:27:27 · 445 阅读 · 0 评论 -
实现图片的宽高比自适应
实现图片的宽高比自适应1、【这种写法最标准】需要把height设为0、overflow设为hidden,然后通过padding-bottom来设置百分比就可以了。overflow hiddenwidth 100%height 0老师的处理方式是,给容器设置高度为0,然后设置padding-bttom撑开高度。因为padding-bottom设置百分比是相对盒子的宽度计算的。例如在宽度为768px的设备下,padding-bottom的值就是768px乘以31.25%。375px的宽度下,就是375原创 2021-08-27 21:21:44 · 801 阅读 · 0 评论