vue小技巧

原创 dgzhou 随笔 vue 1244阅读 2018-07-05 15:37:52 举报

1、setTimeout/setInterval this指向改变,无法用this访问vue实例
使用场景

解决方案:使用箭头函数或者缓存this

2、vue滚动行为(浏览器回退记忆位置)用法
解决方法:路由设置
1.开启vue-router的history模式
2.设置滚动行为:vue滚动行为文档

3、自定义组件添加click等时间不生效
使用场景:一些自定义组件,需要添加一些额外事件来实现一些特定的需求

解决方法:使用.native修饰符

4、手动操控自定义组件
使用场景:一些自定义组件,需要去获取组件对象进行一些其他的Dom操作
解决方法:使用ref属性暴露组件获取句柄

5、深度作用选择器
使用场景:scope的的样式,希望影响到子组件的默认样式
解决方法:使用深度作用选择器

6、vue Filters过滤器的作用
使用场景:常见数据文本的格式化

Demo:一个日期过滤器返回yyyy-mm-ss hh:mm:ss的样式

7、路由懒加载写法
使用场景:页面量比较大,用户并不会访问到所有的页面,为了提升首次加载的速度,可以对路由进行懒加载。用户访问到对应路由页面的时候在加载对应页面的Js

8、路由变化页面数据不刷新问题
使用场景:依赖路由的params或query参数获取的(ajax卸载created生命周期里),因为路由懒加载,退出页面在进入另一个页面并不会运行created组件的生命周期,导致页面数据还是上一个页面的数据
解决方法:watch监听路由是否变化

9、设置路由默认启动页和404页面
使用场景:默认打开页面,如果没有设置启动页,用户访问时也没有带锚点,则页面会显示为空白。
解决方法:重定向默认页面

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复