Vue自定义键盘信息,自定义指令

例：自定义键盘信息
 Vue.directive('on').keyCodes.ctrl=17;
        Vue.directive('on').keyCodes.myenter=13;
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{},
                methods:{
                    show:function(){
                        alert(111);
                    }
                }
            });
        }

自定义指令

1、Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象

2、钩子函数：将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令

bind - 只调用一次，在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时候，参数为新值与旧值
unbind - 只调用一次，在指令从元素上解绑的时候调用

Vue.directive('my-directive',{
    bind : function(){
        //准备工作
        //例如，添加事件处理器或只需要运行一次的高耗任务
    },
    update : function(){
        //值更新时的工作
        //也会以初始值为参数调用一次
    },
    unzind : function(){
        //清理工作
        //例如，删除bind()添加的事件监听器
    }
})
//调用

//只需要update函数，可以传一个函数替代定义对象
Vue.directive('my-directive',function(value){})

当指令使用字面修饰符，值将按普通字符串处理并传递给update方法，update方法只调用一次，因为普通字符串不能影响数据变化

3、以属性的形式使用自定义属性

4、自定义属性用在对象上，对象内部属性变化的时候触发update，在指令定义对象中指定deep:true

    

    change{{a,b,c}}

5、acceptStatement让自定义指令接受内联语句

    

    {{a}}

6、v-on绑定多个事件时，要是是不同的事件类型，例如点击，focus，change，会按照业务需求进行

选择，要是绑定了2个甚至多个click事件，那么v-on只会绑定第一个click事件

附自定义拖拽指令
   
    

        

        

    


    

字面指令

如果在创建自定义指令的时候传入 isLiteral: true ，那么特性值就会被看成直接字符串，并被赋值给该指令的 expression。字面指令不会试图建立数据监视。
例子：

Vue.directive('literal-dir', {
  isLiteral: true,
  bind: function () {
    console.log(this.expression) // 'foo'
  }
})

动态字面指令

然而，在字面指令含有 Mustache 标签的情形下，指令的行为如下：

指令实例会有一个属性，this._isDynamicLiteral被设为true；
如果没有提供update函数，Mustache 表达式只会被求值一次，并将该值赋给this.expression。不会对表达式进行数据监视。
如果提供了update函数，指令将会为表达式建立一个数据监视，并且在计算结果变化的时候调用update。

双向指令

如果你的指令想向 Vue 实例写回数据，你需要传入 twoWay: true 。该选项允许在指令中使用
this.set(value)。

Vue.directive('example', {
  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)
  }
})

元素指令

有时候，我们可能想要我们的指令可以以自定义元素的形式被使用，而不是作为一个特性。这与 Angular 的 E 类指令的概念非常相似。元素指令可以看做是一个轻量的自定义组件（后面会讲到）。你可以像下面这样注册一个自定义的元素指令：

Vue.elementDirective('my-directive', {
  // 和普通指令的 API 一致
  bind: function () {
    // 对 this.el 进行操作...
  }
})
使用时我们不再用这样的写法:


而是写成:

元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。