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
 }
 }
}

作者：solocoder

链接：https://juejin.im/post/5c7deb78f265da2dbc59ae00

来源：掘金