欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VueJs第三天1 -动画与组件

程序员文章站 2024-01-13 22:29:40
...

VueJS第三天1–动画

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

    <div id="div1" 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组件 组件就是一个大对象
    全局组件
    <div id="#box">
        <aaa></aaa>
    <div>   
    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:{

        }
    })

局部组件

        <div id="#box">
        <aaa></aaa>
    <div>   
    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 
        }
    })