vue-> 過渡(動畫) （它的本質(zhì)走的是css3: transtion ,animation）

方法一
toggle(){  //methods
    this.bSign=!this.bSign;
}
  <div id="div1" v-show="bSign" transition="fade"></div>//動畫名fade  data:{data:{bSign:true}}
.fade-transition{
    transition: 1s all ease;    
}
.fade-enter{//進(jìn)入
    opacity: 0;
}
.fade-leave{//離開
    opacity: 0;
    transform: translateX(200px);
}
方法二          （推薦）        引入 animate.css
methods:{
    toggle(){
        this.bSign=!this.bSign;
    }
},
transitions:{ //定義所有動畫名稱   vue的方法
    bounce:{
            enterClass:'zoomInLeft',//animate.css的動畫
            leaveClass:'zoomOutRight'
    }
}
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>點擊的時候執(zhí)行bounce

組件 （就是一個大對象）

組件里面放數(shù)據(jù):data必須是函數(shù)的形式钮科，函數(shù)必須返回一個對象(json)

1.     全局注冊組件      (不常用)
     var oExt=Vue.extend({//繼承  創(chuàng)建一個組件構(gòu)造器
             data(){//函數(shù)形式
             return {//返回一個json  return
                 msg:'Hellow word'
             };
         }
         template:'<h3>{{msg}}</h3>'
     });
Vue.component('oExt',oExt);//全局注冊組件
2.    局部組件  (放到某個組件內(nèi)部) (不常用)
     var oExt=Vue.extend({
         template:'<h3>{{msg}}</h3>',
         data(){
             return {
                 msg:'Hellow'
             }
         }
     });
     var vm=new Vue({
         el:'#box',
         components:{ //局部組件
             oExt:oExt
         }
     });
3.   另一種編寫方式  全局
<o-ext></o-ext>
Vue.component('o-ext',{
    template:'<p>123435</p>'
});
var vm=new Vue({
    el:'#box'
});
4.另一種編寫方式2  局部
var vm=new Vue({
    el:'#box',
    components:{
        'my-aaa':{
            data(){
                return {
                    msg:'welcome vue'
                }
            },
            methods:{
                change(){
                    this.msg='changed';
                }
            },
            template:'<h2 @click="change">標(biāo)題2->{{msg}}</h2>'
            }
        }
    });

組件-模版

1.就是上面說的這種
        template:'<h2 @click="change">標(biāo)題2->{{msg}}</h2>'
2.單獨放到某個地方
      a).
        <my-aaa></my-aaa>//顯示
        <script type="x-aaa" id="aaa">   //模板  為了不讓瀏覽器認(rèn)為他是寫js的  在type更改任意類型就行
            <h2>標(biāo)題2->{{msg}}</h2>
            <ul>
                <li>1111</li>
                <li>222</li>
                <li>3333</li>
                <li>1111</li>
            </ul>
        </script>
        var vm=new Vue({
            el:'#box',
            components:{//組件  注意這塊是components
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue'
                        }
                    }
                    template:'#aaa'
                }
            }
        });
b).用<template></template>包裹   （常用模板）
    <template id="aaa">
    <h1>標(biāo)題1</h1>
    <ul>
        <li v-for="val in arr">
            {{val}}
        </li>
    </ul>
    </template>

動態(tài)組件

<input type="button" @click="a='one'" value="one組件">
<input type="button" @click="a='two'" value="two組件">
<component :is="type"></component>//根據(jù)type判斷是那個模板
var vm=new Vue({
    el:'#box',
    data:{
        type:'one'//默認(rèn)顯示組件一
    },
    components:{
        'one':{
            template:'<h2>我是one組件</h2>'
        },
        'two':{
            template:'<h2>我是two組件</h2>'
        }
    }
});