vue自定义指令

Vue全局自定义指令

接下来用自动获取焦点这个小例子，来介绍一下全局自定义指令。

注意：Vue.directive(‘参数名称’,{}) 定义全局指令，它有两个参数

• 参数1：指令名称,注意在定义的时候，指令名称前不需要加 v- 前缀，但是在调用的时候，必须加v- 前缀。
• 参数2：参数2是一个对象，这个对象身上有一些指令相关的函数(也就是下边介绍的钩子函数)，这些函数可以在特定的阶段，执行相关操作。

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

<script>
    //这里就用到上边所说的钩子函数了，在这里不做详解，在下面的钩子函数以及传参做详解
    Vue.directive('focus',{
        bind:function(){//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
        
        },
        inserted:function(el){// inserted 表示元素 插入到DOM中的时候，会执行此函数，触发一次
            el.focus(); //注意：在每一个函数中，第一个参数，永远是 el ，表示被绑定了指令的 那个元素 ，这个el参数，是一个原生JS的DOM对象
        },
        updated:function(){// 每当VNode 更新的时候，会执行 updated函数，可能会触发多次
        
        }
    })

    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    })
</script>

Vue局部自定义指令

局部自定义指令，其实和全局自定义指令差不多，原理都是一样，接来下用给字体设置样式例子，来介绍局部自定义指令

注意：局部自定义指令 有两个条件【指令名称 和 指令对象】

<div id="app>
    <h5 v-color>我是局部自定义指令</h5>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        date:{},
        methods:{},
        directives:{
            'color':{//给字体设置颜色
                bind:function(el){ //这个function() 中还有第二个参数 binding ，这里不做介绍，在下边钩子函数参数中介绍
                    el.style.color="red";
                }
            }
        }
    })
</script>

注：全局用的是 directive,局部用的是directives

 

• bind :只调用一次，每当指令绑定到元素上的时候，会立即执行这个 bind 函数。

  1. 在上边自动获取焦点的案例中，在元素 刚绑定指令的时候，还没有插入到 DOM 中去，这个时候调用 focus 方法没有作用，因为一个元素，只有插入DOM之后，才能获取焦点，所以这个函数不能获取焦点
  2. 样式设置；只要通过指令绑定给了元素，不管这个元素有没有插入到页面中，这个元素肯定有一个内联样式，将来元素肯定会渲染显示到页面中去，这个时候，浏览器的渲染引擎必然会解析样式，然后应用这个样式。

  注：一般和样式操作有关的，一般都可以在 bind 函数中执行

• inserted ： 表示元素 插入到DOM中的时候，会执行 inserted 函数，触发一次。(例如：自动获取焦点)
  注：和 JS 行为有关系的操作，最好在 inserted 中去执行，防止 JS 行为不生效。

• updated ： 当VNode 更新的时候，会执行 updated 函数，可能会触发多次

---

• componentUpdated ： 指令所在组件的VNode 及其子 VNode 全部更新后调用。
• upbind： 只调用一次，指令与元素解绑时调用。

 

Vue钩子函数传参数详解

上边也有介绍，钩子函数有四个参数。一个是指令所绑定的元素，用来直接操作DOM；另外一个是一个对象，它包含一些属性。另外两个了解。
通过一些例子来了解一下：

• el ： 指令所绑定的元素，规定的也是每个钩子函数中的第一个参数，永远不会改变，这个 el 参数，是一个原生的JS 的 DOM对象
• binding： 第二个参数是一个对象，它包含一些属性(前三个常用，但是其他的也要知道)
  1. name：指令名，不包括 v- 前缀。
  2. value： 指令绑定的值，例如：v-count="1 + 1"中，绑定值为 2
  3. expression： 字符串形式的指令表达式。例如：v-count="1 + 1"中，表达式为 1 + 1

  ---

  4. oldValue： 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  5. arg： 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"
  6. modifiers： 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为{ foo: true, bar: true }
• vnode： Vue 编译生成的虚拟节点。
• oldVnode： 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

注：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

<div id="app">
    //注意：v-color=" 'yellow' "  里边是单引号引着(因为value属性)
    <p v-color=" 'yellow' " v-fontsize=" '50px' ">钩子函数的传参</p>
</div>

<script>
    //全局自定义指令写法
    Vue.directive('color',{
        bind:function(el,binding){
            el.style.color=binding.value;
        }
    })


    //局部自定义指令写法
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        directives:{
            'fontsize':{//设置字体大小
                bind:function(el,binding){
                    el.style.fontSize=binding.value;
                    
                    //增强代码健壮性的一种写法(不管给指令赋值带不带 px ，都会先转化为整数)
                    //el.style.fontSize = parseInt(binding.value) + 'px'
                }
            }
        }
    })

</script>

 

注：钩子函数中的参数，不是一定起名是 el 或者 binding 的，一定要明白原理，他们只不过是形参而已，名字可以不一样，但是他们代表的含义是Vue内部规定好的！

---

钩子函数简写或者合并

在有的时候，可能bind 和 update触发相同行为，不关其他钩子函数的事。

<div id="app">
    <p v-fontsize=" '50px' ">钩子函数的传参</p>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        directives:{
            'fontsize':function(el,binding){ //注意：这个 function 等同于把代码写到了 bind 和 update 中去
                el.style.fontSize=binding.value;
            }
        }
    
    })

</script>