vue动画 -组件

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

组件: 差不多是一个大对象

定义一个全局组件:

//1官方写法
 <div id="box">
        <test></test>
    </div>
    <script type="text/javascript">
        //注册
        Vue.component('test', {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的组件'}
            },
            methods:{
                change:function(){
                    //todo
                    console.log(this);
                }
            }
        });

        //创建根实例
        var vm = new Vue({
            el:'#box',
        });
    </script>

<div id="box">
         <aaa></aaa>
    </div>
<script>    
var Aaa=Vue.extend({    //创建一个“子类”
        //*组件里面放数据:
        //data必须是函数的形式，函数必须返回一个对象.
            data(){     
                return {
                msg:'11111'
                };
            },
            template:'<h3>{{msg}}</h3>'
        });
        Vue.component('aaa',Aaa);
        //var a=new Aaa();
        //console.log(a);


        var vm=new Vue({
            el:'#box'
        });
</script>

局部组件

 <div id="box">
        <test></test>
    </div>
    <script type="text/javascript">
        ///定义组件
        var testTemplate = {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };

        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'test': testTemplate
            }
        });
    </script>




//第二种写法
<div id="box">
        <my-aaa></my-aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            template:'<h3>{{msg}}</h3>',
            data(){
                return {
                    msg:'ddddd'
                }
            }
        });


        var vm=new Vue({
            el:'#box',
            data:{
                Sign:true
            },  
            components:{ //局部组件  component加 s=多个
                'my-aaa':Aaa
            }
        });

    </script>

模板 template

<template id="aaa">  //template 就是模板   一般组件多需要配合模板用
        <h1>标题1</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue',
                            arr:['apple','banana','orange']
                        }
                    },
                    methods:{
                        change(){
                            this.msg='changed';
                        }
                    },
                    template:'#aaa'
                }
            }
        });

    </script>

动态组件

    <div id="box">
        <input type="button" @click="a='aaa'" value="aaa组件">
        <input type="button" @click="a='bbb'" value="bbb组件">
        <component :is="a"></component>
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{   //简单路由
                'aaa':{
                    template:'<h2>我是a组件</h2>'
                },
                'bbb':{
                    template:'<h2>我是b组件</h2>'
                }
            }
        });
    </script>

组件数据传递
子组件获取父组件的值
props[]

<div id="box">
        <aaa>
        </aaa>
    </div>

    <template id="aaa">   //模板
        <h1>11111</h1>
        <bbb :m="msg2" :mm="msg1"></bbb>  //这里  ：=v-bind    msg2是aaa里面 data   return 出来的
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg1:'我是皮皮',
                            msg2:'我是父组件的数据'
                        }
                    },
                    template:'#aaa',
                    components:{
                        'bbb':{
                            props:['m','mm'],  //这里的m就是<bb> 绑定的m,必须是json格式
                            template:'<h3>我是bbb组件->{{m}}</br>{{mm}}</h3>'
                        }
                    }
                }
            }
        });

    </script>

父组件获取子组件的值
其实主要是 子组件通过$emit主动把值传给父组件，父组件通过v-on来接收

    <div id="box">
        <aaa>
        </aaa>
    </div>
    <template id="aaa"> //这里是父模板组件aaa
        <span>我是父级 -> {{msg}}</span>
        <bbb @child-msg="get"></bbb> 
        //child-msg调用下面子组件bbb的方法
    </template>
    <template id="bbb"> //这里是子组件bbb
        <h3>子组件-</h3>
        <input type="button" value="开始" @click="send">
        //执行一个send方法
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{   
                'aaa':{
                    data(){
                        return {
                            msg:111,
                            msg2:'我是父组件的数据'
                        }
                    },
                    template:'#aaa',
                    methods:{
                        get(msg){ 
                        //这里的msg就是就是下面的this.a
                        //msg=我是子组件的数据
                        // alert(msg);
                            this.msg=msg;
            //这里是吧aaa父组件里面data的msg赋值子组件传过来的msg
                        }
                    },
                    components:{
                        'bbb':{
                            data(){
                                return {
                                    a:'我是子组件的数据'
                                }
                            },
                            template:'#bbb',
                            methods:{ 
                                send(){  
    //这要是用过$emit主动把值传给父组件.$emit（'方法名字',值this.a=bbb，data里面的a）
                                        this.$emit('child-msg',this.a);
                                }
                            }
                        }
                    }
                }
            }
        });

    </script>