vue项目中遇到的问题总结

2018-06-01 本文已影响91人夜3033

主要内容

类名的用法
computed计算属性与methods
watch介绍和场景
组件的封装和传值

类名的用法

控件的类名复用根据不同的类名更换背景图片等

情况1：固定定义的类名

<span class="icon”>

<span class="icon icon2”>

在style中
.icon {
      ...

    background-size: 100% 100%;

    bg-image('../../assets/images/hot');

     &.icon2 {

        bg-image('../../assets/images/advant');

        background-size: 100% 100%;

    }
}

情况2.根据情况判断来确定类名

//调用
<div class="topContentXy" :class="wrapClass”>

//<script>中
computed: {

  wrapClass: function(){
    if(this.productType === 'aa'){
        return 'topContentSl'
    }else if(this.productType === 'bb'){
        return 'topContentDy'
    }else{
        return 'topContentXy'
       }
}

在style中

image.png

computed计算属性与methods

在类名的介绍中我们可以看到用到了computed计算属性的方式，computed可以以绑定的形式实现更多我们想要的操作。
computed计算属性将当前内容与包含的内容绑定

image.png

当this.checked 或者 this.telNumber
变化的时候会引起classBtnMethod重新计算将这三个绑定到一起起到动态处理的效果
与methods方法的区别：

加载方式的不同
以methods进行加载的方式。如果调用了，是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式
二者的调用方式不一样
写法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加().

watch介绍和场景

1.来监听状态的变化
监听系统的某一个设置的状态值
下图可以看到一个是设置的具体的状态值以及computed中方法的监听

image.png

根据打印结果可以看到，使用watch方法可以监听到某个值的改变以及computed中方法的改变
2.监听路由的变化
在同一个详情页中点击相关新闻跳转到同样的详情页，但是可能会存在路由主信息不变以及
created() {}不会再次加载因此可能导致界面内容点击不会改变

image.png

监听路由变化并且触发数据的加载信息实现页面的刷新

image.png