Vue自定义全局指令和私有指令

[TOC]

## Vue自定义全局指令和私有指令

### vue使用Vue.directive()定义全局指令

+ Vue.directive('focus')第一个参数是指令的名称，名称前面不需要加v-开头

+ Vue.directive('focus',{})第二参数是一个对象，在对象里面有指令相关的处理函数

- `bind:function(el){}：`每当指令绑定到元素上时，就会调用bind方法，只执行一次，bind执行的时间在元素渲染到浏览器之前，这时元素还没放到DOM中去，因此我们在bind函数中调用DOM的方法是无效的，DOM操作不了但是bind函数可以执行一些预定设置，例如样式的设置，当浏览器发现元素显示在页面上时，浏览器渲染引擎必定会解析样式，并应用给元素，所以和样式相关联的操作我们可以放在bind函数中来执行

- `inserted:function(el){}：`元素被插入到DOM中的时候会执行inserted函数，仅触发一次

- `updated:function(el){}：`当VNode（Vue 编译生成的虚拟节点）更新的时候会执行updated函数，可触发多次

指令对象中函数的参数el就是绑定这个指令的这个元素，是一个原生的js对象即DOM对象，参数binding是一个对象，它包含了自定义指令的信息

+ vue中的指令调用都以v-开头，所以我们自定义的指令调用也需要以v-作为前缀开头如示例中的v-focus

### vue使用directives:{}定义私有指令

+ directives可以定义多个私有指令，directives的定义方式和全局基本差不多，格式`directives:{'fontsize':{bind:function(el,binding){},……}，……}`

+ 自定义指令还可以简写，当我们定义的指令只需要bind或updated函数时，可以简写成`directives:{'fontsize':function(el,binding){}，……}`，这样写法等同于把方法放到了bind和updated中去

> **注意点**：
自定义指令的名称不能有大写字母，例如：v-bColor，浏览器会提示错误：Failed to resolve directive: bColor

具体使用看下面的示例

```html
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
</hred>
<div id="app">
    <h3>进入页面就让输入框获取到焦点</h3>
    <input type="text" class="form-contorl" v-focus />
    <h3 v-bcolor="'#ddd'" v-color="'red'" v-fontitalic="'italic'">给我来点颜色</h3>
</div>
<script type="text/javascript">
    Vue.directive("focus", {
        inserted: function (el) { el.focus() },
    })
    Vue.directive("color", {
        bind: function (el, binging) {
            el.style.color = binging.value
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {},
        directives: {
            "bcolor": {
                bind: function (el, binding) {
                    el.style.backgroundColor = binding.value
                }
            },
            "fontitalic": function (el, binding) {
                console.log(binding)
                el.style.fontStyle = binding.value
            }
        }
    })
</script>

</html>
```