在前面我们学习了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="width: 100px;height: 100px;background-color: red" class="card"> <button @click="pinked = !pinked">固定/取消</button> card</div> <div style="width: 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="width: 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="width: 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'; } });
若这个按钮被点击过则它的背景会变成黄色。