vue动画 -组件

来源：互联网发布：淘宝助理5.5无数据编辑：程序博客网时间：2024/05/23 15:47

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>

阅读全文

0 0