Vue.js 基础学习之自定义指令

在前面我们学习了Vue给我们提供的几个指令

v-if 和v-else ： 判断为真则显示为假则删除标签。

v-model ：将data中的某些数据与输入框绑定，能通过输入框动态的改变data中的数据的值，在input textarea select中使用。

v-for ： 用于遍历data中的数组。

v-bind ： 绑定数据和元素属性，简写 ：。

v-on：绑定事件，简写@ 。

今天我们学习自定义指令，顾名思义，这个指令是由我们自己去定义的，在vue中自定义指令格式为 v-你说定义的指令名称，

定义方式：

Vue.directive('自定义指令的名称',function(el,binding){}　　 el代表这个指令所在的元素 ，binding用于传递指令的值 binding.value 传递修饰符binding.modifiers 传递参数binding.arg

    <div id="app">
    <div  v-pin='pinked' style=" 100px;height: 100px;background-color: red" class="card">
    <button @click="pinked = !pinked">固定/取消</button>
    card</div>
    <div style=" 1000px;height:2000px;background-color: pink">content</div>
    </div>

<script>

    Vue.directive('pin',function(el,binding){
            var pinned = binding.value;
            if(pinned){
            el.style.position = 'fixed';
            el.style.top = '10px';
            el.style.left = '10px';
        }else{
            el.style.position = 'static';
        }
    });

    new Vue({
        el : '#app',
        data : {
            pinked : false,
        }
    });
</script>

上面代码作用是，在card上添加一个自定义指令，这个指令的作用是，当传进来的binding.value值为true时将card固定在屏幕的左上角，然后在card中加一个Button用以控制binding.value的值。当点击按钮是固定，再次点击便回到原处。

添加修饰符和传递参数

添加修饰符 ：v-pin.修饰符，

<div  v-pin.bottom.right='pinked' style=" 100px;height: 100px;background-color: red">
    <button @click="pinked = !pinked">固定/取消</button>
    card</div>

Vue.directive('pin',function(el,binding){
            var pinned = binding.value;
            var position = binding.modifiers;
            if(pinned){
            el.style.position = 'fixed';
            for(var key in position){
                el.style[key] = "10px";
            }
        }else{
            el.style.position = 'static';
        }
    });

通过修饰符来选择固定再屏幕的四角。

传递参数：传递参数 v-pin:参数

<div  v-pin:true.bottom.right='pinked' style=" 100px;height: 100px;background-color: red">
    <button @click="pinked = !pinked">固定/取消</button>
    card</div>

Vue.directive('pin',function(el,binding){
            var pinned = binding.value;
            var position = binding.modifiers;
            var warning = binding.arg;
            if(pinned){
            el.style.position = 'fixed';
            for(var key in position){
                el.style[key] = "10px";

            }
            if(warning){
                    el.style.background="yellow";
                }
        }else{
            el.style.position = 'static';
        }
    });

若这个按钮被点击过则它的背景会变成黄色。