Vue基础汇总--28个小栗子（下）

14.过渡

<div id="app">  
    <div v-if="show" transition="expand">Hello1</div>  
    <div v-if="show" :transition="transitionName">Hello2</div>  
    <button type="button" v-on:click="toggle">过渡效果演示</button>  
</div> 

.expand-transition {  
  transition: all 0.5s ease;  
  height: 30px;  
  padding: 10px;  
  background-color: #eee;  
  overflow: hidden;  
}  

/* .expand-enter 定义进入的开始状态 */  
/* .expand-leave 定义离开的结束状态 */  
.expand-enter, .expand-leave {  
  height: 0;  
  padding: 0 10px;  
  opacity: 0;  
}  
.fade-transition{  
    transition: all 0.5s ease;  
    height: 30px;  
    padding: 10px;  
    background-color: #2df;  
    overflow: hidden;  
}  
.fade-enter, .fade-leave {  
  padding: 0 10px;  
  opacity: 0.5;  
}  

    var vm=new Vue({  
        el:'#app',  
        data: {  
            show:true,  
            transitionName:'fade'  
        },  
        methods:{  
            toggle:function(){  
                if(this.show){  
                    this.show=false;  
                }else{  
                    this.show=true;  
                }  

            }  
        },  
        transitions: {  
            expand: {  
              beforeEnter: function (el) {  
                el.textContent = 'beforeEnter'  
              },  
              enter: function (el) {  
                el.textContent = 'enter'  
              },  
              afterEnter: function (el) {  
                el.textContent = 'afterEnter'  
              },  
              beforeLeave: function (el) {  
                el.textContent = 'beforeLeave'  
              },  
              leave: function (el) {  
                el.textContent = 'leave'  
              },  
              afterLeave: function (el) {  
                el.textContent = 'afterLeave'  
              }  
            }  
        }  
    });  

15.自定义过渡

    <div id="app">  
        <div v-show="ok" class="animated" transition="bounce">只有我最摇摆</div>  
        <button type="button" v-on:click="toggle">演示过渡效果</button>  
    </div>  

    .animated{  
        width: 150px;  
        background-color: #2df;  
        height: 30px;  
        padding: 10px;  
    }  

    var vm=new Vue({  
        el:'#app',  
        data: {  
            ok:true  
        },  
        methods:{  
            toggle:function(){  
                if(this.ok){  
                    this.ok=false;  
                }else{  
                    this.ok=true;  
                }  
            }  
        },  
        transitions: {  
            bounce: {  
              enterClass: 'bounceInLeft',  
              leaveClass: 'bounceOutRight'  
            }  
        }     
    });  

16.CSS动画效果（与animats.css配合使用）

    <div id="app">  
        <div v-show="ok" class="animated" transition="bounce">看我变一个</div>  
        <button type="button" v-on:click="toggle">演示动画效果</button>  
    </div>  

    .animated{  
        width: 150px;  
        background-color: #2df;  
        height: 30px;  
        padding: 10px;  
    }  
    .bounce-transition {  
      display: inline-block; /* 否则 scale 动画不起作用 */  
    }  
    .bounce-enter {  
      animation: bounce-in .5s;  
    }  
    .bounce-leave {  
      animation: bounce-out .5s;  
    }  
    @keyframes bounce-in {  
      0% {  
        transform: scale(0);  
      }  
      50% {  
        transform: scale(1.5);  
      }  
      100% {  
        transform: scale(1);  
      }  
    }  
    @keyframes bounce-out {  
      0% {  
        transform: scale(1);  
      }  
      50% {  
        transform: scale(1.5);  
      }  
      100% {  
        transform: scale(0);  
      }  
    }  

    var vm=new Vue({  
        el:'#app',  
        data: {  
            ok:true  
        },  
        methods:{  
            toggle:function(){  
                if(this.ok){  
                    this.ok=false;  
                }else{  
                    this.ok=true;  
                }  
            }  
        }  
    });  

