4 动画及组件

vue-> 过渡(动画) （它的本质走的是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{//进入
    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>点击的时候执行bounce

组件 （就是一个大对象）

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

1.     全局注册组件      (不常用)
     var oExt=Vue.extend({//继承  创建一个组件构造器
             data(){//函数形式
             return {//返回一个json  return
                 msg:'Hellow word'
             };
         }
         template:'<h3>{{msg}}</h3>'
     });
Vue.component('oExt',oExt);//全局注册组件
2.    局部组件  (放到某个组件内部) (不常用)
     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">标题2->{{msg}}</h2>'
            }
        }
    });

组件-模版

1.就是上面说的这种
        template:'<h2 @click="change">标题2->{{msg}}</h2>'
2.单独放到某个地方
      a).
        <my-aaa></my-aaa>//显示
        <script type="x-aaa" id="aaa">   //模板  为了不让浏览器认为他是写js的  在type更改任意类型就行
            <h2>标题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>标题1</h1>
    <ul>
        <li v-for="val in arr">
            {{val}}
        </li>
    </ul>
    </template>

动态组件

<input type="button" @click="a='one'" value="one组件">
<input type="button" @click="a='two'" value="two组件">
<component :is="type"></component>//根据type判断是那个模板
var vm=new Vue({
    el:'#box',
    data:{
        type:'one'//默认显示组件一
    },
    components:{
        'one':{
            template:'<h2>我是one组件</h2>'
        },
        'two':{
            template:'<h2>我是two组件</h2>'
        }
    }
});