vue06
vue动画
transition 之前 属性
<p transition="fade"></p>
.fade-transition{}
.fade-enter{}
.fade-leave{}
-
vue2.0以后
<transition name="fade" @before-enter="beforeEnter"> 运动东西(元素,属性、路由....) </transition> //methods里边定义beforeEnter方法,beforeEnter(el)方法里有参数是当前元素 class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示) .fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失) .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标签里边 <p v-show="show"></p> </transition>
多个元素运动:
<transition-group enter-active-class="" leave-active-class="">
<p :key="1"></p>
<p :key="2"></p>
//k一般循环出来
</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'}
];
//生成路由实例
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"} };
-
路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个 router.replace({path:'news'}) //替换路由,不会往历史记录里面添加,相当于切换,不会刷新
vue-cli
创建项目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配合
路由要显示调用Vue.use(VueRouter)括号内为导入是赋的路由的名
style-loader css-loader
style!css//从后往前解析的loader
网友评论