Vue 开发经验小记

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

1.国际化

国际化插件：vue-i18n

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

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

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

<div class="image-header">
  <img :src="food.image"/>
</div>

.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.给组件绑定原生事件

<custom @click.native='handleClick'></custom>

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

6. vue中组件间传值

6.1 父子组件间传值

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

<custom content="hello world"></custom>

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

this.$emit('chooseType', type)

父组件接收事件：

<custom content="hello world" @chooseType="handleType"></custom>

6.2 非父子组件传值

主要通过事件总线传值

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

Vue.prototype.bus = new Vue();

需要发送事件的组件里

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

接收事件的组件

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

7. 动态组件

动态切换显示的组件

<component :is='type'></component>

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

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

8. v-once 指令

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

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

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
<link rel="stylesheet" type="text/css" href="animate.css">

//布局
<transition enter-active-class="animated bounce" leave-active-class="animated shake">
    <p v-if="show">hello world</p>
</transition>
<button @click='toggleShow'>toggle</button>

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

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

<transition 
    appear 
    enter-active-class="animated bounce" 
    leave-active-class="animated shake" 
    appear-active-class="animated bounce">
    <p v-if="show">hello world</p>
</transition>

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

9.3 同时使用过渡和动画

<transition 
    name="fade"
    type='transition'
    appear 
    enter-active-class="animated bounce fade-enter-active" 
    leave-active-class="animated shake fade-leave-active" 
    appear-active-class="animated bounce">
    <p v-if="show">hello world</p>
</transition>

在 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 多个组件和元素的过渡

• 多个元素过渡

<div id="app">
    <transition name="fade" mode="out-in">
        <div v-if="show" key="hello">Hello world</div>
        <div v-else key="bye">Bye world</div>
    </transition>
    <button @click="toggleShow">Add</button>
</div>

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

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

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

9.5 vue中列表过渡

使用 transition-group 属性

<div id="app">
    <transition-group name="fade">
        <div v-for="item in list" :key="item.id">
            {{item.title}}
        </div>
    </transition-group>
    <button @click="add2List">Add</button>
</div>


<style type="text/css" >
    .fade-enter-active, .fade-leave-active{
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to{
        opacity: 0
    }
</style>

10. img 标签的 src 动态绑定

路径前加 require()

<img :src="bookingManageImg" slot="icon"/>

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 返回记住滚动条位置详解