vue.js（14）--自定义全局指令

<input type="text" class="form-control" v-model="keywords" v-focus>

使用vue.directive（‘focus’，{对象}）定义全局指令，v-focus

   <script>
        Vue.directive('focus',{
            // 在每一个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，
            // 这个el参数，是一个原生的js对象，也就是dom
            bind:function(el,binding){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
                el.style.color=binding.value
            },//binding为一个对象，包含一些属性
            inserted:function(el){//当元素插入到dom的时候，会执行insert，只执行一次
                el.focus()
            },
            updated:function(el){//当vnode更新的时候会执行update，可能触发多次
                
            }
        })
        var vm =new Vue({
            el:'#a'
        })
    </script>

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

<script>
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})
</script>

 

转载于:https://www.cnblogs.com/qiqisusu/p/11360516.html