<div id="div1" v-show="bSign" transition="fade"></div>

    动画:

        .fade-transition{

        }

        进入：

        .fade-enter{

            opacity: 0;

        }

        离开：

        .fade-leave{

            opacity: 0;

            transform: translateX(200px);

        }

    也可以使用animation.css动画库，并且vue实例还有一个transition配置项

    <div class="animated" transition="bounce" v-show="bSign"></div>

    new Vue({

        el:'',

        data:{},

        methods:{},

        transitions:{

            bounce:{

                enterClass:'zoonInLeft',

                leaveClass:'zoomOutRight'

            }

        }

    })

var Aaa=Vue.extend({

    template:'<h3>我是标题3</h3>'

});

Vue.component('aaa',Aaa); //挂在全局Vue对象上的

//全局组件可以在以后的通过new出来的vue实例中使用

    *组件里面放数据:

        组件里面的data必须是函数的形式，函数必须返回一个对象(json数据)

var vm=new Vue({

    el:'#box',

    data:{

        bSign:true

    },

    components:{ //局部组件 挂在vue实例内的

        aaa:Aaa

    }

});

      全局：

    Vue.component('my-aaa',{

        template:'<strong>好</strong>'

    });

    局部：

    var vm=new Vue({

        el:'#box',

        components:{

            'my-aaa':{

                template:'<h2>标题2</h2>'

            }

        }

    });    

　　 1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

    2. 单独放到某个地方

        a). <script type="x-template" id="aaa">

            <h2 @click="change">标题2->{{msg}}</h2>

            </script>

        b). 推荐
　　　　　　　<template id="aaa">

              <h1>标题1</h1>

              <ul>

                <li v-for="val in arr">

                {{val}}

                </li>

              </ul>

            </template>

<component :is="组件名称"></component>

1. 子组件就想获取父组件data

    a、在调用子组件：绑定属性

        <bbb :m="数据"></bbb>

    b、子组件之内:通过props获取以上绑定的属性

        props:['m','myMsg']

        也可以指定类型的props

        props:{

            'm':String,

            'myMsg':Number

        }
　　 c、之后就可以在子组件的methods里面或者html插值里面使用了

2. 父级获取子级数据

    *子组件实例主动把自己的数据，发送到父级，父级通过v-on:自定义事件监听，捕获到发送的事件触发，并接收到数据

    vm.$emit(事件名,数据);

    v-on:   @事件名=“自己的方法”

html:

    <a v-link="{path:'/home'}">主页</a>    跳转链接

    展示内容:

    <router-view></router-view>

js:

    //1. 准备一个根组件

    var App=Vue.extend();

    //2. Home News组件都准备

    var Home=Vue.extend({

        template:'<h3>我是主页</h3>'

    });

    var News=Vue.extend({

        template:'<h3>我是新闻</h3>'

    });

    //3. 准备路由

    var router=new VueRouter();

    //4. 关联(将组件名与定义的组件关联，之后就可以在html中通过v-link使用了)

    router.map({

        'home':{

            component:Home

        },

        'news':{

            component:News

        }

    });

    //5. 启动路由

    router.start(App,'#box');

　　 跳转（路由重定向）:

    router.redirect({

        ‘/’:'/home'

    });

    主页    home

        登录    home/login

        注册    home/reg

    新闻页    news

    subRoutes:{

        'login':{

            component:{

                template:'<strong>我是登录信息</strong>'

            }

        },

        'reg':{

            component:{

                template:'<strong>我是注册信息</strong>'

            }

        }

    }　　

　　　　　<template>

            html

        </template>

        <style>

            css

        </style>

        <script>

            //js    （平时代码、ES6）    babel-loader（编译es6）
　　　　　　　export default{
　　　　　　　　//里面像组件使用一样的
　　　　　　　　data(){
　　　　　　　　　　return {
　　　　　　　　　　　　msg:'welcome Vue'
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　}

        </script>