vue06
vue動畫
transition 之前 屬性
<p transition="fade"></p>
.fade-transition{}
.fade-enter{}
.fade-leave{}
-
vue2.0以后
<transition name="fade" @before-enter="beforeEnter"> 運(yùn)動?xùn)|西(元素鳖目，屬性、路由....) </transition> //methods里邊定義beforeEnter方法,beforeEnter(el)方法里有參數(shù)是當(dāng)前元素 class定義: .fade-enter{} //初始狀態(tài) .fade-enter-active{} //變化成什么樣 -> 當(dāng)元素出來(顯示) .fade-leave{} .fade-leave-active{} //變成成什么樣 -> 當(dāng)元素離開(消失) .fade-enter-active,.fade-leave-active{ transition: 1s all ease; } @before-enter/enter/@after-enter @before-leave/leave/@after-leave -
如何animate.css配合用缤弦？
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> //animated也可以放P標(biāo)簽里邊 <p v-show="show"></p> </transition>
多個元素運(yùn)動:
<transition-group enter-active-class="" leave-active-class="">
<p :key="1"></p>
<p :key="2"></p>
//k一般循環(huán)出來
</transition-group>
vue2.0路由
-
布局
<router-link to="/home">主頁</router-link> <router-link to="/news">主頁</router-link> <router-view></router-view> 路由具體寫法
//組件
var Home={
template:'<h3>我是主頁</h3>'
};
var News={
template:'<h3>我是新聞</h3>'
};
//配置路由
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News},
{path:'*', redirect:'/home'}
];
//生成路由實(shí)例
const router=new VueRouter({
routes
});
//最后掛到vue上
new Vue({
router,
el:'#box'
});
-
重定向
之前 router.rediect 廢棄了 {path:'*', redirect:'/home'} -
路由嵌套:
const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ //核心 {path:':username/age/:age', component:UserDetail} ] //user模版里寫上子路由的router-link和router-view }, {path:'*', redirect:'/home'} //404 ]; 父路由模版中: <router-link to="/user/strive/age/10">主頁</router-link> <router-link to="/user/ssss/age/11">主頁</router-link> <router-link to="/user/bbbb/age/12">主頁</router-link> var Home={ template:'<h3>{{$route.params}}</h3>' //{"username":"sss","age":"11"} }; -
路由實(shí)例方法:
router.push({path:'home'}); //直接添加一個路由,表現(xiàn)切換路由领迈，本質(zhì)往歷史記錄里面添加一個 router.replace({path:'news'}) //替換路由，不會往歷史記錄里面添加,相當(dāng)于切換,不會刷新
vue-cli
創(chuàng)建項(xiàng)目vue init webpack-simple 文件名
初始化 npm install
腳手架: vue-loader
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})
vue2.0
vue-loader和vue-router配合
路由要顯示調(diào)用Vue.use(VueRouter)括號內(nèi)為導(dǎo)入是賦的路由的名
style-loader css-loader
style!css//從后往前解析的loader