生活资讯
干货分享:vue2.0做移动端开发用到的相关插件和经验总结
2024-12-24 06:54  浏览:102

5、better-scroll

  • better-scroll介绍
better-scroll, 官方网址,better-scroll 是一款重点解决移动端(现已支持 PC 端)各种滚动场景需求的插件。它的核心是借鉴的  iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib。
  •  使用方法

        安装方法

起步

better-scroll 最常见的应用场景是列表滚动,我们来看一下它的 html 结构

上面的代码中 better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。

最简单的初始化代码如下

结合接口下拉刷新加载更多数据

6、fastclick插件:解决移动端click 300ms延迟

移动端项目中,在某些机型某些浏览器下,存在click事件300ms延迟的问题,影响用户满意度。原因是:从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间,因为它想看看你是不是要进行双击(double tap)操作。

vue项目中,可以通过引入fastclick第三方依赖包来解决。

安装方法

使用方法

在main.js中

也可以直接下载fastclick.js,在相应页面直接引用。

7、手机前端开发调试利器 – vConsole

vConsole介绍:一个轻量、可拓展、针对手机网页的前端开发者调试面板。

移动端项目,由于在移动端进行调试。

使用方法如下

安装vConsole:

在main.js中引用并实例化

此时可以使用console.log

原理:改写了console.log,重写了实现,用vConsole代理

结果就会出现如图 浮动的按钮,点开之后,就可以看到里面的console信息了

8、webpack之proxyTable设置跨域

在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。

proxyTable相关配置及使用说明

当我们用vue-cli构建项目时,需要在config/index.js文件中,找到dev对象下proxyTable对象进行跨域设置,配置如下

proxyTable配置的意思为:使用字符串"/api"来代替目标接口域名;如果接口地址为"user/getUserInfo",我们可以在所有的接口地址前面加上"/api/"用于设置代理;如:

如果你不想每次请求地址中都带有"/api/",则可以设置

表现结果为

另外一种情况是,我们不需要在每个接口地址前添加"/api/",只需要用接口本身的地址,不需要重新路径即可。如果接口为"/v2/cotton/get_app_list",使用"/v2"做代理;如下

9、vue组件之间通信

  • 父向子传递数据通过props
  • 子向父传递数据

