vue app是現代前端開發中非常流行的一種技術，其具有非常出色的功能和優秀的效果。開發者們都能夠通過vue app實現出色的交互效果和高效的響應速度。以下我將介紹幾種常見的vue app效果。

1.路由切換效果

//路由配置
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
//路由切換效果//css代碼
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all .3s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}

2.動畫效果

//動畫效果
Hello World!//css代碼
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}

3.模態框效果

//模態框效果
default header
default body
default footer//css代碼
.modal-mask {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}

以上三種效果僅僅是vue app中的冰山一角，vue app還可以通過vuex、組件、過濾器和指令等方式來實現更多更好看的效果。