vue06

作者: 追卓2018 | 来源:发表于2017-09-20 23:20 被阅读0次

    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

    相关文章

      网友评论

          本文标题:vue06

          本文链接:https://www.haomeiwen.com/subject/gagjsxtx.html