directive指令

创建指令

    Vue.directive(id, definition)

definition里的参数

    Vue.directive('my-directive', {
    bind: function () {
    },
    update: function (newValue, oldValue) {
    },
    unbind: function () {
    }
    })

默认可写一个参数

    Vue.directive('my-directive',function (newValue, oldValue) {
    //默认为update
    });

指令实例属性

?  el: 指令绑定的元素。(当前指令元素)

?  vm: 拥有该指令的上下文 ViewModel。(当前作用域)

?  expression: 指令的表达式，不包括参数和过滤器。(当前表达式)

?  arg: 指令的参数。

?  name: 指令的名字，不包含前缀。(指令名字)

?  modifiers: 一个对象，包含指令的修饰符。(指令参数的属性)

?  descriptor: 一个对象，包含指令的解析结果。(描述当前指令)

    <div v-my-directive:hello.a.e="aa"></div>

元素指令

elementDirective

    Vue.elementDirective('my-directive', {
    bind: function () {
    // 操作 this.el...
    }
    })

指令中的高级参数

设置指令中的属性

    <div v-my-directive a="hello"></div>
    Vue.directive('my-directive',{
    params:['a'],
    bind: function () {
    console.log(this.params.a);
    }
    });

动态设置指令中的属性

    Vue.directive('my-directive',{
    params:['a'],
    paramWatchers:{ //监听动态变化
    a: function (old,o) {
    console.log(old,o);
    }
    },
    bind: function () {
    }
    });

deep深度监听

对象内部属性监听

    <div v-my-directive="obj"></div>
    Vue.directive('my-directive',{
    params:['a'],
    deep:true,
    update: function (obj) {
    console.log(obj.name);
    }
    });

通过指令写回数据

指令和数据交互

    <input type="text" v-model="bug" v-my-directive="bug">
    Vue.directive('my-directive',{
    twoWay:true,
    bind: function () {
    this.handle= function () {
    this.set(this.el.value);
    }.bind(this);
    this.el.addEventListener('input',this.handle,false)
    }
    });

接受内联语句

在指令中运算结果

    <input type="text" v-model="bug" v-my-directive="bug=(bug==124?0:1)">
    Vue.directive('my-directive',{
    twoWay:true,
    acceptStatement:true,
    update: function (fn ) {
    console.log(fn());
    }
    });

mixins

抽取共有逻辑(自动合并)

    ar mixins = {
    created: function () {
    this.hello();
    },
    methods:{
    hello: function () {
    console.log('from mixinHello');
    }
    }
    }
    var com = Vue.component('parent',{
    mixins:[mixins],
    created: function () {
    console.log('from my');
    },
    methods:{
    hello: function () {
    console.log('from myHello');
    }
    }
    });
    new com;

注册全局mixins

全局注册混合(慎用)

    Vue.mixin({
    created: function () {
    var v = this.$options.dd;
    console.log(v);
    }
    })

过渡效果

v-if/v-show

    .expand-transition {
    height: 40px;
    background: yellow;
    transition:all 2s;
    }
    .expand-enter, .expand-leave {
    background: red;
    }
    <input type="checkbox" v-model="flag">
    <div v-if="flag" transition="expand"></div>

动态绑定

    <div v-if="flag" :transition="expand"></div>

过渡效果

绑定状态

    Vue.transition('fade', {
    beforeEnter: function (el) {
    el.innerHTML='进入之前';
    },
    enter: function (el) {
    setTimeout(function () {
    el.innerHTML='进入中';
    },500);
    },
    afterEnter: function (el) {  el.innerHTML='进入后';  },
    beforeLeave: function (el) {  el.innerHTML='离开之前';  },
    leave: function (el) {
    setTimeout(function () {  el.innerHTML='离开中'},500);
    },
    afterLeave: function (el) {  el.innerHTML='离开后';  },
    });

v-for中使用过渡

让v-for带有transition效果

    .stagger-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
    }
    .stagger-enter, .stagger-leave {
    opacity: 0;
    height: 0;
    }
    transition="stagger" stagger="100"