17.JavaScript过渡

    <div id="app">  
        <p transition='fade'>什么和什么？</p>  
    </div>  

    .fade-transition{  
        transition: all 0.5s ease;  
        height: 30px;  
        padding: 10px;  
        background-color: #2df;  
        overflow: hidden;  
    }  

    var vm=new Vue({  
        el:'#app'  
    });  
    vm.transition('fade', {  
      css: false,  
      enter: function (el, done) {  
        // 元素已被插入 DOM  
        // 在动画结束后调用 done  
        $(el)  
          .css('opacity', 0)  
          .animate({ opacity: 1 }, 1000, done)  
      },  
      enterCancelled: function (el) {  
        $(el).stop()  
      },  
      leave: function (el, done) {  
        // 与 enter 相同  
        $(el).animate({ opacity: 0 }, 1000, done)  
      },  
      leaveCancelled: function (el) {  
        $(el).stop()  
      }  
    })  

18.渐进过渡

<div id="example-1">  
    <input v-model="query">  
    <ul>  
        <li v-for="item in list | filterBy query" transition="staggered" stagger="100">  
            {{item.msg}}  
        </li>  
    </ul>  
</div> 

    #example-1{  
        width:200px;  
        margin:20px auto;  
        font-size:14px;  
        color:#ff6600;  
    }  
    ul {  
        padding-left: 0;  
        font-family: Helvetica, Arial, sans-serif;  
    }  
    .staggered-transition {  
        transition: all .5s ease;  
        overflow: hidden;  
        margin: 0;  
        height: 25px;  
    }  
    .bounceInLeft, .bounceOutRight {  
        opacity: 0;  
        height: 0;  
    }  

 var exampleData={  
        query: '',  
        list: [  
            { msg: 'Bruce Lee' },  
            { msg: 'Jackie Chan' },  
            { msg: 'Chuck Norris' },  
            { msg: 'Jet Li' },  
            { msg: 'Kung Fury' }  
        ]  
    };  
    var exampleVM = new Vue({  
        el:'#example-1',  
        data:exampleData,  
        transitions:{  
            staggered:{  
                enterClass:'bounceInLeft',  
                leaveClass: 'bounceOutRight'  
            }  
        }  
    });  

/*    exampleVM.transition('stagger', { 
        stagger: function (index) { 
            // 每个过渡项目增加 50ms 延时 
            // 但是最大延时限制为 300ms 
            return Math.min(300, index * 50) 
        } 
    })*/  

19.组件

    <div id="example">  
        <my-component></my-component>  
    </div>  

    //定义  
    /*var myComponent=Vue.extend({ 
        template:'<div>A custom component!</div>' 
    });*/  
    //注册  
    //Vue.component('my-component',myComponent);  
    //在一个步骤中定义与注册  
    Vue.component('my-component',{  
        template:'<div>A custom component!</div>'  
    });  
    //创建根实例  
    new Vue({  
        el:'#example'  
    });  

20.组件的局部注册

    <div id="example">  
        <parent-component></parent-component>  
    </div>  

    //定义  
    /*var Child=Vue.extend({ 
        template:'<div>A child component!</div>' 
    });*/  
    var Parent=Vue.extend({  
        template:'<div>A parent component!<my-component></my-component></div>',  
        components:{  
            // <my-component> 只能用在父组件模板内  
            'my-component':{  
                template:'<div>A child component!</div>'  
            }  
        }  
    });  
    // 注册父组件  
    Vue.component('parent-component', Parent);  
    //创建根实例  
    new Vue({  
        el:'#example'  
    });  

21.props传递数据

    <div id="example" class="demo">  
        <input type="text" v-model="parentMessage"/><br>  
        <child v-bind:my-message="parentMessage"></child>  
        <!-- 双向绑定 -->  
        <child :msg.sync="parentMessage"></child>  

        <!-- 单次绑定 -->  
        <child :msg.once="parentMessage"></child>  
    </div>  

    .demo{  
        border: 1px solid #eee;  
        border-radius: 2px;  
        padding: 25px 35px;  
        margin-bottom: 40px;  
        font-size: 1.2em;  
        line-height: 1.5em;  
    }  

    new Vue({  
        el:'#example',  
        data:{  
            parentMessage:'Message from parent'  
        },  
        components:{  
            child:{  
                props:['myMessage'],  
                template:'<span>{{myMessage}}</span>'  
            }  
        }  
    });  

22.props验证

<div id="example" class="demo">  
    <child></child>  
