vue小技巧

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

 mounted(){
setTimeout(function(){//setInterval同理
        console.log(this)//此时的this指向的是window对象
    },1000);
 },

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

/箭头函数访问this实例,因为箭头函数本身没有绑定this
setTimeout(() => {
    console.log(this);
}, 500);
//使用变量访问this
var self=this;
setTimeout(function () {
    console.log(self);//使用self变量访问this实例
},1000);

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

const router = new VueRouter({
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) { 
        //如果savedPosition存在,滚动条会自动跳转到记录值的地方
        return savedPosition
    } else {
       return { x: 0, y: 0 }//savedPositionxy也是一个记录X轴和Y轴位置的对象
    }
  }
  routes: [...]
})

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

<template>
    <el-progress type="circle" :percentage=“0" v-on:click=“stopProgress”></el-progress>
</template>
<script>
export default {
    methods:{ 
        stopProgress() {
          console.log(‘停止’) 
      }
    }
}
</script>

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

<template>
    <el-progress type="circle" :percentage=“0" v-on:click.native=“stopProgress”></el-progress>
</template>
<script>
export default {
    methods:{ 
        stopProgress() {
          console.log(‘停止’) 
      }
    }
}

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

<template>
<el-progress type="circle" :percentage=“0" ref=“progress"></el-progress></template>
<script>
  this.$refs.progress //组件对象实例,可以手动调用组件的内置方法和属性
  this.$refs.progress.$el //组件对象最外层的dom元素
</script>

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

<style scoped>
.a >>> .b { color:red; }
</style>
/*有些像Sass之类的预处理器无法正确解析>>>。这种情况下可以使用/deep/操作符取代(/deep/是>>>>>的别名,一样可以正常工作)*/
<style scoped lang=“scss”>
.a /deep/ .b {color:red; }
</style>

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

<!-- 在双花括号中 -->
{{ message | DateFormat }}
<!-- 在`v-bind` 中 -->
<div v-bind:id="message | DateFormat"></div>

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

import formatTime from ‘formatTime';
export default {
    data() {
        return {
            message:1
        }
    },
    filters: {
        DateFormat(value) {
          return formatTime(value).format(“YYYY-MM-DD HH:mm:ss")
        } 
    }
}

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

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注