Vue 开发经验小记-白红宇

Vue 开发经验小记

阅读量：4122 次

发布时间：2019-05-25

本文共 3584 字，大约阅读时间需要 11 分钟。

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

1.国际化

国际化插件：vue-i18n

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

white-space : nowrapoverflow: hiddentext-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'    }}

<component> 是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

在 <transition> 上添加 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    }  }}