</div> 

    .demo{  
        border: 1px solid #eee;  
        border-radius: 2px;  
        padding: 25px 35px;  
        margin-bottom: 40px;  
        font-size: 1.2em;  
        line-height: 1.5em;  
    }  

    new Vue({  
        el:'#example',  
        components:{  
            child:{  
                props: {  
                    // 基础类型检测 （`null` 意思是任何类型都可以）  
                    propA: Number,  
                    // 多种类型 (1.0.21+)  
                    propM: [String, Number],  
                    // 必需且是字符串  
                    propB: {  
                        type: String,  
                        required: true  
                    },  
                    // 数字，有默认值  
                    propC: {  
                        type: Number,  
                        default: 100  
                    },  
                    // 对象/数组的默认值应当由一个函数返回  
                    propD: {  
                        type: Object,  
                        default: function () {  
                            return { msg: 'hello' }  
                        }  
                    },  
                    // 指定这个 prop 为双向绑定  
                    // 如果绑定类型不对将抛出一条警告  
                    propE: {  
                        twoWay: true  
                    },  
                    // 自定义验证函数  
                    propF: {  
                        validator: function (value) {  
                            return value > 10  
                        }  
                    },  
                    // 转换函数（1.0.12 新增）  
                    // 在设置值之前转换值  
                    propG: {  
                        coerce: function (val) {  
                            return val + ''; // 将值转换为字符串  
                        }  
                    },  
                    propH: {  
                        coerce: function (val) {  
                            return JSON.parse(val); // 将 JSON 字符串转换为对象  
                        }  
                    }  
                },  
                template:'<span>hello world!</span>'  
            }  
        }  
    });  

23.父子组件之间的通信

    <!--子组件模板-->  
    <template id="child-template">  
        <input type="text" v-model="msg"/>  
        <button type="button" v-on:click="notify">派发事件</button>  
    </template>  
    <!--父组件模板-->  
    <div id="events-example" class="demo">  
    <p>Messages:{{ messages | json }}</p>  
        <child v-on:child-msg="handleIt"></child>  
    </div>  

    .demo{  
        border: 1px solid #eee;  
        border-radius: 2px;  
        padding: 25px 35px;  
        margin-bottom: 40px;  
        font-size: 1.2em;  
        line-height: 1.5em;  
    }  

    // 注册子组件,将当前消息派发出去  
    Vue.component('child',{  
        template:'#child-template',  
        data:function(){  
            return {msg:'hello'}  
        },  
        methods:{  
            notify:function(){  
                if(this.msg.trim()){  
                    this.$dispatch('child-msg',this.msg);  
                    this.msg='';  
                }  
            }  
        }  
    });  
    // 初始化父组件,收到消息时将事件推入一个数组  
    var parent=new Vue({  
        el:'#events-example',  
        data:{  
            messages:[]  
        },  
        methods:{  
            handleIt:function(msg){  
                this.messages.push(msg);  
            }  
        }  
        // 在创建实例时 `events` 选项简单地调用 `$on`  
        /*events:{ 
            'child-msg':function(msg){ 
                this.messages.push(msg); 
            } 
        }*/  
    })  

24.自定义-指令

    <div id="demo" v-demo:hello.a.b="msg"></div>  

    Vue.directive('demo', {  
        bind: function () {  
            console.log('demo bound!')  
        },  
        update: function (value) {  
            this.el.innerHTML =  
                    'name - '       + this.name + '<br>' +  
                    'expression - ' + this.expression + '<br>' +  
                    'argument - '   + this.arg + '<br>' +  
                    'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +  
                    'value - '      + value  
        }  
    });  
    var demo = new Vue({  
        el: '#demo',  
        data: {  
            msg: 'hello!'  
        }  
    })  

25.自定义指令-高级选项

    <div id="demo" >  
        <!--对象字面量-->  
        <div v-demo-1="{ color: 'white', text: 'hello!' }"></div>  
        <!--字面修饰符-->  
        <div v-demo-2.literal="foo bar baz"></div>  
        <!--元素指令-->  
        <my-directive></my-directive>  
        <!--高级选项-params-->  
        <div v-example a="hi"></div>  
    </div>  

