Vue 开发经验小记

使用 vue 开发过程中遇到的问题或知识点总结，持续更新中…

1.国际化

国际化插件：vue-i18n

2.让多行内容显示一行，多余的用...表示

white-space : nowrap
overflow: hidden
text-overflow : ellipsis

3.显示宽高相等的图片，宽度为屏幕宽度，高度与宽度相等


  


.image-header
    position: relative
    width:100%
    height: 0
    padding-top : 100%
    img
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%

重点是父元素的height设为0，padding-top设为100%

4.转换时间的工具类

/**
 * Created by solo on 2018/6/6.
 */

export function formatDatetime(date, fmt) {
  if(/(y+)/.test(fmt)){
    fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4-RegExp.$1.length))
  }

  let obj = {
    "M+": date.getMonth() + 1,
    "d+": date.getDay(),
    "h+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds()
  }

  for(let key in obj){
    if(new RegExp(`(${key})`).test(fmt)){
      let str = obj[key] + ''
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
    }
  }

  return fmt

}


function padLeftZero(str) {
  return ("00" + str).substr(str.length)
}

使用

let date = new Date(timestamp)
let fmtDate =  formatDatetime(date, 'yyyy-MM-dd hh:mm')

5.给组件绑定原生事件

只需要在@click后面加上.native就可以直接处理原生点击事件了

6. vue中组件间传值

6.1 父子组件间传值

父组件给子组件传值，直接通过props传值

子组件给父组件传值，通过 emit发送事件

this.$emit('chooseType', type)

父组件接收事件：

6.2 非父子组件传值

主要通过事件总线传值

在根节点给 Vue 挂载一个空的 Vue 对象

Vue.prototype.bus = new Vue();

需要发送事件的组件里

this.bus.$emit("change", params)

接收事件的组件

this.bus.$on("change", (msg) => {
    //do yourself work
})

7. 动态组件

动态切换显示的组件



data(){
    components:{
        component-one,
        component-two
    }
    return{
        type: 'component-one'
    }
}

是vue官方提供的标签，通过更改 is 指向的子组件名来动态切换组件。

8. v-once 指令

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。


This will never change: {{msg}}


  comment
  {{msg}}





  {{i}}

9.过渡和动画

9.1 过渡

.fade-enter-active, .fade-leave-active{
    transition: opacity 2s
}
.fade-enter, .fade-leave-to{
    opacity: 0
}

9.2 动画结合 Animate.css

//引入 animate.css


//布局

    hello world

要定义 enter-active-class 和 leave-active-class 的类名，且必须有 animated，想要什么动画效果就写在第二个位置上

解决第一次显示没有动画的bug


    hello world

在上添加 appear 和 appear-active-class 即可。

9.3 同时使用过渡和动画


    hello world

在 enter-active-class 和 leave-active-class 加上相应的类名 fade-enter-active 和 fade-leave-active ,然后在样式中定义过渡效果即可。

.fade-enter-active, .fade-leave-active{
    transition: opacity 2s
}
.fade-enter, .fade-leave-to{
    opacity: 0
}

动画执行的总时长是根据动画还是过渡来定呢？可以手动指定：

//指定整体动画时间为过渡动画时间
type='transition'

还可以自己指定动画总时长：

//指定动画时长为10秒
:duration="10000"

//分别指定进场时长5秒和出场动画时长10秒
:duration="{enter: 5000, leave: 10000}"

9.4 多个组件和元素的过渡

多个元素过渡


    
        Hello world
        Bye world

需要给元素加 key，防止vue复用元素导致没有动画效果。

可以指定切换模式，mode="out-in"：先出后进，mode="in-out"：先进后出

多个组件过渡跟多个元素过渡类似

9.5 vue中列表过渡

使用 transition-group 属性


    
        
            {{item.title}}

10. img 标签的 src 动态绑定

路径前加 require()



bookingManageImg(){
    return this.selectedTab === "bookingManage" ?   require('../assets/manage_focus.png') : require('../assets/manage_normal.png')
},

11. vuex 在页面刷新后状态丢失解决办法

刷新页面后，存在 vuex 的数据会丢失，给调试带来不便。把用户的登录信息放到 sessionStorage 中避免丢失。

const USER_INFO = "userInfo";

export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(sessionStorage.getItem(USER_INFO))
  },
  mutations: {
    setUserInfo(state, userInfo){
      //存储到 sessionStorage 中以防刷新页面后状态丢失
      sessionStorage.setItem(USER_INFO, JSON.stringify(userInfo));
      state.userInfo = userInfo
    }
  }
}

12. 返回记住滚动条位置

详细解析见文章：Vue 返回记住滚动条位置详解