VueJs第三天1-动画与组件

VueJS第三天1–动画

bower(前端包管理器)
npm install bower -g
bower install
bower uninstall
bower info vue
bower install vue#1.0.28
- 动画 (进入 出去)
 

    <p id="p1" class="animated" v-show="bSign" transition="bounce">
    new Vue({
        el:'',
        data:{
            bSign=true;
        },
        methods:{
            toggle(){
                this.bSign=!this.bSign      
            }
        },
        transitions:{  //定义所有动画名称
            bounce:{
                enterClass:'zoomInLeft',  //这里用的就是animate.css中定义的动画样式
                leaveClass:'zoonOutRight'
            }
        }
    })

Vue组件 组件就是一个大对象

全局组件

    <p id="#box">
        <aaa></aaa>
    <p>   
    var Aaa=Vue.extend({
        data(){
            return {
                msg:'标题'
            }
        },
        methods:{
            change(){
                alert(123);
            }
        }
        template:"<h1 @click="change">{{msg}}</h1>"
    });
    Vue.component('aaa',Ass);  //全局组件
    var vm=new Vue({
        el:'#box',
        data:{

        }
    })

局部组件

        <p id="#box">
        <aaa></aaa>
    <p>   
    var Aaa=Vue.extend({
        data(){
            return {
                msg:'标题'
            }
        },
        methods:{
            change(){
                alert(123);
            }
        }
        template:"<h1 @click="change">{{msg}}</h1>"
    });
    var vm=new Vue({
        el:'#box',
        data:{

        },
        components:{   //局部组件
            aaa:Aaa 
        }
    })