子组件向父组件传递分为两种类型。
1、子组件改变父组件传递的props(你会发现通过props中的Object类型参数传输数据,可以通过子组件改变数据内容。这种方式是可行的,但是不推荐使用,因为官方定义prop是单向绑定
2、通过$on和$emit;即子组件中通过$emit()来触发事件;父组件中通过依附在组价元素上的:on方法来响应事件。

  • 非父子组件传递数据

通过使用一个空的Vue实例作为中央事件总线。

相邻组件1,通过$emit()传递数据

相邻组件2,通过$on()接收数据

10、ref特性的使用

 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的  对象上。

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

当  用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在! 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

通过在引用的子组件上使用ref属性实现父组件调用子组件的方法及属性

在父组件中引用子组件并定义ref

调用定义在子组件中的方法show

11、vue中setTimeout的使用

在vue中使用setTimeout或者setInterval,如果按照在原来js的中方法,如

会发现data中定义的变量isFlag是获取不到的;解决方法如下

  • 用setTimeout通过es6语法,setInterval也是一样
  • 定义外部self来代替全局this

我们会发现利用例子的第一种方法,使用this来获取变量,会报错。这就是老生常谈的javascript 的this 的问题。 

因为用的一个function){} 这里的 独立的作用域 this指向了全局(这里是window)而且window里没有myFunc这个函数,所报了错。 
使用es6的->写法,this继承外部对象,this指向为vue实例,即(new Vue

12、监听鼠标滚动事件,实现头部悬浮效果

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,鼠标滚动事件需要通过window.addEventListener("scroll",'')进行监听。

13、vue上传图像

通过new FormData(),创建form对象,通过append向form对象添加数据。

html代码如下

14、vue,@click="event()",添加()与不添加()的区别

应该是 Vue 对函数调用表达式额外用了一个函数做了层包装。
加与不加括号的区别在于事件对象参数 event 的处理。

不加括号时,函数第一个参数默认为 event;加了括号后,需要手动传入 $event 才能获得事件对象。

项目实践:基于vue2.0 +vuex+ element-ui后台管理系统

后面会更新第二篇文章

  • VUX - Vue 移动端 UI 组件库的使用
  • vuex:vue状态管理工具详细入门
  • 百度地图api在vue项目中的使用:
  1.  vue2如何给地图添加房源覆盖物
  2.  如何给地图添加自定义定位控件并更换控件的图标
  3. 几个常用的api(地图缩放,拖拽,获取当前位置)等功能的实现
  • 微信api在vue项目中的使用
  1. vue2实现微信分享坑点和经验
  2. vue2实现微信支付坑点和经验
  • fetch封装接口的统一管理

 

 

 

 

    以上就是本篇文章【干货分享:vue2.0做移动端开发用到的相关插件和经验总结】的全部内容了,欢迎阅览 ! 文章地址:http://sjzytwl.xhstdz.com/xwnews/696.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://mip.xhstdz.com/ , 查看更多   
最新文章
教你彻底关闭手机自动更新,老手机不再卡顿还可以继续用几年手机系统更新怎么关闭「教你彻底关闭手机自动更新,老手机不再卡顿还可以继续用几年」
当我们购买一部新手机时,第一时间关闭系统更新是非常重要的。你们知道为什么我们经常更换手机吗?不正是因为手机变得卡顿和不流
电信固话怎么设置呼叫转移座机转接到手机怎么设置「电信固话怎么设置呼叫转移」
在现代通信中,呼叫转移功能为用户提供了极大的便利,尤其是在无法接听电话或需要临时将电话转接到其他号码时。对于电信固话用户
从“出新必换”到“多年不换”,消费者为啥不爱换手机了?手机几年换一次比较好「从“出新必换”到“多年不换”,消费者为啥不爱换手机了?」
你有多久没换手机了?不少消费者反馈,自己已经一两年或更长时间没有购买新手机或新平板电脑了。从“出新必换”到“多年不换”,
求小明正确的四位手机密码手机密码破解「求小明正确的四位手机密码」
小学生题目:小明五次输入四位数的手机密码均错误,但是每次输入的密码中都有两位数字正确,且输入的数字的位
奥尼尔谈GOAT人选:NBA仅4人够格
关于谁才是NBA的GOAT,每个人心中都会有自己的看法,毕竟大家看比赛的角度不同,对于球星成色的判断也就不同。近日,奥尼尔就谈
新就业形态下,灵活就业人员权益如何保障?
原标题:新就业形态下,灵活就业人员权益如何保障?(主题)专家:多方协同推动劳动者权益保障与企业可持续发展(副题)中国妇女
5G麒麟芯+卫星通信!华为20多款中端机已备案,继续发力高性能手机「5G麒麟芯+卫星通信!华为20多款中端机已备案,继续发力」
近日,有消息称华为将不仅在高端市场回归,还将回归中端市场,将麒麟9000s芯片下放到中端手机中。同时,华为还计划在中端手机中
买台手机好过年 没选新出的S16 Pro 却买了上代15 Pro新出的手机「买台手机好过年 没选新出的S16 Pro 却买了上代15 Pro」
购买小米12 Pro翻车后,眼看离春节就几天,还是要在过年前满足自己买过年的愿望。只考虑了OPPO和VIVO的产品后,放弃了OPPO的Reno
iPhone游戏必备神器、精准识别那个老六。雷蛇手机「iPhone游戏必备神器、精准识别那个老六。」
相信很多用iPhone玩游戏的值友们都遇到过降频的问题,尤其13PM,虽然支持120hz但是只要你敢开,十分钟内必让你的屏幕黑下来,感
割裂的杭州楼市:手握千万资金抢不到房,刚需盘降价40万无人问津
“ 杭州一季度的楼市表现,如同一面多棱镜,映照出土地市场的狂热、开发商的野心、购房者的焦虑,也暴露出城市发展的不均衡。中