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

2017-04-03  本文已影响1517人  寒梁沐月 
例：自定义键盘信息
 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);
                    }
                }
            });
        }

<input type="text" @keydown.ctrl="show">
<hr>
<input type="text" @keydown.myenter="show | debounce 2000">

自定义指令

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

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

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

Vue.directive('my-directive',{
    bind : function(){
        //准备工作
        //例如，添加事件处理器或只需要运行一次的高耗任务
    },
    update : function(){
        //值更新时的工作
        //也会以初始值为参数调用一次
    },
    unzind : function(){
        //清理工作
        //例如，删除bind()添加的事件监听器
    }
})
//调用
<div v-my-directive="someValue"></div>
//只需要update函数，可以传一个函数替代定义对象
Vue.directive('my-directive',function(value){})

<!-- 如果指令需要多个值，可以传入一个js对象 -->
<!-- 指令可以使用合法的js表达式 -->
<body id="example">
    <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
    Vue.directive('demo',function(value){
        console.info(value.color); //white
        console.info(value.text) // hello!
    })
    var demo = new Vue({
        el : '#demo'
    })
</script>

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

<body id="example">
    <div id="demo" v-demo.literal="foo bar baz"></div>
</body>
<script>
    Vue.directive('demo',function(value){
        console.info(value); //foo bar baz
    })
    var demo = new Vue({
        el : '#demo'
    })
</script>

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

<body id="demo">
    <my-directive class="hello" name="hi"></my-directive>
</body>
<script type="text/javascript">
    Vue.elementDirective('my-directive',{
        //api同普通指令一致
        bind : function(){
            console.info(this.el.className);
            console.info(this.el.getAttribute('name'))
        }
    })

    var demo = new Vue({
        el : '#demo'
    })
</script>

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

<body id="demo">
    <div v-my-directive="a"></div>
    <button @click="change">change</button>{{a,b,c}}
</body>
<script>
    Vue.directive('my-directive',function(){
        deep : true,

        update : function(obj){
            //当obj的嵌套属性变化时候调用
            console.info(obj.b.c);
        }
    })
    var demoVM = new Vue({
        el : '#demo',

        data : {
            a : {b : {c : 2}}
        },

        method : {
            change : function(){
                demoVM.a.b.c = 4;
            }
        }
    })
</script>

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

<body id="demo">
    <div v-my-directive="a++"></div>
    {{a}}
</body>
<script>
    Vue.directive('my-directive',function(){
        acceptStatement : true,

        update : function(fn){
            //当obj的嵌套属性变化时候调用
            console.info(fn.toString())
            fu();
        }
    })
    var demoVM = new Vue({
        el : '#demo',

        data : {
            a : 5
        }
    })
</script>

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

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

附自定义拖拽指令
   <body>
    <div id="box">
        <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
        <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
    </div>

</body>
    <script>
        window.onload=function(){
              Vue.directive('drag',{
                inserted: function (el) {
                    var oDiv=el;
                    oDiv.onmousedown=function(ev){
                        var disX=ev.clientX-oDiv.offsetLeft;
                        var disY=ev.clientY-oDiv.offsetTop;
                        document.onmousemove=function(ev){
                            var l=ev.clientX-disX;
                            var t=ev.clientY-disY;
                            oDiv.style.left=l+'px';
                            oDiv.style.top=t+'px';
                        };
                        document.onmouseup=function(){
                            document.onmousemove=null;
                            document.onmouseup=null;
                        };
                    };
                }
            });
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:''
                }
            });
        };

    </script>

字面指令

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

<div v-literal-dir="foo"></div>
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 进行操作...
  }
})
使用时我们不再用这样的写法:

<div v-my-directive></div>
而是写成:

<my-directive></my-directive>

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

上一篇 下一篇

猜你喜欢

热点阅读