Vue.directive('demo-1', function(value){  
    console.log(value.color);  
    console.log(value.text);  
});  
Vue.directive('demo-2',function(value){  
    console.log(value);  
});  
Vue.elementDirective('my-directive',{  
    bind:function(){  
        console.log(this.el);  
    }  
});  
Vue.directive('example',{  
    params:['a'],  
    bind:function(){  
        console.log(this.params.a);  
    }  
});  
Vue.directive('two', {  
    twoWay: true,  
    bind: function () {  
        this.handler = function () {  
            // 将数据写回 vm  
            // 如果指令这样绑定 v-example="a.b.c"  
            // 它将用给定值设置 `vm.a.b.c`  
            this.set(this.el.value)  
        }.bind(this);  
        this.el.addEventListener('input', this.handler);  
    },  
    unbind: function () {  
        this.el.removeEventListener('input', this.handler)  
    }  
});  
vm=new Vue({  
    el: '#demo'  
}); 

26自定义过滤器

    <div id="demo" class="demo">  
        <!--基础过滤器-->  
        <span v-text="message | reverse"></span><br>  
        <span v-text="message | wrap 'before' 'after'"></span><br>  
        <!--双向过滤器-->  
        <input type="text" v-model="money | currencyDisplay"/>  
        <p>ModelValue:{{money | currencyDisplay}}</p>  
        <!--动态参数-->  
        <input v-model="userInput"/>  
        <span>{{msg | concat userInput}}</span>  
    </div>  

.demo{  
    border: 1px solid #eee;  
    border-radius: 2px;  
    padding: 25px 35px;  
    margin-bottom: 40px;  
    font-size: 1.2em;  
    line-height: 1.5em;  
} 

    Vue.filter('reverse',function(value){  
        return value.split('').reverse().join('');  
    });  
    Vue.filter('wrap',function(value,begin,end){  
       return begin+' '+value+' '+end;  
    });  
    Vue.filter('currencyDisplay',{  
        // model -> view  
        // 在更新 `<input>` 元素之前格式化值  
        read:function(val){  
            return '$'+val.toFixed(2)  
        },  
        // view -> model  
        // 在写回数据之前格式化值  
        write: function(val, oldVal) {  
            var number = +val.replace(/[^\d.]/g, '')  
            return isNaN(number) ? 0 : parseFloat(number.toFixed(2))  
        }  
    });  
    Vue.filter('concat',function(value,input){  
        return value+input;  
    })  
    new Vue({  
        el:'#demo',  
        data:{  
            message:'abc',  
            money:123.45,  
            msg:'hello',  
            userInput:'hi'  
        }  
    });  

27.综合

    <div id="demo" class="demo">  

    </div>  

    .demo{  
        border: 1px solid #eee;  
        border-radius: 2px;  
        padding: 25px 35px;  
        margin-bottom: 40px;  
        font-size: 1.2em;  
        line-height: 1.5em;  
    }  

    var myMixin={  
        created:function(){  
            this.hello();  
        },  
        methods:{  
            hello:function(){  
                console.log('hello from mixin!');  
            }  
        }  
    };  
    // 定义一个组件，使用这个混合对象  
    var Component = Vue.extend({  
        mixins: [myMixin]  
    });  
    var component = new Component();  
    new Vue({  
        el:'#demo'  
    });  

28.综合-选项合并

    <div id="demo" class="demo">  

    </div>  

    .demo{  
        border: 1px solid #eee;  
        border-radius: 2px;  
        padding: 25px 35px;  
        margin-bottom: 40px;  
        font-size: 1.2em;  
        line-height: 1.5em;  
    }  

    var mixin={  
        created:function(){  
            console.log('mixin hook called');  
        },  
        methods: {  
            foo: function () {  
              console.log('foo');  
            },  
            conflicting: function () {  
              console.log('from mixin');  
            }  
        }  
    };  
    var vm=new Vue({  
        el:'#demo',  
        mixins:[mixin],  
        created:function(){  
            console.log('component hook called');  
        },  
        methods:{  
            bar: function () {  
              console.log('bar');  
            },  
            conflicting: function () {  
              console.log('from self');  
            }  
        }  
    });  
    vm.foo();  
    vm.bar();  
    vm.conflicting();//组件优先