Vue自定义指令

一，全局指令

1，自定义全局指令

使用Vue.directive()定义全局指令，参数1：指令的名称  参数2：对象，这个对象身上 有一些指令相关的钩子函数 这些函数可以在特定的阶段执行相关操作

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。插入到DOM中会被执行，只除非一次

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。可触发多次

Vue.directive('focus', {
    //注意 在每个函数中 第一个参数永远是el，表示被绑定了指令的元素，这个el是一个原生的JS对象
    // 在元素刚绑定指令 还没有插入到DOM中去 这时候调用方法没有作用 因为一个元素 只有插入DOM之后才能获取焦点
    bind: function(el){
        el.focus()
    },
    inserted: function(el){
        el.focus()
    },
    updated: function(el){
        
    }
})

2，页面调用，Vue中所有的指令 在调用的时候 都是以 v-开头

<div id="app">
    <input type="text" name="" id="" v-focus>
</div>

二，私有指令

 directives:{
     '指令名称': function(el,args){
      // 钩子函数
      bind: function(){}
      }
     }    

例如

var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        directives: { //自定义私有指令，注意要加s
            'fontweight': {
                bind: function(el, binding){
                    el.style.fontWeight = binding.value
                }
            },
            'color': {
                bind: function(el, binding){
                    el.style.color = binding.value
                }
            }
        }
    })

2，页面调用

<div id="app">
    <input type="text" name="" id="" v-focus >
    <h3 v-fontweight="200" v-color="'pink'">你好</h3>
</div>

 三，指令简写

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

全局指令简写：

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

私有指令简写：

var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        directives: { //自定义私有指令，注意 这个function等同于把代码写到了bind和update中去
            'fontsize': function(el, binding){
                el.style.fontSize = binding.value
            }
        }
    })